查询子节点 firstChild lastChild

示例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>查询子节点</title>
 5         <meta charset="UTF-8">
 6         <!--自适应宽度-->
 7         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8         <style>
 9             .mycolor{
10                 color:#000;
11                 background-color: #ddd;
12             }
13             .steam{
14                 color: red;
15             }
16         </style>
17     </head>
18     <body>
19         <ul id="ul"
20             ><li id="ali">油条</li
21             ><li id="bli">包子</li
22             ><li id="cli"><a id="yufen">米饺</a></li
23             ><li id="dli">鱼粉</li
24         ></ul>
25         <script>
26             // 查找子节点
27             /**按ul获取元素*
28               *再获取ul元素里的第一个(firstChild)li---油条*
29               *再获取ul元素里的最后一个(lastChild)li---鱼粉**/
30             var tempel = document.getElementById("ul");  
31             
32             var firstNode = tempel.firstChild;   
33             firstNode.className = "mycolor";
34             
35             var lastNode = tempel.lastChild;
36             lastNode.className = "mycolor";
37         </script>
38     </body>
39 </html>

 注意，<ul></ul>这段代码，要写成这样才正常查询到。

posted @ 2019-07-10 19:58  JackSon~鹤  阅读(236)  评论(0)  编辑  收藏  举报