HTML DOM Node Operation (Get/Modify/Add or Delete)

HTML DOM is a standard for how to obtain, modify, add or delete HTML elements. In HTML DOM, everything is a node. DOM is HTML, which is regarded as a node tree.

According to the HTML DOM standard of W3C, all the contents in the HTML document are nodes:

The entire document is a document node

Each HTML element is element node

The text in the html element is the text node

Each HTML attribute is the attribute node

Note is the annotation node

HTML DOM regards HTML documents as tree structure. This structure is called node tree:

HTML DOM TREE instance

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

Through HTML DOM, all nodes in the tree can be accessed through JavaScript. All HTML elements (nodes) can be modified or created or deleted nodes.

All HTML elements are defined as objects, while programming interfaces are object methods and object attributes.

One: Obtaining element node method:

1.var node = document.GetelementByid ("nodeid");

2.var nodelist = document.GetelementsByClassName ("nodeClassName");

3.var nodelist = document.GetelementsBytagname ("Nodetagname");

Two: After getting the element node, we can do the operation of him: 1. Operations for ourselves. 2. Operation for sub -nodes. 3. Operation for brother nodes. 4. Operation for parent nodes

2.1. Delete yourself: node.parentnode.removechild (node);

2.2. Determine whether there are sub -nodes: var boolean = node.haschildNodes ();

List of sub -node: var childlist = node.childNodes;

Get the node element type: var nodeType = node.NodeType; var nodeName = node.NodeName;

Delete the child node. node.removechild (childnode);

Insert a sub -node at the tail of the child node: node.appendchild (childnode);

Do not insert a sub -node at the sub -node: node.insertbeface (childnode);

Use A node to replace B nodes: node.replacechild (a, b);

2.3.Node.nextSIBling

Node.PreviousIbling Get the adjacent brothers node

2.4. Get the parent node node.parentnode