標籤：
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擷取元素節點的子節點
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
