(1) Create a node
CreateDocumentFragment () // Create a DOM fragment
CreateElement () // Create a specific element
CreateTextNode () // Create a text node
(2) Add, remove, replace, insert
appendChild()
removeChild()
replaceChild()
insertBefore()
(3) Search
GetElementsByTagName () // Pass the tag name
GetElementsByName () // Passes the value of the element’s Name attribute
GetElementById () // Unique by element Id
1. Create the element node
The document.createElement() method is used to create an element, takes a parameter, the tag name of the element to be created, and returns the element node to be created
1 var div = document.createElement(“div”); // Create a div element
2 div.id = “myDiv”; // Set the div id
3 div.className = “box”;
// Set the div class to add elements to the document tree. Add element node
The appendChild() method is used to add a node to the end of the childNodes list, returning the element node to be added
1 var ul = document.getElementByIdx(“ulList”); / / the ul
2 var li = document.createElement(“li”); / / create the li
3 li.innerHTML = “HTML “; // Add text to li
4 ul.appendChild(li); // Add li to the end of ul child node
The appendChild() method also adds an existing element, moving it from its original location to the new location
1 var ul = document.getElementById(“ulList”); / / the ul
2 ul.appendChild(ul.firstChild); // Move the first ul element node to the end of the ul child node
The insertBefore() method, if you don’t want to insert a node at the end but want to place it at a specific location, takes two arguments, the first the node to insert and the second the reference node, which returns the element node to add
1 var ul = document.getElementById(“ulList”); / / the ul
2 var li = document.createElement(“li”); / / create the li
3 li.innerHTML= “HTML “; // Add text to li
4 ul.insertBefore(li,ul.firstChild); // add li to the first child of ul
1 var ul = document.getElementById(“ulList”); / / the ul
2 var li = document.createElement(“li”); / / create the li
3 li.innerHTML= “HTML “; // Add text to li
4 ul.insertBefore(li,ul.lastChild); // Add li before the last child of ul, including the text node
1 var ul = document.getElementById(“ulList”); / / the ul
2 var li = document.createElement(“li”); / / create the li
3 li.innerHTML= “HTML “; // Add text to li
4 var lis = ul.getelementsbytagName (“li”) // Obtain the set of all Li in ul
5 ul.insertBefore(li,lis[1]); // Add li before and after the second li node in ul
3. Remove the element node
The removeChild() method, used to remove a node, takes an argument, the node to be removed, and returns the removed node. Note that the removed node is still in the document, but its location is no longer in the document
1 var ul = document.getElementById(“ulList”); / / the ul
2 var fromFirstChild = ul.removeChild(ul.firstChild); // Remove the first child of ul
1 var ul = document.getElementById(“ulList”); / / the ul
2 var lis = ul.getelementsbytagName (“li”
3 ul.removeChild(lis[0]); // Remove the first li, different from the above, considering browser differences
4. Replace element nodes
The replaceChild() method, used to replace a node, takes two arguments, the first is the node to be inserted and the second is the node to be replaced, returning the node to be replaced
1 var ul = document.getElementById(“ulList”); / / the ul
2 var fromFirstChild = ul.replaceChild(ul.firstChild); // Replace the ul first child node
1 var ul = document.getElementById(“ulList”); / / the ul;
2 var li = document.createElement(“li”); / / create the li
3 li.innerHTML= “HTML “; // Add text to li
4 var lis = ul.getelementsbytagName (“li”) // Obtain the set of all Li in ul
5 var returnNode = ul.replaceChild(li,lis[1]); // Replace the second li with the created li
5. Copy the node
CloneNode () method, used to copy a node, takes a Boolean argument, true for deep copy (copy the node and all its children), false for shallow copy (copy the node itself, not the children)
1 var ul = document.getElementById(“ulList”); / / the ul
2 var deepList = ul.cloneNode(true); / / copy
3 var shallowList = ul.cloneNode(false); / / shallow copy