ChildNodes () based on DOM ()

First, observe the following code:

<Div id = "myDiv"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <script type = "text/javascript"> var myDiv = document. getElementById ('mydiv '); var divs = myDiv. getElementsByTagName ('div '); divs [2]. style. display = 'none'; myDiv. childNodes [0]. style. display = 'none';/* display result in the browser: only the div with content "3" is hidden */</script>

The code in this section shows the use of the dom node attribute "childNodes" and the method "getElementsByTagName.

(1) somenode. childNodes and somenode. getElementsByTagName () both return a class array object-Nodelist.

This object has the length attribute. You can also use the "[]" syntax to obtain a specific item of the object.

(2) There are some precautions for the childNodes attribute.

First, unlike the getElementsByTagName ('x') method (returns the x Element Set), childNodes returns a set of subnodes (first-level subnodes, this also explains the final result of the above code execution. In fact, in the above script, you can use alert (divs. length) and alert (myDiv. childNodes. length) to verify respectively:

Alert (divs. length); the result is 3.

Alert (myDiv. childNodes. length); Result 7 (non-IE browser or ie9)/result 3 (ie6)

The Nodelist object referenced by divs has three sub-div: <div> 1 </div> <div> 2 </div> <div> 3 </div>, so the length is 7

Objects returned for the childNodes attribute are (in a non-IE browser or ie9) three sub-div elements (nodes) and four text nodes, with a total of seven nodes and a length of 7. As shown in:

For childNodes in ie6, the returned value is 3 sub-div, so the length is 3.

Return to the initial script, "myDiv. childNodes [0]. style. display = 'none' ", because myDiv. childNodes [0] is actually a TEXT_NODE and its nodeValue is an empty string (blank in html), so it does not have myDiv. the style attribute of childNodes [1/3/5] (ELEMENT_NODE) naturally fails to be executed.

 

Therefore, if you change the preceding html section to the following:

<div id="myDiv"><div >1</div><div >2</div><div >3</div></div>

Then the execution results of the script will be unified (ie and non-ie are both 3), because TEXT_NODE does not exist.

 

TEXT_NODE and ELEMENT_NODE are mentioned here. The node's nodeType attribute is used to indicate the node type.

Each node has the nodeType attribute. The dom has 12 node types and each has a numerical constant corresponding to it. As follows:

Node. ELEMENT_NODE (1 );
Node. ATTRIBUTE_NODE (2 );
Node. TEXT_NODE (3 );
Node. CDATA_SECTION_NODE (4 );
Node. ENTITY_REFERRENCE_NODE (5 );
Node. ENTITY_NODE (6 );
Node. PROCESSING_INSTRUCTION_NODE (7 );
Node. COMMENT_NODE (8 );
Node. DOCUMENT_NODE (9 );
Node. DOCUMENT_TYPE_NODE (10 );
Node. DOCUMENT_FRAGMENT_NODE (11 );
Node. NOTATION_NODE (12 );

Each node must belong to one of the above types. Based on this, we can determine the node type as follows:

If (someNode. nodeType = Node. ELEMENT_NODE ){

Alert ('this node is an element node ');

}

However, this method does not work in ie. Because IE does not expose the Node Type constructor, Node. **** cannot be accessed. Therefore, to ensure compatibility, it is necessary to use numerical constants for comparison. That is:

If (someNode. nodeType = 1 ){

Alert ('this node is an element node ');

}.

 

Refer:

Author of the second version of javascript advanced programming: Nicolas C. Zakas