Home > Developer > JavaScript
I. Basic points of knowledge
1, Dom is the Document Object model, is an API for HTML and XML documents (application interface)
2, Dom depicts a hierarchical number of nodes, allowing developers to add, remove changes and other operations
3, all the DOM objects in IE browser are implemented in the form of COM objects, so there are many incompatible things.
Second, Node.element_node constants
1, after I measured, because this constant in the IE9 below is not supported, so generally in the detection of elements will be used NodeType attribute, and NodeType property according to the type of element, with 12 constant value to represent, such as the element node NodeType value is 1, The NodeType value of the text node is 3, the NodeType value of the attribute node is 2, and so on.
For example:
1<! DOCTYPE html>234<meta charset= "Utf-8" >5<title></title>6<script type= "Text/javascript" >7Window.onload=function(){8 varOdiv=document.getelementbyid ("box");9 varalis=Odiv.childnodes;Ten for(vari=0;i<alis.length;i++){ One if(alis[i].nodetype!=3){ AConsole.log (Alis.nodename); - } the } - - } -</script> + -<body> +<div id= "box" > A<ul> at<li></li> -</ul> -</div> -</body> -UL is an element node, so the output value is 1.
There are a few things to note in the above code:
1) First we pass getElementById (), get the element, and then get the child node under that element by Nodechilds, because the NodeType value of the element node is 1, So we can find and output the nodename of the node we are looking for through the If judgment and for loop;
In addition, it should be emphasized that when we look for child nodes through Nodechilds, the line breaks are parsed into a text node, and the text node is not the node we are looking for, so we can filter the IF condition.
1<! DOCTYPE html>234<meta charset= "Utf-8" >5<title></title>6<script type= "Text/javascript" >7Window.onload=function(){8 varOul=document.getelementbyid ("box");9 varlist=Oul.childnodes;TenConsole.log (list[0]); OneConsole.log (List.item (0)); A } -</script> - the<body> -<ul id= "box" > -<li></li> -<li></li> +</ul> -</body> +2, the above code, we find all the sub-nodes under UL through Nodechilds, we can go to find them by list[0] square brackets, but also can use the item () method to access
In addition, it should be stressed that when we use Nodechilds query results, is not actually an example of an array, although it is not very serious, we would like to convert the array, as follows:
1<! DOCTYPE html>234<meta charset= "Utf-8" >5<title></title>6<script type= "Text/javascript" >7Window.onload=function(){8 varOul=document.getelementbyid ("box");9 varlist=Oul.childnodes;Ten //Console.log (list[0].nodename); One //Console.log (List.item (0). nodeName); A varArrofnodes=array.prototype.slice.call (list,0); - Console.log (arrofnodes); - } the</script> - -<body> -<ul id= "box" > +<li></li> -<li></li> +</ul> A</body> atArray.prototype.slice.call (list,0), this method can be more than IE8, and other browsers, can be normal operation IE8 The following error occurs, in IE8 and the following need to enumerate to the array, the improved code is as follows:
1<! DOCTYPE html>234<meta charset= "Utf-8" >5<title></title>6<script type= "Text/javascript" >7Window.onload=function(){8 varOul=document.getelementbyid ("box");9 varlist=Oul.childnodes;Ten //Console.log (list[0].nodename); One //Console.log (List.item (0). nodeName); A //var arrofnodes=array.prototype.slice.call (list,0); - //Console.log (arrofnodes); - functionConvertarray (nodes) { the varArr=NULL; - Try{ -Arr=array.prototype.slice.call (nodes,0);//This is for browsers that are not IE8 and below -}Catch(ex) { +Arr=NewArray ();//For browsers with IE8 and below, enumerate and convert to arrays - for(vari=0,len=nodes.length;i<len;i++){ + Arr.push (Nodes[i]); A } at } - returnarr; - } - - vararrofnodes=Convertarray (list); - Console.log (arrofnodes); in } -</script> to +<body> -<ul id= "box" > the<li></li> *<li></li> $</ul>Panax Notoginseng</body> -In the actual testing process, I found that in IE8 and below, the text node of the newline is not calculated in the returned data, which is slightly different from other browsers.
1<! DOCTYPE html>234<meta charset= "Utf-8" >5<title></title>6<script type= "Text/javascript" >7Window.onload=function(){8 functionConverttoarray (nodes) {9 varArr=NULL;Ten Try{ OneArr=array.prototype.slice.call (nodes,0);//This is for browsers that are not IE8 and below A}Catch(ex) { -Arr=NewArray ();//For browsers with IE8 and below, enumerate and convert to arrays - for(vari=0,len=nodes.length;i<len;i++){ the Arr.push (Nodes[i]); - } - } - returnarr; + } - varOul=document.getelementbyid ("Ul1"); +Console.log (Oul.parentnode);//ParentNode is body . A //alert (oul.parentnode); atlist=Oul.childnodes; - //alert (list); - vararrofnodes=Converttoarray (list); -Alert (arrofnodes[0].previoussibling); -Alert (arrofnodes[0].nextsibling); -Alert (arrofnodes[4].previoussibling); inAlert (arrofnodes[4].nextsibling); - } to</script> + -<body> the<ul id= "UL1" > *<li>1</li> $<li>2</li>Panax Notoginseng</ul> -</body> theIn this section, the following section combs the contents of the node operation
Introduction to the DOM in JavaScript (i)
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
