獲取元素節點
阿新 • • 發佈：2017-07-13
func 三種方式 集合 har fun 沒有 ie瀏覽器 北京 utf-8
1.大綱
關於獲取元素節點，主要有三種方式。
getElementById（）
getElementsByTagName（）
getElementsByName（）
2.第一種方式程序
在編寫 HTML 文檔時, 需確保 id 屬性值是唯一的.
該方法為 document 對象的方法。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 //first:getElemetById方式 9 var bjNode=document.getElementById("bj"); 10 alert(bjNode); 11 } 12 </script> 13 </head> 14 <body> 15 <p>你喜歡哪個城市?</p> 16 <ul id="city">17 <li id="bj" name="BeiJing">北京</li> 18 <li>上海</li> 19 <li>東京</li> 20 <li>首爾</li> 21 </ul> 22 <br> 23 24 <p>你喜歡的遊戲？</p> 25 <ul id="game"> 26<li id="rl" name="hongjing">紅警</li> 27 <li>實卡</li> 28 <li>飛車</li> 29 <li>地下城</li> 30 </ul> 31 </body> 32 </html>
3.運行結果
4.第二種方式程序
使用標簽名獲取指定節點的集合.
該方法為 Node 接口的方法, 即任何一個節點都有這個方法。
主要是和上面的方式進行對比
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 //second:getElemetsByTagName方式 9 //結果：8個節點 10 var liNodes=document.getElementsByTagName("li"); 11 alert("li num: "+liNodes.length); 12 13 //細節對比 14 //結果：4個節點 15 var cityNode=document.getElementById("city"); 16 var linode=cityNode.getElementsByTagName("li"); 17 alert("li num: "+linode.length) 18 } 19 </script> 20 </head> 21 <body> 22 <p>你喜歡哪個城市?</p> 23 <ul id="city"> 24 <li id="bj" name="BeiJing">北京</li> 25 <li>上海</li> 26 <li>東京</li> 27 <li>首爾</li> 28 </ul> 29 <br> 30 31 <p>你喜歡的遊戲？</p> 32 <ul id="game"> 33 <li id="rl" name="hongjing">紅警</li> 34 <li>實卡</li> 35 <li>飛車</li> 36 <li>地下城</li> 37 </ul> 38 </body> 39 </html>
5.運行結果
6.第三種方式程序
這麽方式是根據name屬性的名字來獲取元素節點，但是有的元素節點沒有name屬性，所以不普遍使用。
同時，這種方式在IE瀏覽器下面不適合。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 //three:getElementsByName方式 9 var genNode=document.getElementsByName("gender"); 10 alert("length: "+genNode.length) 11 } 12 </script> 13 </head> 14 <body> 15 性別： 16 <input type="radio" name="gender" value="male">男</input> 17 <input type="radio" name="gender" value="female">女</input> 18 </body> 19 </html>
7.運行效果
獲取元素節點