Common DOM _ javascript skills

Js has a lot of cross-browser pitfalls in DOM operations. This article takes me nearly a week to organize, and I will sort out the big and small pitfalls Based on the instances ". Preface:

Html builds a DOM tree for the document, which consists of a series of Node nodes. He defined the structure of the document for us.

Node Type:

Node. ELEMENT_NODE (1); // element nodes are commonly used.
Node. ATTRIBUTE_NODE (2); // attribute nodes are commonly used.
Node. TEXT_NODE (3); // text nodes are 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); // document nodes are commonly used.
Node. DOCUMENT_TYPE_NODE (10 );
Node. DOCUMENT_FRAGMENT_NODE (11 );
Node. NOTATION_NODE (12 );

Related functions:

1. Get nodes:

Document. getElementById ('element ');
Document. getElementsByTagName ('element'); returns an array object of the class.
Document. getElementsByName ('element'); returns an array object of the class.
Document. getElementsByClassName ('classname') returns the class array object, which is not supported by IE7 or below;
Document. querySelectorAll ('class' | 'element') returns an array object of the class.

2. Traverse nodes

Find the child node: element. childNodes returned class array object
Find the first subnode: element. firstChild
Find the last subnode: element. lastChild
Find the parent element: element. parentNode
Find the previous sibling element: element. previussibling
Find the last sibling element: element. nextSibling

3. Get node Information

Obtain the label name of an element or attribute node: elementNode. nodeName
Obtain the content of a text node: textNode. nodeValue;
Get and set the content of the element node (HTML tags may be included): elementNode. innerHTML
Obtain and set 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 );
Obtain the node type: node. nodeType;
Element Node: 1;
Attribute node: 2;
Text node: 3;
Document node: 9;
Comment node: 8;

4. Operation nodes

Create an element node: document. createElement ('element ');
Create a text node: document. createTextNode ('text ');
Create an attribute node: document. createAttribute ('attribute ');
Delete a node: node. remove ();
Delete a subnode: parentNode. removeChild (childNode );
Insert node: parentNode. appendChild (childNode); // insert to the end of the parent node
ParentNode. insertBefore (newNode, existingNode) // insert it to the front of an existing node;
Clone node: node. cloneNode ([true]) // pass in "true" to "Deep copy"
Replacement node: parentNode. replaceChild (newNode, oldNode );

Related extensions:

1. Since earlier IE browsers are incompatible with other browsers in DOM processing, some simple encapsulation is required.

// ======================== Function getElementChildren (element) {var children = [], oldChildNodes = element. childNodes; for (var I = 0, len = oldChildNodes. length; I
 
  

  
2. Operate the DOM element style
 

  

  
//=========================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 is all the content of this article. I hope you will like it.