Dom manipulation of JavaScript (node operations)

Create node createelement () var node = document.createelement ("div"); Nothing to say, create an element node, but note that the node is not automatically added to the document. 2, create a text node createTextNode () var value = document.createTextNode ("text"); Create a text node, add content to the common elements node, and not automatically add to the document. Many people know innerHTML, do not know this method, this add is static text, if the content inserted without HTML format, with createTextNode than innerHTML security, and innertext have browser incompatibility problem, So it works well with createTextNode. 3, insert node to last AppendChild () Node.appendchild (value); Inserting the node into the end, the above two created nodes are not automatically added to the document, so the appendchild is inserted. If the new node is inserted into the last, and if it is already existing node is moved to the end, this is a lot of people do not notice, understand this, and then the following method, you can easily move the operation node. 4, insert the node to the front of the target node insertbefore () var node = document.createelement ("div"); var _p = document.createelement ("P"); var _span = document.createelement ("span"); Node.appendchild (_p); Node.insertbefore (_span, _p); The <span> node is inserted in front of the <p> node, where the second parameter is optional, and if the second parameter is not written, it is added by default to the end of the document, which is equivalent to AppendChild. Similarly, appendchild and insertbefore, if they exist, they will automatically delete the original node and move to the place you specified. Tips for moving nodes to the front: if (node.parentNode.firstChild) Node.parentNode.insertBefore (node, node.parentNode.firstChild); else Node.parentNode.appendChild (node); 5. Replication nodes CloneNode (Boolean) Node.clonenode (TRUE); Node.clonenode (FALSE); Copy the above div node, parameter True, copy the entire node and the contents of the inside, false, only copy the contents of the node, the new node after the copy, and will not be automatically inserted into the document, need to use 3 and 4 method to insert. 6. Deleting nodes RemoveChild () Node.removechild (_p); Remove the above <p> nodes from the <div>. In general, however, you do not know what the parent node of the node you want to delete is, so this is generally the case: node.parentNode.removeChild (node); 7. Replace node Repalcechild (NewNode, OldNode) Node.repalcechild (_p, _span); Replace the <span> node above with the <p> node, note that either <span> or &LT;P&GT, it must be a child node of <div> or a new node. 8. Set node properties SetAttribute () Node.setattribute ("title", "abc"); Not explained, it's easy to understand. Just to say, using this method to set the node properties is good, but the class attribute cannot be set. 9. Get Node Properties GetAttribute () Node.getattribute ("title"); Same as 8, gets the node properties. 10. Determine if the element has child nodes HasChildNodes Node.haschildnodes; Returns a Boolean type, so insert the new node to the front tip: var node = document.createelement ("div"); var newNode = document.createelement ("P"); if (node.haschildnodes) Node.insertbefore (NewNode, node.firstchild); else Node.appendchild (node); Finally, the properties of the DOM are: NodeName-the name of the node; NodeType-Returns an integer representing the type of the node, 1-element node, 2-Attribute node, 3-text node; NodeValue-Returns a string that is the value of the node; ChildNodes-Returns an array consisting of the child nodes of the element node; FirstChild-Returns the first child node; LastChild-Returns the last child node; NextSibling-Returns the next sibling node of the target node, or null if the target node does not have a node that belongs to a parent node; PreviousSibling-Returns the previous sibling node of the target node, or null if there are no nodes in front of the target node that belong to a parent node; ParentNode-The returned node is always an element node, because only the element node is likely to have child nodes, and the document node returns null;

JavaScript Operations Dom establishes an additional delete clone Access node Example:

1. getElementById (ID)

This is one of the most common examples of accessing an element through an ID:

<body>

<div id= "myID" >

Test

</div>

<script language= "JavaScript" >

Alert (document.getElementById ("myID"). InnerHTML);

</script>

</body>

Note: If the ID of the element is not unique, then the first element of that ID name will be taken

2. Getelementsbyname (name)

This is through the name to get a bunch of elements (as an array), see the element behind a small s to know that the ID is the HTML document requires unique, name can not be unique, such as checkbox, radio and other places will use more than Input uses the same name to identify whether it is an accomplice. Yes, Getelementsbyname (name) is only used to get input, radio, checkbox and other elements, such as <inputname= "MyRadio" type= "Radio"/>

3. getElementsByTagName (tagname) Look at this method to know that this is also to get a bunch of elements (as an array), is obtained by tagname is the tag name. You can iterate through this array to get each individual element. When a DOM structure is large, it can be used to effectively narrow the scope of the search.

<script>

function test ()

{

Testall=document.getelementsbytagname ("body");

Testbody=testall.item (0);

Get all tagname is the BODY element (of course there is only one per page)

Testall=testbody.getelementsbytagname ("P");

Get all P elements of the body child element

Testnode=testall.item (1);

Get the second P element

alert (Testnode.firstChild.nodeValue);

Show text for this element

}

</script>

<body>

<p>hi</p>

<p>hello</p>

<script language= "JavaScript" >

Test ();

</script>

</body>

4. AppendChild (node)

Appends a node to the current element, which should be called the object more appropriately.

<body>

<div id= "Test" ></div>

<script type= "Text/javascript" >

