First, document.getElementById () Gets the element node by ID
<div id= "Div1" > <p id= "P1" > I am the first Apple </p> <p id= "P2" > I am the second Apple </p> </div> function () { var str = document.getElementById ("P1"). InnerHTML; alert (str); // pop up I'm the first Apple }
Second, Document.getelementsbyname () Gets the element node according to the name
<div id= "Div1" > <p id= "P1" > I am the first Apple </p> <p id= "P2" > I am the second Apple </p> <input type= "text" value= "Please enter value" name= "UserName"/> <input type= "button" value= "OK" Onclick= "fun1 ()" > </div> function fun1 () { var username = Document.getelementsbyname ("UserName") [0].value; Alert (username); // output value entered in username }
document.getElementsByTagName () Gets the element node according to the HTML tag name, note that the getelements*** selector returns a NodeList object, which can traverse the output by selecting 1 of them according to the index number.
<div id= "Div1" > <p id= "P1" >I am the first Apple</p> <p id= "P2" >I am a second Apple</p> </div>window.onload=function () { varstr = document.getelementsbytagname ("P") [1].innerhtml; alert (str); //Output I am the second p, because I get the P with index 1, the index starts from 0} window.onload=function () { vararr = document.getElementsByTagName ("P"); for(vari = 0; i < arr.length; i++) {alert (arr[i].innerhtml); }} window.onload=function () { varnode = document.getElementById ("Div1"); varNode1 = document.getElementsByTagName ("P") [1];//retrieve from the acquired elementalert (node1.innerhtml); }
Iv. Document.getelementsbyclassname () Gets the element node based on class
<div id= "Div1" > <p id= "P1" class= "Class1" > I am the first P</p> <p id= "P2" > I'm the second p</p> </div> function () { var node = document.getelementsbyclassname ("class1") [0]; alert (node.innerhtml); }
Dom manipulation of JavaScript