Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "how to do DOM of JavaScript". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Increase in DOM

DOM operations refer to adding nodes, which are divided into two parts: creating nodes and inserting nodes.

create a node

Common API methods for creating nodes include:

1. document.createElement(): Creates the specified HTML element

2. document.createTextNode(): Creates a text node

3. document.createDocumentFrame(): Create a document fragment

4. document.createAttribute(): Create node attributes

5. node.cloneNode(): clone node

Insert Node ###

Common API methods for inserting nodes include:

1. node.appendChild(): appends a new node to the end

2. node.insertBefore(): Insert a new node

This is a paragraph.

Here's another paragraph.

var para=document.createElement("p");var node=document.createTextNode("This is a new paragraph. ");

para.appendChild(node);

var element=document.getElementById("div1");

element.appendChild(para);

Example explanation:

This code creates a new

Element:

var para=document.createElement("p");

If necessary

Element, you must first create a text node. This code creates a text node:

var node=document.createTextNode("This is a new paragraph. ");

And then you have to ask

Element appends this text node:

para.appendChild(node);

Finally, you must append the new element to an existing element.

This code finds an existing element:

var element=document.getElementById("div1");

This code adds a new element to this existing element:

element.appendChild(para);

About document.createAttribute()

The document.createAttribute() method creates and returns a new attribute node. But this method is not very common, if it involves creating attributes, it is generally used node.setAttribute().

This is a paragraph.

Here's another paragraph.

var node = document.getElementById ('div 1'); var newAttr = document.createAttribute ('title '); //Create a new title attribute;

newAttr .nodeValue = 'Hello world! '; //The title attribute is: Hello world!

node.setAttributeNode(attr); //Apply to the corresponding element node

About node.cloneNode()

The node.cloneNode(deep) method returns a copy of the node, optional deep, indicating whether deep cloning is used, if true, all descendants of the node will also be cloned, otherwise, only the node itself will be cloned.

This is a paragraph.

Here's another paragraph.

var node = document.getElementById ('div 1');var cloneNode = node.cloneNode(true); //clone div1 entire node;

cloneNode.id = "div2"; //Modify the cloned node id name to div2;

document.body.appendChild(cloneNode); //appends cloned nodes to the web page;

DOM Deletion

The primary API for DOM node deletion is node.removeChild(); you can use parentNode.removeChild(child) to delete a child of a specified parent node parentNode and return the deleted node.

Note: This method is called on the parent node of the deleted node, not on the deleted node. If the parameter node is not a child node of the current node, the removeChild method will report an error.

This is a paragraph.

This is another paragraph.

var parent=document.getElementById("div1");var child=document.getElementById("p1");

parent.removeChild(child);

Example explanation:

This HTML document has two child nodes (two

Elements of:

This is a paragraph.

This is another paragraph.

Find elements with id="div1":

var parent=document.getElementById("div1");

Find id="p1"

Element:

var child=document.getElementById("p1");

Remove child elements from parent elements:

parent.removeChild(child);

DOM modification

Common API methods for modifying nodes include:

1. appendChild(): appends a new node to the end

2. insertBefore(): Insert a new node

3. replaceChild(): Replace the node

Note: The above methods are all child nodes of a certain node of the operation, that is to say, to use these methods, you must first obtain the parent node. Also, not all nodes have children, and calling these methods on nodes that do not support children will cause errors.

DOM Search

DOM node search mainly includes: element search and node search.

Find Element

1. getElementById() ---Accessed by ID;

2. getElementsByClassName() ---accessed by class name;

3. getElementsByTagName() ---accessed by tagname;

4. querySelector() ---accessed via CSS selector (single);

5. querySelectorAll() ---Access (all) via CSS selector;

node lookup

All nodes have these attributes, which can be used to access the relevant node node:

1. Node.childNodes: Access all direct child node elements under a single element, which can be a loopable array-like object. This node collection can protect child nodes of different types (such as text nodes or other element nodes).

2. Node.firstChild: Has the same effect as the first entry in the childNodes array (Element.childNodes[0]), but is a shortcut.

3. Node.lastChild: has the same effect as the last entry in the childNodes array (Element.childNodes[Element.childNodes.length-1]), but is only a shortcut.

4. Node[xss_clean]: Access the parent node of the current node. There can only be one parent node. The ancestor node can be accessed as Node[xss_clean][xss_clean].

5. Node.nextSibling: Access the next node in the DOM tree at the same level as the current node.

6. Node.previousSibling: Access the next node in the DOM tree at the same level as the current node.

"JavaScript DOM how to do" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.