JavaScript DOM node Operation method Summary _javascript Skill

There are three types of nodes: element node, attribute node and text node.

The main point of Dom is to check the additions and deletions around element nodes and attribute nodes . The following are described separately from the operation of the element node and the operation of the attribute node.

ELEMENT node

Check

Before you add a deletion to the DOM, you first need to find the corresponding element. The specific search method is as follows:

getElementById ()       //Get a single node
 getelementsbytagname ()    //Get array of Nodes nodelist
 getelementsbyname ()      //Get the node array nodelist

You can also take advantage of the attributes of an element node to obtain its parent-child node and text node:

Child nodes

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

Parent node

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

Sibling node

Node.previoussibling    //Returns the previous node, if not, returns null
node.nextsibling       //returns the latter node

Increase

The new node first creates the node and then inserts the newly created node into the DOM, so the methods for creating nodes and inserting nodes are described below, and the method of replicating nodes is also described in the creation node.

Creating nodes

CreateElement ()    //Creates a new element node according to the specified label name

Create code snippets (to avoid frequent refresh of the DOM, you can create snippets of code, complete all node operations, and then add them uniformly to the DOM)

Createdocumentfragment ()

Replication node

Clonednode = Node.clonenode (Boolean)//Only one argument, passing in a Boolean value, true to replicate all child nodes under that node; False to copy only the 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 the

HTML code * * * * *
node.insertadjacenthtml (' Beforebegin ', HTML) before inserting NewNode into TargetNode.  Insert code before the element
node.insertadjacenthtml (' Afterbegin ', HTML);  Inserts code
node.insertadjacenthtml (' beforeend ', HTML) before the first child element of the element;  Insert code after the last child element of the element
node.insertadjacenthtml (' afterend ', HTML);  Insert code after this element

Replacing nodes

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

By deleting

removing nodes

Parentnode.removechild (Childnode);  Remove the target node
node.parentNode.removeChild (nodes);    Use if the parent node is not known

Attribute node

Action attribute node, is to add a check to the DOM style. There are different ways to manipulate inline styles, inline styles, and external styles, and the styles obtained by various methods can be read-writable and read-only.

Get CSS Styles directly

Node.style.color     //readable to write

Properties and methods of the style itself

Node.style.cssText     //Gets the node inline style string
node.style.length      //Get the number of inline styles
node.style.item (0)     // Gets the style of the specified location

Get and modify an element style

HTML5 provides a new attribute for the element: Classlist to change the additions and deletions of the element style sheet. The operation is as follows:

Node.classList.add (value);     Adds the specified class
Node.classList.contains (value) to the element;  Determines whether the element contains the specified class, and returns True
Node.classList.remove (value) if present;  Deletes the specified class
node.classList.toggle (value);  There will be deleted, no add the specified class

Ways to modify DOM attributes

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

Read-only method

getComputedStyle is the method of window. It can get all the final CSS attribute values for the current element, but it is read-only. It has two parameters, the first is the incoming node, and the second can be passed in: hover, blur, etc. 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

Above this JavaScript DOM node operation method Summary is small series share to everybody's content, hope can give everybody a reference, also hope everybody support cloud habitat community.