在 JavaScript 中,使用元素节点的相关属性可以获取元素的子节点、第一个子节点、最后一个子节点。
使用元素的 childNodes 和 children 属性可以获取元素的子节点,其中 childNodes 获取的是元素的所有子节点,其中除了元素子节点外,还可能包含文本节点及注释节点;而 children 属性获取的则全部是元素子节点。
【例 1】获取元素子节点。
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>获取元素子节点</title>
- <style>
- li{
- width:20px;
- height:30px;
- background:red;
- margin:5px;
- transition:width 2s;//过渡属性,实现从一种样式逐渐改变到另一种样式
- }
- </style>
- </head>
- <body>
- <ul id='ul1'>
- <li>11</li>
- <li>22</li>
- <li>33</li>
- </ul>
- <script>
- var oUl = document.getElementById('ul1');
- var aLi = oUl.childNodes;//获取ul元素的所有子节点
- document.onclick = function(){
- for(var i = 0; i < aLi.length; i++){
- if(aLi[i].nodeType == 1){//判断节点是否为元素节点
- aLi[i].style.width = '150px';
- }
- }
- };
- </script>
- </body>
- </html>
上述代码的功能是实现单击文档窗口时,li 元素的长度在 2s 内实现从 20px 逐渐改变为 150px。例 3 中的 transition 是一个 CSS3 属性,实现从一种样式逐渐过渡到另一种样式,该属性需要同时指定在哪个属性上进行样式过渡以及整个过渡时长。样式代码中设置了 li 元素的初始长度,li 元素的最终长度通过 JS 的单击事件来设置。
上述 JS 代码中使用了 childNodes 属性来获取 ul 元素的所有子节点,并使用了 aLi[i].nodeType==1 来判断遍历到的子节点是否为元素节点。那么可否省略这个元素节点的判断呢?答案是不能省略。因为使用 childNodes 属性获取的子节点可能包括空格、换行等内容组成的文本节点。
在例 3 中的 HTML 代码中,可以看到 ul 元素下的各个 <li> 是换行显示的,所以 ul 元素内容中包括了换行,同时也包括了一些空格。此时使用 alert(aLi.length),将会看到结果为 7,即 ul 下包含了 7 个子节点,其中 3 个 li 元素节点,其他的就是由换行和空格组成的文本节点。
如果不想进行子节点类型的判断,则需要使用 children 属性来获取 ul 元素的子节点,JS 代码作如下修改:
- <script>
- var oUl = document.getElementById('ul1');
- var aLi = oUl.children;//获取ul元素的所有元素子节点
- document.onclick = function(){
- for(var i = 0; i < aLi.length; i++){
- aLi[i].style.width = '150px';
- }
- };
- </script>
例 1 在 Chrome 浏览器中的运行结果如图 1 和图 2 所示。
使用元素的 firstChild 和 lastChild 属性可以分别获取元素的第一个和最后一个子节点,使用元素的 firstElementChild 和 lastElementChild 属性可以分别获取元素的第一个和最后一个元素子节点。
【例 2】获取元素子节点。
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>获取元素第一个和最后一个元素子节点</title>
- </head>
- <body>
- <ul id='ul1'>
- <li>11</li>
- <li>22</li>
- <li>33</li>
- </ul>
- <script>
- var oUl = document.getElementById('ul1');
- var li1 = oUl.firstElementChild;//获取ul元素的第一个元素子节点
- var li2 = oUl.lastElementChild;//获取ul元素的最后一个元素子节点
- console.log(li1);
- console.log(li2);
- </script>
- </body>
- </html>
上述代码在 Chrome 浏览器中的运行结果如图 3 所示。