Common Dom finishing _javascript skills

Objective:

HTML builds a DOM tree for document, which is composed of a series of node nodes. He defined the structure of the document for us.

Node Type:

Node.element_node (1); ELEMENT nodes are more commonly used
Node.attribute_node (2); Attribute nodes are more commonly used
Node.text_node (3); Text nodes are more common
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); Document nodes are more common
Node.document_type_node (10);
Node.document_fragment_node (11);
Node.notation_node (12);

Related functions:

1, obtain the node:

document.getElementById (' element ');
document.getElementsByTagName (' element '); Returns the class Array object
Document.getelementsbyname (' element '); Returns the class Array object
Document.getelementsbyclassname (' ClassName ') returns the array object of the class, IE7 and below are not supported;
Document.queryselectorall (' class ' | ' element ') returns a class array object

2, traverse the node

Lookup child node: Element.childnodes return Class Array Object
Find first child node: Element.firstchild
Find the last child node: element.lastchild
Find parent element: Element.parentnode
Find the previous sibling element: Element.previoussibling
Find the latter sibling element: element.nextsibling

3, get the node information

Gets the label name of an element or attribute node: elementnode.nodename
Gets the contents of the text node: textnode.nodevalue;
Gets and sets the contents of the element node (which may contain HTML tags): elementnode.innerhtml
Gets and sets the plain text content of the element node: Element.innertext (IE) | Element.textcontent (FF)
Gets the value of the attribute node: Attrnode.getattribute (Attrname);
Sets the value of the property node: Attrnode.setattribute (Attrname,attrvalue);
Gets the type of the node: Node.nodetype;
ELEMENT node: 1;
Attribute node: 2;
Text nodes: 3;
Document node: 9;
Note node: 8;

4. Operation Node

Create element node: document.createelement (' element ');
Create 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 the end of a parent node
Parentnode.insertbefore (Newnode,existingnode)//inserted in front of existing nodes;
Clone node: Node.clonenode ([true])//pass in true for depth replication
Replacement node: Parentnode.replacechild (Newnode,oldnode);

Related development:

1, because IE low version of the browser and other browsers in the processing DOM is incompatible, so do some simple encapsulation processing.

 
=================
function Getelementchildren (element) {
   var children = [],
   oldchildnodes = Element.childnodes;
   For (Var i=0, len=oldchildnodes.length i<len; i+=1) {
     if (Oldchildnodes[i].nodetype = 1) {
        Children.push ( Oldchildnodes[i]);
     }
 return children;
}
 
==================
function Getelementnext (element) {
   var next = element.nextsibling | | null;
     if (next) {
       if (Next.nodetype = 1) {return
          next;
       } else {return
          Arguments.callee (next)
       }
     else {
     throw new Error ("the next sibling element does not exist!") ");
     }
}
 
======================
function Getelementprev (element) {
   var prev = element.previoussibling | | null;
   if (prev) {
     if (Prev.nodetype = = 1) {return
       prev;
     } else {return
       Arguments.callee (prev);
     }
   else {
     throw new Error ("Previous sibling element does not exist!") ");
   }
}
 

2, manipulate the style of DOM elements

=========================
function Getelementstyle (element,stylename) {
   if (typeof getComputedStyle!= ' Undefined ') {return
     getComputedStyle (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+$/ ,'');
}

The above mentioned is the entire content of this article, I hope you can enjoy.