JS in the dom--node and the operation

Dom operation in JS can be said to be very common, a lot of web pages of the implementation of small functions, such as the deletion of some elements and other operations can be achieved with JS. So what do we need to know in the DOM to accomplish some of the functionality? Today this article is simple to take everyone into the JS Dom operation of the door bar!!

node of a DOM tree

1. DOM nodes are divided into three main categories: ELEMENT nodes (label nodes), attribute nodes, and text nodes.

Both the attribute node and the text node belong to the child nodes of the element node. So when you do this, you need to select the element node, and then modify the properties and text.

"View element Node"

1, using GetElement Series method:

The specific HTML code such as:

// to view element properties by ID var li = document.getElementById ("First");   // to view element properties by class name var lis1 = Document.getelementsbyclassname ("CLS"); // to view element properties by name var lis2 = document.getelementsbyname ("name"); // to view element properties by tag name var lis3 = document.getElementsByTagName ("Li");

Precautions:

①id cannot have duplicate names, if the ID is repeated, only the first one can be taken.

When ② gets an element node, it must wait until the DOM tree has finished loading before it can be obtained.

Two processing methods: A. js is written at the end of the document;

B. Write the code into the Window.onload function;

③ through the GetElements series to the array format, the operation must be taken to each of these elements, in order to operate, not directly to the array operation.

function (){}

④ This series of methods, you can also first select a DOM node, in the selected DOM node, select the desired node:

document.getElementById ("Div1"). getElementsByTagName ("Li");

"Through the Queryselector series method"

① passes in a selector name, returning the first found element. Typically used to find IDs:

var dq1 = Document.queryselector ("#id");

② passes in a selector name, returns all the found elements, and returns the array format, regardless of the number found. This method is more versatile and can be accurately found regardless of the attributes.

var dqs1 = Document.queryselectorall ("#div1 li");

"View \ Set Properties Node"

1. View attribute node:. getattribute ("attribute name");

2. Set the attribute node:. SetAttribute ("attribute name", "attribute value");

Note:. SetAttribute () There will be compatibility issues with the old version of IE, you can use the. Symbol instead.

"JS modify CSS in a variety of ways"

1. Use setattribute to set class and style.

document.getElementById ("First"). SetAttribute ("Class", "Class1");d Ocument.getelementbyid ("first"). SetAttribute ("Style", "color:red;");

2. Add a class selector using the. ClassName.

document.getElementById ("First"). ClassName = "Class1";

3. Use the. style. Style to modify a single style directly. Note the style name must use the Hump naming method.

document.getElementById ("First"). Style.fontsize = "18px";

4. Add a serial-level style using the. style or. Style.csstext:

// IE is incompatible with document.getElementById ("first"). style = "color:red;"  // All browsers are compatible with document.getElementById ("first"). Style.csstext = "color:red;";

"View/Set Text node"

1. InnerHTML: Takes or sets the HTML code in a node.

2. InnerText: Takes or sets the text in a node and cannot set the HTML code.

second, hierarchical node operation

1.. childNodes: Gets all the child nodes of the current node (including element nodes and text nodes).

. Children: Gets all the element child nodes of the current node (without text nodes).

2.. parentnode: Gets the parent node of the current node.

3.. firstchild: Gets the first child node, including a text node such as a carriage return;

. Firstelementchild: Gets the first element node. does not contain text nodes;

. LastChild: Gets the last child node, including a text node such as carriage return;

. Lastelementchild: Gets the last child node with no text nodes;

4.. previoussibling: Gets the previous sibling node of the current node, including the text node;

. previouselementsibling: Gets the previous element sibling node of the current node;

. nextSibling: Gets the next sibling node of the current node, including the text node;

. nextelementsibling: Gets the next element sibling node of the current node;

5.. attributes: Gets all the property nodes of the current node. Returns the array format.

"Create and add a node"

1. Document.createelement ("tag name"): Creates a new node and returns the new node that is created.

Need to cooperate. SetAttribute () sets the properties for the new node.

2. Parent node. insertbefore (new node, target node): In the parent node, the new node is inserted before the target node.

Parent node. appendchild (new node): Inside the parent node, finally, insert a new node.

3. SOURCE node. CloneNode (True): Clones a node.

Incoming true indicates that the clone source node and all child nodes of the source node;

False or no pass-through, which means that only the current node is cloned, not the child nodes.

"Delete, replace node"

1. Parent node. RemoveChild (Child node): Removes the specified child node from the parent node.

2. Parent node. ReplaceChild (new node, old node): From the parent node, replace the old node with the new node.

JS in the dom--node and the operation