1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Untitled Document</title> 6 7 <script type="text/javascript"> 8 9 //获取指定的元素节点. 10 window.onload = function(){ 11 12 //1. 获取 id 为 bj 的那个节点. 13 //在编写 HTML 文档时, 需确保 id 属性值是唯一的. 14 //该方法为 document 对象的方法 15 var bjNode = document.getElementById("bj"); 16 alert(bjNode); 17 18 //2. 获取所有的 li 节点. 19 //使用标签名获取指定节点的集合. 20 //该方法为 Node 接口的方法, 即任何一个节点都有这个方法. 21 var liNodes = document.getElementsByTagName("li"); 22 alert(liNodes.length); 23 24 var cityNode = document.getElementById("city"); 25 var cityLiNodes = cityNode.getElementsByTagName("li"); 26 alert(cityLiNodes.length); 27 28 //3. 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合. 29 var genderNodes = document.getElementsByName("gender"); 30 alert(genderNodes.length); 31 32 //若 HTML 元素自身没有定义 name 属性, 则 getElementsByName() 33 //方法对于 IE 无效. 所以使用该方法时需谨慎. 34 var bjNode2 = document.getElementsByName("BeiJing"); 35 alert(bjNode2.length); 36 37 } 38 39 </script> 40 41 </head> 42 <body> 43 <p>你喜欢哪个城市?</p> 44 <ul id="city"> 45 <li id="bj" name="BeiJing">北京</li> 46 <li>上海</li> 47 <li>东京</li> 48 <li>首尔</li> 49 </ul> 50 51 <br><br> 52 <p>你喜欢哪款单机游戏?</p> 53 <ul id="game"> 54 <li id="rl">红警</li> 55 <li>实况</li> 56 <li>极品飞车</li> 57 <li>魔兽</li> 58 </ul> 59 60 <br><br> 61 gender: 62 <input type="radio" name="gender" value="male"/>Male 63 <input type="radio" name="gender" value="female"/>Female 64 </body> 65 </html>