2025年3月30日 星期日 甲辰(龙)年 月廿九 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JS获取子节点(子元素)

时间:03-07来源:作者:点击数:32

在 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 所示。

li元素的最初效果
图 1:li 元素的最初效果
单击文档窗口后的li元素效果
图 2:单击文档窗口后的 li 元素效果

获取元素第一个子节点和最后一个子节点

使用元素的 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 所示。

ul元素的第一个和最后一个元素子节点
图 3:ul 元素的第一个和最后一个元素子节点
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门