Home > Developer > Web Develop
<HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head> <title></title></Head><Body> <DivID= "box"> <Div></Div> <Div></Div> <Div></Div> </Div> <Scripttype= "Text/javascript"> varGetobjbyid= function(ID) {returndocument.getElementById (ID); } varBox=Getobjbyid ("Box"); var Child=Box.childnodes; //beginners may think the output here is 3, otherwise, the result may be 3 or 7document.write ("number of child nodes under box:" +Child.length+ "<br/>"); /*why it might be 7, as explained below: First, the childNodes of an element contains 3 types of nodes (element nodes; attribute nodes; text nodes) before the output is considered to be 3, is Because we focus only on the element nodes (that is, the 3 div inside), we ignore the existence of the attribute node and the text node. We can extract each node through the NodeType property, the NodeType value and the node relationship are as follows: NodeType = = = 1 element Node NodeType = = = 2 attribute node No Detype = = 3 Text node Implementation code is as follows:*/ vararrelements=[], Arrattributes=[], arrtexts= []; for (varI= 0; I<child.length; I++) { //element Node if(Child[i].nodetype=== 1) {Arrelements.push (child[i]); } //attribute Node if(Child[i].nodetype=== 2) {Arrattributes.push (child[i]); } //text Node if(Child[i].nodetype=== 3) {Arrtexts.push (child[i]); } //Remove whitespace character text node//if (child[i].nodetype = = = 3 &&/\s/.test (Child[i].nodevalue)) {//Arrtexts.push (Child[i]);// } } /*We store the individual nodes separately in the array, and now output the view results:*/document.write ("number of ELEMENT nodes:" +Arrelements.length+ "<br/>"); //3document.write ("Number of attribute nodes:" +Arrattributes.length+ "<br/>"); //0document.write ("Number of text nodes:" +Arrtexts.length+ "<br/>"); //4 or 0 /*there is a browser compatibility problem in firefox,chrome,ie9+ and other browsers, the number of text nodes is 4 and the number of text nodes in the Ie8-browser is 0 reasons: The firefox,chrome,ie9+ will also count the newline (whitespace) as a text node, and the ie8-line (whitespace) is a solution that does not count as a text node: Get text node, add a judgment condition, that is: if it is not a blank character is added, and vice versa does not add code as follows://Text node if (Child[i].nodetype = = = 3 &&/\ S/.test (Child[i].nodevalue)) {Arrtexts.push (child[i]); After adding/\s/.test (Child[i].nodevalue) to the above for loop code, you will find that all browser text nodes are 0. If you don't understand this condition, , you can look at the usage of the regular and test. Http://www.jb51.net/tools/zhengze.html*/ /* node in addition to the NodeType attribute, there are two common properties nodeName and NodeValue elements The nodeName of the node is the label name attribute node NodeName is the property name of the text node NodeName is always #text so determine if a node is a text node, except child [I].nodetype = = 3 can also be used child[i].nodename = = "#text" element node NodeValue is a null attribute node Nodeval The UE is the value of the property of the text node NodeValue is the content of the text node NodeValue although it is a read/write property, but cannot set the NodeValue value on the element node will be above the HTML The code is modified as follows: <div id= "box" > 111 <div></div> <DIV&G T;</div> <div></div> </div> added 111, this time, the number of text nodes is 1, and its Nodevalu E is 111 we can print it to view. document.write ("The value of the 1th text node is:" + arrtexts[0].nodevalue); If you don't add 111, running this line of code will cause an error. Because there is no add 111, the number of text nodes is 0 Arrtexts[0] does not exist. */ /*usually we are getting the element nodes, so there is a better way to code as follows:*/ varChild_div=Box.getelementsbytagname ("Div"); document.write ("number of div element nodes under box:" +child_div.length); </Script></Body></HTML>
All the explanations are written in the comments, there are errors or deficiencies in the place also hope that the great God guidance, thank you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
