html dom node operation (get/modify/add or delete)_javascript skills

HTML DOM is a standard for how to get, modify, add, or remove HTML elements. In the HTML DOM, everything is a node. DOM is HTML viewed as a tree of nodes.

According to W3C's HTML DOM standard, all content in an HTML document is a node:

The entire document is a document node
Each HTML element is an element node
HTML element The text inside is a text node
Each HTML attribute is an attribute node
Annotation is a comment node

HTML DOM treats HTML documents as a tree structure. This structure is called a node tree:
HTML DOM Tree instance

http://www.w3school.com.cn/i/ct_htmltree.gif

Through HTML DOM, tree All nodes in are accessible via JavaScript. All HTML elements (nodes) can be modified, and nodes can be created or deleted.

All HTML elements are defined as objects, and the programming interfaces are object methods and object properties.

One: Get element node method:

1.var node = document.getElementById("nodeId");

2.var nodelist = document.getElementsByClassName("nodeclassname ");

3.var nodelist = document.getElementsByTagName("nodetagname");

2: Operations we can perform on the element node after obtaining it: 1. Operations on itself . 2. Operations on child nodes. 3. Operations on sibling nodes. 4. Operations on parent nodes

2.1. Delete itself: node.parentNode.removeChild(node);

2.2. Determine whether there are child nodes: var boolean = node.hasChildNodes();

Get the child node list: var childList = node.childNodes;

Get the node element type: var nodetype = node.nodeType; var nodename = node.nodeName;

Delete child node. node.removeChild(childNode);

Insert a child node at the end of the child node: node.appendChild(childNode);

Insert a child node at the end of the child node: node.insertBefore(childNode );

Replace node B with node A: node.replaceChild(A,B);

2.3.node.nextSibling gets the next adjacent sibling node

node .previousSibling Gets the adjacent previous sibling node

2.4 . Gets the parent node node.parentNode