One, the HTML dom is a tree-shaped object
Two, each node contains some information about the nodes, respectively:
1. nodename
The NodeName property contains the name of a node.
* The nodename of the element node is the label name
* The nodename of the attribute node is the property name
* The nodename of the text node is always #text
* The nodename of the document node is always #document
Note: The label name of the XML element contained in NodeName is always uppercase
2. NodeValue
For text nodes, the NodeValue property contains text.
For an attribute node, the NodeValue property contains the property value.
The NodeValue property is not available for document nodes and ELEMENT nodes.
3. NodeType
The NodeType property can return the type of the node.
The most important node types are:
| element Type |
Node Type |
| Elements |
1 |
| Property |
2 |
| Text |
3 |
| Comments |
8 |
| Document |
9
|
Third, modify the node
1. [Newfathernode].appendchild ([Childnode])
This action changes the relationship between Newfathernode and Childnode as a parent-child node and automatically causes Childnode Oldfathernode not to own this Childnode node.
2. [Newfathernode].removechild ([Childnode])
Iv. Program Examples
Copy Code code as follows:
<body>
<div id= "Div1" >
<div id= " Div3 ">
</div>
</div>
<div id=" Div2 ">
</div>
<script>
function $id (ID) {
return document.getElementById (ID);
}
Function Countnodes (arr) {
var len = arr.length;
var i = 0;
while (len--) {
(arr[len].nodetype==1) && i++;
}
Return i;
}
Window.onload = function () {
Alert (countnodes ($id ("Div2"). childnodes));
$id ("Div2"). AppendChild ($id ("Div3"));
Alert (Countnodes ($id ("Div1"). childnodes));
Alert (Countnodes ($id ("Div2"). childnodes));
}
</script>
</body>
