Introduction to 12 JavaScript DOM methods

This article introduces twelve methods about JavaScript DOM operations for your reference:

　1 createElement(element)

　 Create a new element node with a specified tag name, and the return value is a reference pointer to the newly created element node.

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

　document.body.appendChild(para);

　2 createTextNode()

　 Create a new text node containing the given text and return a pointer Reference pointer of the new text node:

　 reference = document.createTextNode()

　 The parameter is the text string contained in the new text node

　eg)

　 var message = document.createTextNode("hello world");

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

container.appendChild(message);

document.body.appendChild(container);

3 cloneNode()

reference = node.cloneNode(deep)

Create a copy of the given node, the parameter is true or false, true means copying the child nodes of the node at the same time, false means not copying any child nodes.

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

　var message = document.createTextNode("hello world");

　para.appendChild(message);

　document.body.appendChild(para);

　var newpara = para.cloneNode(true);

　document.body.appendChild(newpara);

　4 appendChild()

　reference = node.appendChild(newChild);

　Insert node, refer to the previous example.

　　5 insertBefore()

　 Reference = element.insertBefore(newNode,targetNode)

　 Insert a given node in front of a given child node of a given element node, and return a reference pointer to the new child node.

　eg)

　var container = document.getElementById("content");

　var message = document.getElementById("fineprint");

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

　container. insertBefore(para,message);

　6 removeChild()

　 Reference = element.removeChild(node)

　 will remove a child node from a given element and return a reference pointer to the deleted child node.

　 When a node is deleted by removeChild(), all child nodes of this node will be deleted.

　7 replaceChild()

　 Reference = element.replaceChild(newChild,oldChild)

　 Replace a child node in a given parent element with another node. The oldChild node must be a child node of the element element. Return value Is a reference pointer pointing to the

　child node that has been replaced.

　eg)

　var container = document.getElementById("content");

　var message = document.getElementById("fineprint");

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

　container. replaceChild(para,message);

　8 setAttribute()

　element.setAttribute(attributeName,attributeValue);

　Add a new attribute value to a given element node or change its existing attribute

　9 getAttribute

　AttributeValue = element.getAttribute(attributeName)

　 Returns the value of a given attribute node for a given element.

　　10 getElementById()

　　element = document.getElementById(ID)

　Find an element with a given id attribute value and return an element node

　11 getElementByTagName()

　 Used to find an element with a given tag name All elements:

　elements = document.getElementsByTagName(tagName)

　Returns a collection of nodes.

　　12 hasChildNodes

　　 Used to check whether a given element has child nodes

　 booleanValue = element.hasChildNodes

　 Return true or false.

The above is the introduction of 12 javascript DOM methods. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!