The DOM operation Summary of JS

1. What is DOM, simply put, Dom is a set of methods for abstracting and conceptualizing the contents of a document. ------------------The art of JavaScript DOM programming

D:document, which is the document

O:object, which is the object

M:model, which is the model

The DOM represents a document as a tree, or, more specifically, a family tree, which is composed of various types of nodes.

DOM nodes can be divided into three types: element nodes, text nodes, attribute nodes.

So the DOM operation is mainly to these three kinds of nodes to operate, the type of operation is nothing more than to the node for the increase and deletion check.

Check:

The first is to get the node:

   getElementById ()             //Get a single node   getelementsbytagname ()       //Get a node array    getelementsbyname ()          
   Queryselector ()              //Get a single node, if you find more than one then return the first one, can be multiple parameters
   Queryselectorall ()           //Get node array, can be multiple parameters

It is important to note that their arguments, the latter two parameters are CSS selectors
To find a child node:

Node.childnodes   //Get child node list nodelist; Note that line wrapping is counted as the text node in the browser, and if you get a list of nodes in this way, you need to filter the Node.firstchild   // Returns the first child node Node.lastchild    //Returns the last sub-section

To find the parent node:

Node.parentnode      //Return parent node Node.ownerdocument   //Return ancestor node (entire document)

Find sibling nodes:

 node.previoussibling//returns to the previous node, if not, returns nullnode.nextsibling Returns the following node  
 
  add:  
 createelement ()//Create  An element node  
 createtextnode ()//Create text node  
 createdocumentfragment ()//Create virtual node  
 clon Enode=node.clonenode (Boolean)//Clone node, ture represents cloning the node and all its child nodes, false copy only this node  
  insert node:  

 /* insert Node*/parentnode.appendchild (childnode);   Appends the new node to the end of the list of child nodes Parentnode.insertbefore (NewNode, TargetNode);   Insert NewNode TargetNode before/* Inserts HTML code */node.insertadjacenthtml (' Beforebegin ', HTML);   Insert Code node.insertadjacenthtml (' Afterbegin ', HTML) before the element starts the tag;   Insert Code node.insertadjacenthtml After the start tag of the element (' BeforeEnd ', HTML);   Insert Code node.insertadjacenthtml (' Afterend ', HTML) before the end tag of the element. Insert code after the element ends tag  
 node.innerhtml= ' HTML '// Same effect as node.insertadjacenthtml (' Afterbegin ', html)  
  Docment.write ()//insert content in body  
 
  replace node 
     

Parentnode.replace (NewNode, targetnode);        Replace TargetNode with NewNode

By deleting:

Parentnode.removechild (Childnode);   Removing the target node node.parentNode.removeChild (nodes);       Without knowing the parent node, make

Attribute node operations:

Get CSS Styles directly
Node.style.color

Properties and methods of the style itself:
Node.stylr.cssText   //Gets the element CSS style string
Node.style.length    //Get the number of styles
Note that this way you can only get inline styles

getComputedStyle can be used to get the style that the final browser calculates

getComputedStyle is the method of window. It is able to get all the final CSS property values for the current element, but is read-only. It has two parameters, the first is the incoming node, the second can be passed in: hover,: Blur, and so on to get its pseudo-class style, if not, pass in null.

However, IE does not support the getComputedStyle method, you can use Currentstyle to maintain compatibility:

window.getComputedStyle? window.getComputedStyle (node, null): Node.currentstyle

Get and Modify styles:
HTML5 provides a new property: Classlist to implement additions and deletions of element styles.

Node.classList.add (value);         Adds the specified class Node.classList.contains (value) for the element;    Determines whether the element contains the specified class if there is a return truenode.classList.remove (value);   Deletes the specified class Node.classList.toggle (value);   If there is a delete, do not add the specified class

Ways to modify DOM-specific properties

Node.getattribute (' id ')        //Get Node.setattribute (' id ')        //Set Node.removeattribute ()         //Remove Node.attributes                //Get DOM all features

The DOM operation Summary of JS