js common native dom operation summary

1.1. Node

Node is an interface, called nodes Chinese, many types of DOM elements are inherited from it, all share the same basic properties and methods. Common Node has element, text, attribute, comment, documentetc. (so pay attention 节点and 元素distinction 元素belongs to 节点one).

Node has a property nodeTyperepresented by the Node type, which is an integer whose values represent the respective Node type.

1.2. NodeList

NodeList object is a collection of nodes, the general Node.childNodes, document.getElementsByNameand document.querySelectorAllreturned.

But it needs to be noted that Node.childNodes, document.getElementsByNamereturning NodeListresults in real time (this time with more similar HTMLCollection), and document.querySelectorAllthe result returned is fixed, which is rather special.

1.3. HTMLCollection

Is a special HTMLCollection a NodeList, it represents a number of elements comprising (a sequential order of the elements in the document flow) of the common set, which is updated in real time, when it contains the elements changes, it is automatically updated. In addition, it is a pseudo-array, imagine if they need to operate as an array like Array.prototype.slice.call(nodeList, 2)this call.

2.1. Node Find api

document.getElementById: Find The element ID, case-sensitive, if there are multiple results, only the first return;
document.getElementsByClassName: Find a class name elements, multiple class names separated by spaces, a return HTMLCollection. Note that compatibility IE9 + (inclusive). Further, not only the Document, other elements also supports getElementsByClassNamemethods;
document.getElementsByTagName: Find elements according to the label, *it represents a query for all labels, a return HTMLCollection.
document.getElementsByName: According to the name attribute of the element to find and return a NodeList.
document.querySelector: Return a single Node, IE8 + (inclusive), more than the results of matches, return only the first.
document.querySelectorAll: Returns a NodeList, IE8 + (inclusive).
document.forms: Get all of the current page form, a return HTMLCollection;

3. Create a node

3.1. createElement

Creating elements:

var elem = document.createElement("div");
elem.id = 'test';
elem.style = 'color: red'; elem.innerHTML = '我是新创建的节点'; document.body.appendChild(elem);

By createElementelements created it does not belong to documentthe object, it just created it, did not add to the html document, to be called appendChild, or insertBeforeother methods to add it to an HTML document.

3.2. createTextNode

Create a text node:

var node = document.createTextNode("我是文本节点");
document.body.appendChild(node);

3.3. cloneNode

Cloning a node:node.cloneNode(true/false) , bool it receives a parameter to indicate whether replicon elements.

var from = document.getElementById("test");
var clone = from.cloneNode(true); clone.id = "test2"; document.body.appendChild(clone);

Cloning node does not clone event, unless the event is to use <div onclick="test()"></div>this way of binding with addEventListenerand node.onclick=xxx;how binding are not copied.

3.4. createDocumentFragment

This method is used to create a DocumentFragment, which is the document fragments, which represents a lightweight document is primarily used for temporary storage nodes, use it can greatly enhance the performance of many operations DOM.

4. Modify node api

Node modify these API has the following characteristics:

Whether new or replacement node, if it is already on the page, the original location of the node will be removed;
After modifying the event itself bound node will not disappear;

4.1. appendChild

parent.appendChild(child);

It will be appended to the last child node of the parent of the child surface . In addition, if the node is added a page is present in the node, the node will be added to the implementation of this new position, its original location where the node will be removed, which means that there will be no two nodes at the same time on the page, and the event will be retained.

4.2. insertBefore

The inserting a node to another node previously , the syntax:

parentNode.insertBefore(newNode, refNode);

Regarding the second argument:

refNode pass is necessary, if the error does not pass the parameter;
If refNode is undefined or null, then the node will be added to the end insertBefore;

4.3. removeChild

removeChild used to delete the specified child node and returns the child node , syntax:

var deletedChild = parent.removeChild(node);

deletedChild points to delete a reference to a node, it still exists in memory, may be the next step. In addition, if the node is not removed its child nodes, then the error is reported. Delete nodes are usually so deleted:

function removeNode(node)
{
    if(!node) return; if(node.parentNode) node.parentNode.removeChild(node); }

4.4. replaceChild

replaceChild used to replace one node to another , the syntax:

parent.replaceChild(newChild, oldChild);

5.1. Parent API

parentNode: Each node has a parentNode attribute that represents the parent element. Element parent node may be Element, Document, or a DocumentFragment;
parentElement: Returns the parent element of the element node, and the difference parentNode that the parent node must be an element of Element, if not, null is returned;

5.2. API child relationship

children: Returns a real-time HTMLCollection, sub-nodes are Element, IE9 does not support the following browsers;
childNodes: Returns a real-time NodeList, it indicates the child node list of elements, pay attention to the child node can contain text nodes, comment nodes, etc.;
firstChild: Returns the first child node, there is no return null, there is a corresponding thereto firstElementChild;
lastChild: Returns the last child, there is no return null, there is a corresponding thereto lastElementChild;

5.3. Brothers relational API

previousSibling: Before a node, if there is no return null. Note that it is possible to get the node is a text node or a comment node does not match expected to be deal with it.
nextSibling: After a node is, null if there is no return. Note that it is possible to get the node is a text node, not as expected, to be deal with it.
previousElementSibling: Return to the previous element node, a node must be pre-Element, note the following browser does not support IE9.
nextElementSibling: After returning an element node, the node must be a Element, note the following browser does not support IE9.

6.1. setAttribute

To set the properties of elements:

element.setAttribute(name, value);

Where name is the attribute name, value is the characteristic value. If the element does not contain this feature that will be created and assigned.

6.2. getAttribute

getAttribute returns the corresponding characteristic value of the specified attribute name, and if not, null is returned:

var value = element.getAttribute("id");

7.1. Directly modify the style element

elem.style.color = 'red';
elem.style.setProperty('font-size', '16px');
elem.style.removeProperty('color');

7.2 dynamically add style rules

var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);