The dorm of JavaScript

First, document.getElementById () Gets the element node according to the ID;

　

<div id= "Div1" >
<p id= "P1" >
I'm the first one to p</p>.
<p id= "P2" >
I'm a second p</p>.
</div>

Window.onload = function () {
var str = document.getElementById ("P1"). InnerHTML;
alert (str); Pop up I was the first P
}

Second, Document.getelementsbyname () Gets the element node according to name;

 <div id= "Div1" > <p id= "P1" > I'm the first p</p> <p id= "P2" > I'm the second one. p</p> <input type= "text" value= "Please enter value" name= "UserName"/> <input type= "button" value= "OK" oncl Ick= "fun1 ()" > </div> function fun1 () {var username = Document.getelementsbyname ("Us            Ername ") [0].value;    Alert (username); Output value entered in username} 
 Three, document.getElementsByTagName ()      Gets the element node according to the HTML tag name, note getelements*** The selector returns a NodeList object that can traverse the output by selecting 1 of them according to the index number. 

 <div id= "Div1" > <p id= "P1" > I am the first p</p> <p id= "P2" > I am the second P </p> </div> window.onload = function () {var str = document.getelementsbytagname ("P") [1].inn            erhtml;        alert (str); Output I am the second p, because I get the index of 1 p, index starting from 0} window.onload = function () {var arr = Document.getelementsby            TagName ("P");            for (var i = 0; i < arr.length; i++) {alert (arr[i].innerhtml);         }} window.onload = function () {var node = document.getElementById ("Div1");    var Node1 = document.getElementsByTagName ("P") [1];    Get alert (node1.innerhtml) from the acquired element; } 
 Four, document.getelementsbyclassname ()      Get ELEMENT nodes by class 

<div id= "Div1" > <p id= "P1" class= "Class1" > I am the first p</p> <p id= "P2" > I am the second p</p> </div> window.onload = function () {var node = Document.getelementsbyclassnam            E ("Class1") [0];        alert (node.innerhtml); }
V. Document STRUCTURE and traversal
(1) As the number of nodes of the document
1. ParentNode Gets the parent node of the node
2, ChildNodes Gets the node's child node array
3. FirstChild Gets the first child node of the node
4. LastChild Gets the last child node of the node
5. NextSibling gets the next sibling element of the node
6. Previourssibling gets the previous sibling element of the node
7, the type of the NodeType node, 9 for the document node, 1 for the element node, 3 for the text node, 8 for the comment node, and 11 for the DocumentFragment node
8. Text content of Nodevlue text node or comment node
9. The tag name of the NodeName element (such as P,span, #text (text node), DIV), denoted in uppercase

Note that the above 6 methods even element nodes are counted as one node.
(2) document as an element tree
1. Firstelementchild the first child element node
2. Lastelementchild the last child element node
3. Nextelementsibling Next sibling element node
4, previouselementsibling before a sibling element node
5, Childelementcount number of child element nodes
VI. Create, INSERT, delete a node
1. document.createTextNode () Create a text node

  <div id= "Div1" >            <p id= "P1" > I was the first p</p> <p            id= "P2" > I was the second p</p>        </div >    window.onload = function () {            var textnode = document.createTextNode ("<p> I am a new JavaScript node </p > ");            document.getElementById ("Div1"). AppendChild (Textnode);        }
2, Document.createelement () Create an element node

 <div id= "Div1" > <p id= "P1" > I am the first p</p> <p id= "P2" > I am the second p</p>            </div> window.onload = function () {var pnode = document.createelement ("P");            Pnode.textcontent = "Create a new P-node";        document.getElementById ("Div1"). AppendChild (Pnode); 
  3, insert node 
         appendchild ()     //inserts a node into the last face of the calling node 
         insertbefore ()     //accepts two parameters, the first is the node to be inserted, and the second indicates which node precedes it. If you do not pass in the second argument, it will be the same as appendchild, and last. 

 <div id= "Div1" > <p id= "P1" > I am the first p</p> </div> window.onload = function            () {var pNode1 = document.createelement ("P");            Pnode1.textcontent = "InsertBefore inserted node";            var pNode2 = document.createelement ("P");            Pnode2.textcontent = "AppendChild inserted node";            document.getElementById ("Div1"). AppendChild (PNode2);        document.getElementById ("Div1"). InsertBefore (Pnode1,document.getelementbyid ("P1")); } 
 Seven, delete and replace nodes. 
     1, removechild ();     is called by the parent element to delete a child node. Note that the immediate parent element is called, and deleting the immediate child element is effective, and deleting the grandson element has no effect. 
 

    <div id= "Div1" >            <p id= "P1" > I was the first p</p> <p            id= "P2" > I was the second p</p>        </div >    window.onload = function () {            var div1 = document.getElementById ("Div1");            Div1.removechild (document.getElementById ("P2"));        }
2, ReplaceChild ()//delete a child node, and replace it with a new node, the first parameter is the new node, the second node is the replaced node

<div id= "Div1" >            <p id= "P1" > I was the first p</p> <p            id= "P2" > I was the second p</p>        </div >    window.onload = function () {            var div1 = document.getElementById ("Div1");            var span1 = document.createelement ("span");            Span1.textcontent = "I am a new span";            Div1.replacechild (Span1,document.getelementbyid ("P2"));        }

The dorm of JavaScript