JavaScript的DOM编程--04--获取元素节点的子节点

时间：2023-03-08 16:06:19

获取元素节点的子节点(**只有元素节点才有子节点!!)

1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点
的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
2). firstChild 属性获取第一个子节点
3). lastChild 属性获取最后一个子节点

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>Untitled Document</title>

         <script type="text/javascript">

             //获取元素节点的子节点

             window.onload = function(){

                 //1. 获取 #city 节点的所有子节点.

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

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

                 //但该方法不实用.

                 alert(cityNode.childNodes.length);

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

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

                 alert(cityLiNodes.length);

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

                 alert(cityNode.firstChild);

                 alert(cityNode.lastChild);

             }

         </script>

     </head>

     <body>

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

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

             <li>上海</li>

             <li>东京</li>

             <li>首尔</li>

         </ul>

         <br><br>

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

         <ul id="game">

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

             <li>实况</li>

             <li>*飞车</li>

             <li>魔兽</li>

         </ul>

         <br><br>

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

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

     </body>

 </html>

相关文章