JS to the DOM node operation collation

Get node:

//Get by IDdocument.getElementById (' element '); //Get by node name, return class array Objectdocument.getElementsByTagName (' element '); //gets by name, returns a class array objectDocument.getelementsbyname (' element '); //by classname, the return class array object, IE7 and below is not supported;Document.getelementsbyclassname (' ClassName ')    //HTML5 provides a new interface, similar to the JQ selector, can use cascading relationships, multi-Select, return value for the first elementDocument.queryselector ('. Element ')//according to classDocument.queryselector (' #element ')//by IDDocument.queryselector (' #element. Div ')//cascading RelationshipsDocument.queryselector ('. Div,.div2 ')//Multi-SelectDocument.queryselector ("Div.test > P:first-child");//Child selectorDocument.queryselector ("Div.test + P");//Brother SelectorDocument.queryselector ("div[type=qq]")//Property selector; //using the same method as above, is also a new interface provided by HTML5, this return class array objectDocument.queryselectorall ('. Element ')

Get child nodes:

// element child node collection, this has compatibility problem, under IE9, will ignore the text node, such as line break, space, text, and IE9 above, including modern browser will get text node, can be nodetype to determine which type of node, only when nodetype== 1 o'clock is the element node, 2 is the attribute node, and 3 is the text node.   element.childnodes   // the element child node collection, this does not return the text node, obtains the element node directly, is also the most commonly used, the compatibility is also good, only under the IE9, will contain the comment node, as long as  the div inside does not write the annotation also has no big question Element.children  

Gets the first child node:

// Gets the first child node of the element, which also has a compatibility problem, the text node will be ignored below IE9, IE9 and other modern browsers  will not Element.firstchild   // The same gets the first child node of the element, but is not supported under IE9, and the text node is ignored in modern browsers.   Element.firstelementchild     // we can get the first child node in the following notation to be compatible with all browsers.   var firstchild = Ele.firstelementchild | | ele.firstchild  alert (firstchild)  

Get the last child node:

// gets the last child node of the element, same as FirstChild, this also has compatibility issues, IE9 below the text node is ignored, IE9 and other modern browsers will not   Element.lastchild   // The same gets the first child node of the element, but is not supported under IE9, and the text node is ignored in modern browsers.   Element.lastelementchild     // we can get the last child node in the following notation to be compatible with all browsers.   var lastchild = Ele.lastelementchild | | ele.lastchild  alert (lastchild)  

Get parent element:

// gets the parent element  of the element Element.parentnode    // gets the parent element of the element, which is said to support IE only, but tested it seems that Firefox and Chrome also support, in most cases, or use  parentnode to replace parentelement Element.parentelement   

Gets the previous sibling element:

// gets the previous sibling element, which is the same problem as the first child node above, the text node is ignored below IE9, IE9 and other modern browsers will not   element.previoussibling   // also gets the previous sibling element, but is not supported under IE9, and the text node is ignored in modern browsers.     element.previouselementsibling      // we can use the following syntax to get the previous sibling element to be compatible with all browsers.     var prevele = ele.previouselementsibling | | ele.previoussibling    alert (prevele)  

Get the next sibling element:

// get the next sibling element, which is the same problem as the first child node above, IE9 the text nodes below, IE9 and other modern browsers will not   element.nextsibling   // The same gets the next sibling element, but is not supported under IE9, and the text node is ignored in modern browsers.     element.nextelementsibling      // we can use the following syntax to get the next sibling element to be compatible with all browsers.     var nextele = ele.nextelementsibling | | ele.nextsibling    alert (nextele)  

Get sibling elements:

var siblings = Array.prototype.slice.call (el.parentNode.children);    for (var i = siblings.length; I –;) {      if (siblings[i] = = = El          ) {1);            Break ;      };  };   function (Child) {      if(child!== el);  

Gets the label name of the element or attribute node:

Element.nodename

Get the contents of an element (including HTML tags):

Element.innerhtml  

Gets the plain text content of the element (without HTML tags):

Element.innertext   //Firefox does not know  this //Firefox with  this

To set the attribute node for an element:

Gets the attribute node of the element:

Element.getattribute (Name);    

To delete an element's attribute node:

Element.removeattribute (Name);    

To create an element:

Document.createelement (' element ');  // To create an element         node: document.createTextNode (' text ');   // To Create a text         node: // To Create an attribute    node:

Delete node (must be deleted from parent level):

Parentnode.removechild (ele);

To insert a node:

// insert to the end of the  parent node Parentnode.appendchild (ele);     // inserted in front of the existing node;    Parentnode.insertbefore (Newnode,ele)   

Clone node:

Node.clonenode (true)     // Pass in true for deep  copy

Replace node:

Parentnode.replacechild (Newnode,oldnode);  

Loop node:

[].foreach.call (Ele,function(el,i) {      //xxx  });    for (var i = 0;i < Ele.length;i + +)      {//ele[i  ]}  

The following is a new approach provided by HTML5:

Ele.classlist  // element class object   ele.classList.add (' xxx ')   // Add Class  ele.classList.remove (' xxx ')   // Delete class  ele.classList.toggle (' xxx ')   // Toggle Class   Ele.classList.contains (' xxx ')   // contains class  

The following is the use of native JS to implement the addition of class to delete and judge:

//Add Classfunctionaddclass (_object,_clsname) {var_clsname = _clsname.replace (".", "" "); if(!hasclass (_object,_clsname)) {_object.classname= _object.classname+ ("" +_clsname);  }; }  //determine if there is an existing classfunctionHasclass (_object,_clsname) {var_clsname = _clsname.replace (".", "" "); var_scls = "" + (_object.classname) + ""; return(_scls.indexof ("+_clsname+" ")! =-1)?true:false; }  //Delete ClassfunctionDelclass (_object,_clsname) {var_clsname = _clsname.replace (".", "" "); if(Hasclass (_object,_clsname)) {_object.classname= _object.classname.replace (NewRegExp ("?: ^| \\s) "+_clsname+" (? =\\s|$) "," G ")," ");  }; } 

JS to the DOM node operation collation