Varnewdiv=document.createelement ("div")

Varnewtext=document.createtextnode ("A newdiv")

Newdiv.appendchild (NewText)

document.getElementById ("Test"). AppendChild (Newdiv)

</script>

</body>

Just now I was in the first example in order to show the content, using the innerHTML, just saw the article just learned that innerHTML does not belong to the DOM.

5. RemoveChild (childreference)

Deletes the child node of the current node and returns the node that was deleted.
This deleted node can be inserted somewhere else.

<body>

<div id= "Parent" ><div id= "Child" >Achild</div></div>

<script language= "JavaScript" >

Varchildnode=document.getelementbyid ("Child")

Varremovednode=document.getelementbyid ("parent"). RemoveChild (Childnode)

</script>

</body>

6. CloneNode (Deepboolean)

Copies and returns the replication node of the current node, which is an orphaned node that replicates the properties of the original node and, if necessary, modifies the ID attribute to ensure the unique ID of the new node before it is added to the document.

This method supports a Boolean parameter that, when Deepboolean is set to true, copies all the child nodes of the current node, including the text within that node.

<body>

<p id= "Mynode" >test</p>

<script language= "JavaScript" >

P=document.getelementbyid ("Mynode")

Pclone =p.clonenode (TRUE);

P.parentnode.appendchild (Pclone);

</script>

</body>

7. ReplaceChild (NewChild, Oldchild)

Change one child node of the current node to another node

<body>

<div id= "Mynode2" >

<span id= "Orispan" >span</span>

</div>

<script language= "JavaScript" >

var Orinode=document.getelementbyid ("Orispan");

var newnode=document.createelement ("P");

var text=document.createtextnode ("Test PPP");

Newnode.appendchild (text);

document.getElementById ("Mynode2"). ReplaceChild (Newnode,orinode);

</script>

</body>

JavaScript Operations Dom establishes an additional delete clone Access node Example:

1. getElementById (ID) This is one of the most common examples of access to an element by ID: <body> <div id= "myID" > Test </div> <script language= "JavaScript" > Alert (document.getElementById ("myID"). InnerHTML); </script> </body> Note: If the ID of the element is not unique, then the first element of that ID name will be taken 2. Getelementsbyname (name) This is the use of name to get a bunch of elements (as an array), see the element behind a small s to know, ID is required in the HTML document, name can not be unique, such as CheckBox, Radio and other places will use multiple input with the same name to identify whether it is an accomplice. Yes, Getelementsbyname (name) is only used to get input, radio, checkbox and other elements, such as <input name= "MyRadio" type= "Radio"/> 3. getElementsByTagName (tagname) Look at this method to know that this is also to get a bunch of elements (as an array), is obtained by tagname is the tag name. You can iterate through this array to get each individual element. When a DOM structure is large, it can be used to effectively narrow the scope of the search. <script> function Test () { Testall=document.getelementsbytagname ("body"); Testbody=testall.item (0); Get all tagname is the BODY element (of course there is only one per page) Testall=testbody.getelementsbytagname ("P");//Get all P elements of the body child element Testnode=testall.item (1); Get the second P element alert (Testnode.firstChild.nodeValue); Displays the text of this element} </script> <body> <p>hi</p> <p>hello</p> <script language= "JavaScript" > Test (); </script> </body> 4. AppendChild (node) Appends a node to the current element, which should be called the object more appropriately. <body> <div id= "Test" ></div> <script type= "Text/javascript" > var newdiv=document.createelement ("div") var newtext=document.createtextnode ("A new Div") Newdiv.appendchild (NewText) document.getElementById ("Test"). AppendChild (Newdiv) </script> </body> Just now I was in the first example in order to show the content, using the innerHTML, just saw the article just learned that innerHTML does not belong to the DOM. 5. RemoveChild (childreference) Deletes the child node of the current node and returns the node that was deleted. This deleted node can be inserted somewhere else. <body> <div id= "Parent" ><div id= "Child" >a child</div></div> <script language= "JavaScript" > var Childnode=document.getelementbyid ("Child") var Removednode=document.getelementbyid ("parent"). RemoveChild (Childnode) </script> </body> 6. CloneNode (Deepboolean) Copies and returns the replication node of the current node, which is an orphaned node that replicates the properties of the original node and, if necessary, modifies the ID attribute to ensure the unique ID of the new node before it is added to the document. This method supports a Boolean parameter that, when Deepboolean is set to true, copies all the child nodes of the current node, including the text within that node. <body> <p id= "Mynode" >test</p> <script language= "JavaScript" > P=document.getelementbyid ("Mynode") Pclone = P.clonenode (true); P.parentnode.appendchild (Pclone); </script> </body> 7. ReplaceChild (NewChild, Oldchild) Change one child node of the current node to another node <body> <div id= "Mynode2" > <span id= "Orispan" >span</span> </div> <script language= "JavaScript" > var Orinode=document.getelementbyid ("Orispan"); var newnode=document.createelement ("P"); var text=document.createtextnode ("Test PPP"); Newnode.appendchild (text); document.getElementById ("Mynode2"). ReplaceChild (NewNode, Orinode); </script> </body>

Dom manipulation of JavaScript (node operations)