JS获取元素节点的子节点

 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. 获取 #city 节点的所有子节点.

13                 var cityNode = document.getElementById("city");

14                 

15                 //2. 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.

16                 //但该方法不实用. 

17                 alert(cityNode.childNodes.length);

18                 

19                 //3. 获取 #city 节点的所有 li 子节点.

20                 var cityLiNodes = cityNode.getElementsByTagName("li");

21                 alert(cityLiNodes.length);

22                 

23                 //4. 获取指定节点的第一个子节点和最后一个子节点. 

24                 alert(cityNode.firstChild);

25                 alert(cityNode.lastChild);

26             }

27             

28         </script>

29         

30     </head>

31     <body>

32         <p>你喜欢哪个城市?</p>

33         <ul id="city"><li id="bj" name="BeiJing">北京</li>

34             <li>上海</li>

35             <li>东京</li>

36             <li>首尔</li>

37         </ul>

38         

39         <br><br>

40         <p>你喜欢哪款单机游戏?</p>

41         <ul id="game">

42             <li id="rl">红警</li>

43             <li>实况</li>

44             <li>极品飞车</li>

45             <li>魔兽</li>

46         </ul>

47         

48         <br><br>

49         name: <input type="text" name="username" 

50             id="name" value="atguigu"/>

51     </body>

52 </html>    

 

你可能感兴趣的:(js)