Common Dom Grooming

Common Dom collation   preface: HTML Constructs a DOM tree for document, which is made up of a series of node nodes. He defines the structure of the document for us. Node Type: Node.element_node (1);      //ELEMENT nodes are more commonly used node.attribute_node (2);    //attribute node is more commonly used node.text_node (3);          //text nodes are more commonly used node.cdata_section_node (4); Node.entity_reference_node (5); Node.entity_node (6); Node.processing_instruction_node (7); Node.comment_node (8); Node.document_node (9);  //Documentation nodes more commonly used Node.document_type_node (10); Node.document_fragment_node (11); Node.notation_node (; ) correlation function: 1, get node:  document.getelementbyid (' element ');  document.getElementsByTagName (' element ');         Return class Array Object  document.getelementsbyname (' element ');             Return class Array Object  document.getelementsbyclassname (' ClassName ')       Return class Array object, IE7 and below are not supported;  document.queryselectorall (' Class ' | ' element ')     return class Array object 2, traverse node   find child node: element.childnodes         Return class Array object   Find first child node: Element.firstchild  Find the last child node:element.lastchild  find the parent element:element.parentnode  find the previous sibling element: element.previoussibling  Find the next sibling element: Element.nextsibling3, get node info   Get the element or attribute node's label name:elementnode.nodename  get the contents of the text node:     textnode.nodevalue;  gets and sets the content of the element node (may contain HTML tags):  elementNode.innerHTML  Gets and sets the plain text content of the element node: Element.innertext (IE) | Element.textcontent (FF)    get the value of the attribute node:      attrnode.getattribute (attrname);  Set the value of the attribute node:      attrnode.setattribute (attrname,attrvalue);  gets the type of node:         node.nodetype;  element node: 1;  attribute node: 2;  text node: 3;  document node: 9;  comment node: 8;4, Action node   create element node:       document.createelement (' element ');  Creating a text node:       document.createTextNode (' text ');  Create attribute node:       document.createattribute (' attribute ');  Delete node:               Node.remove ();  Delete child nodes:           Parentnode.remoVechild (Childnode);  
  Insert node:               Parentnode.appendchild (Childnode);  //Insert to parent node                              p Arentnode.insertbefore (Newnode,existingnode)  //inserted in front of the existing node;  clone node:               Node.clonenode ([true])    //pass in true for deep copy   replacement node:             &NBS P Parentnode.replacechild (Newnode,oldnode);  related development: 1, because the IE low-version browser and other browsers in the processing of the DOM is incompatible, so to do some simple encapsulation processing.  //=================function Getelementchildren (Element) {     var children = [],     oldchildnodes = element.childnodes;     for (var i=0, len=oldchildnodes.length; i<len; i+=1) {& nbsp         if (Oldchildnodes[i].nodetype = = 1) {               chi Ldren.push (Oldchildnodes[i]);         }    &NBSP;}&NBsp;return Children;}  //==================function Getelementnext (Element) {     var next = element.nextsibling | | null;          if (next) {              if (Next.nodetype = = 1) {&nbsp ;                  return next;              } else {                   return Arguments.callee (next);             }         } else {          throw new Error ("The next sibling element does not exist!") ");         }} //======================function Getelementprev (Element) {    & Nbsp;var prev = element.previoussibling | | null;     if (prev) {          if (Prev.nodetype = = 1) {              return prev;         } else {              return Arguments.callee (prev);          }     } else {          throw new Error ("the previous sibling element does not exist!") ");     }} 2, manipulate the style of the DOM element  //=========================function Getelementstyle (element, StyleName) {     if (typeof getcomputedstyle! = ' undefined ') {          return GetC Omputedstyle (element,null) [stylename];     } else {          return element.currentstyle[stylename];     }} //==========================function AddClass (element , ClassName) {     element.classname + = ClassName;}  //==========================function removeclass (element,removeclassname) {     var classStr = element.classname;     element.classname = Classstr.replace (Removeclassname, "). Split (/\s+/). Join (' '). Replace (/^\s+/, '). Replace (/\s+$/, '‘);}

Common Dom Grooming