Commonly used DOM tidying_javascript skills

Foreword:

html builds a DOM tree for the document. This tree is composed of a series of Node nodes. It 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 nodes are 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); //Document nodes are more commonly used
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);

Related functions:

1. Obtain node:

document.getElementById('element');
document.getElementsByTagName('element'); Returns an array-like object
document.getElementsByName('element'); Returns an array-like object
document.getElementsByClassName('className') Returns an array-like object, which is not supported by IE7 and below;
document.querySelectorAll('class' | 'element') Returns an array-like object

2. Traverse nodes

Find child nodes: element.childNodes Returns an array-like object
Find the 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.nextSibling

3. Obtain node information

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

4. Operation node

Create element node: document.createElement('element');
Create 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 the end of the parent node
parentNode.insertBefore(newNode,existingNode) //Insert in front of an existing node;
Clone node: Node.cloneNode([true]) //Passing true means deep copy
Replace node: parentNode.replaceChild(newNode,oldNode);

Related expansions:

1. Due to the incompatibility between IE and other browsers in processing DOM, some simple encapsulation processing is required.

 
//=================
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("下一个兄弟元素不存在！");
     }
}
 
//======================
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("上一个兄弟元素不存在！");
   }
}
 

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