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.运行效果
