获取指定的元素节点

 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>    

 

你可能感兴趣的:(获取)