Compilation of some information related to HTML node_javascript skills

1. HTML DOM is a tree object

2. Each node contains certain information about the node, namely:

1. nodeName
The nodeName attribute contains a certain The name of the node.

* The nodeName of the element node is the tag name
* The nodeName of the attribute node is the attribute name
* The nodeName of the text node is always #text
* The nodeName of the document node is always #document

　Note: The tag name of the XML element contained in nodeName is always uppercase

　 2. nodeValue

For text nodes, the nodeValue attribute contains text.

For attribute nodes, the nodeValue attribute contains the attribute value.

The nodeValue attribute is not available for document nodes and element nodes.

　 3. nodeType

nodeType attribute can return the type of node.

The most important node types are:

Element type SPAN>

Node type SPAN>

Element

1

Property

2

Text

3

Comments

8

Documentation

9

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

3. Modify node

1. [newfathernode].appendChild([childnode])

This operation will change the relationship between newfathernode and childnode to parent-child node , and will automatically cause the childnode’s oldfathernode to no longer own this childnode node.

　2. [newfathernode].removeChild([childnode])


4. Program example

Copy code The code is as follows:

<script> <br>function $id(id){ <br>return document.getElementById(id); <br>} <br><br>function CountNodes(arr) { <br>var len = arr.length; <br>var i = 0; <br>while(len--){ <br>(arr[len].nodeType==1) && i ; <br>} <br>return i; <br>} <br><br>window.onload = function(){ <br>alert(CountNodes($id("div2").childNodes)); <br>$id(" div2").appendChild($id("div3")); <br>alert(CountNodes($id("div1").childNodes)); <br>alert(CountNodes($id("div2").childNodes )); <br>} <br></script>