【EASYDOM系列教程】之遍历元素

叁歲伎倆 2021-09-18 17:00 243阅读 0赞

Element 对象提供了一系列的属性和方法用来利用 DOM 元素树结构中元素的关系实现遍历其中的元素。

> **关于元素之间的关系**，可以参考《DOM 元素树》一节有关元素之间关系的内容。

## 获取子元素 ##

通过 HTML 页面中指定元素查找其子元素，我们可以通过以下 Element 对象的属性实现:

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>children</td> 
   <td>获取指定元素的所有子元素</td> 
  </tr> 
  <tr> 
   <td>firstElementChild</td> 
   <td>获取指定元素的第一个子元素</td> 
  </tr> 
  <tr> 
   <td>lastElementChild</td> 
   <td>获取指定元素的最后一个子元素</td> 
  </tr> 
 </tbody> 
</table>

> **值得注意的是:** HTML 页面中某个元素的子元素不一定是唯一的。

### 获取所有子元素 ###

Element 对象提供了 children 属性用于获取 HTML 页面中指定节点的所有子元素:

var elList = element.children;

在上述语法结构中，children 属性的返回值 elList 是一个 HTMLCollection 对象，并且为只读。该属性获取一个包含指定元素的所有子元素的集合。

以下代码示例，就是通过指定元素获取其所有子元素，再实现其他操作的:

var parentElem = document.getElementById('parent');
    var children = parentElem.children;
    console.log(children);

### 获取所有子元素的个数 ###

Element 对象提供了 childElementCount 属性用于获取指定元素的所有子元素的个数:

var count = element.childElementCount;

在上述语法结构中，childElementCount 属性返回的 count 表示指定元素的所有子元素的个数。

以下代码示例，就是通过指定元素获取其所有子元素的个数，再实现其他操作的:

var parentElem = document.getElementById('parent');
    var count = parentElem.childElementCount;
    console.log(count);

### 获取第一个子元素 ###

Element 对象提供了 firstElementChild 属性用于获取指定元素的第一个子元素:

var first_child = element.firstElementChild;

在上述语法结构中，firstElementChild 属性返回的 first\_child 表示当前元素的第一个子元素的引用。

> **值得注意的是:** 如果当前元素无子节点，则 firstElementChild 属性返回 null。

以下代码示例，就是通过指定元素获取其第一个子元素，再实现其他操作的:

var parentElem = document.getElementById('parent');
    var firstChild = parentElem.firstElementChild;
    console.log(firstChild);

### 获取最后一个元素 ###

Element 对象提供了 lastElementChild 属性用于获取指定元素的最后一个子元素:

var last_child = node.lastElementChild;

在上述语法结构中，lastElementChild 属性返回的 last\_child 表示当前元素的最后一个子元素的引用。

> **值得注意的是:** 如果当前节点无子元素，则 lastElementChild 属性返回 null。

以下代码示例，就是通过指定元素获取其最后一个子元素，再实现其他操作的:

var parentElem = document.getElementById('parent');
    var lastChild = parentElem.lastElementChild;
    console.log(lastChild);

## 获取相邻兄弟元素 ##

通过 HTML 页面中指定元素查找其相邻兄弟元素，我们可以通过以下 Element 对象的属性实现:

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>previousElementSibling</td> 
   <td>获取指定元素的前面相邻兄弟元素</td> 
  </tr> 
  <tr> 
   <td>nextElementSibling</td> 
   <td>获取指定元素的后面相邻兄弟元素</td> 
  </tr> 
 </tbody> 
</table>

### 获取相邻前面兄弟元素 ###

Element 对象提供了 previousElementSibling 属性用于获取指定元素的前面相邻兄弟元素:

previousElem = element.previousElementSibling;

在上述语法结构中，previousElementSibling 属性返回的 previousElem 表示当前元素的前一个兄弟元素。

> **值得注意的是:** 如果当前节点无前一个兄弟元素，则 previousElementSibling 属性返回 null。

以下代码示例，就是通过指定元素获取其前面相邻兄弟元素，再实现其他操作的:

var btn = document.getElementById('btn');
    var previousElem = btn.previousElementSibling;
    console.log(previousElem);

### 获取相邻后面兄弟元素 ###

Element 对象提供了 nextElementSibling 属性用于获取指定元素的后面相邻兄弟元素:

nextElem = element.nextElementSibling;

在上述语法结构中，nextElementSibling 属性返回的 nextElem 表示当前元素的后一个兄弟元素。

> **值得注意的是:** 如果当前节点无后一个兄弟元素，则 nextElementSibling 属性返回 null。

以下代码示例，就是通过指定元素获取其后面相邻兄弟元素，再实现其他操作的:

var btn = document.getElementById('btn');
    var nextElem = btn.nextElementSibling;
    console.log(nextElem);

## 浏览器兼容问题 ##

上述 Element 对象的遍历元素属性中，除 children 外，其他属性均不支持 IE 8 及之前版本的浏览器:

*  childElementCount
 *  firstElementChild
 *  lastElementChild
 *  previousElementSibling
 *  nextElementSbling

### 浏览器兼容问题解决方案 ###

我们可以通过自定义 JavaScript 文件方式，实现浏览器兼容问题。如以下代码示例:

/**
     * Adds support to IE8 for the following properties:
     *
     *     Element.childElementCount
     *     Element.firstElementChild
     *     Element.lastElementChild
     *     Element.nextElementSibling
     *     Element.previousElementSibling
     */
    (function(){
        "use strict";
        
        
        var patches = {
            
            firstElementChild: function(){
                for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
                    if(n = nodes[i], 1 === n.nodeType) return n;
                return null;
            },
            
            lastElementChild: function(){
                for(var nodes = this.children, n, i = nodes.length - 1; i >= 0; --i)
                    if(n = nodes[i], 1 === n.nodeType) return n;
                return null;
            },
            
            nextElementSibling: function(){
                var e = this.nextSibling;
                while(e && 1 !== e.nodeType)
                    e = e.nextSibling;
                return e;
            },
            
            previousElementSibling: function(){
                var e = this.previousSibling;
                while(e && 1 !== e.nodeType)
                    e = e.previousSibling;
                return e;
            },
            
            childElementCount: function(){
                for(var c = 0, nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
                    (n = nodes[i], 1 === n.nodeType) && ++c;
                return c;
            }
        };
        
        for(var i in patches)
            i in document.documentElement ||
            Object.defineProperty(Element.prototype, i, {get: patches[i]});
    }());

> **需要说明的是:** 上述浏览器兼容问题的解决方案是由 [Snippets 开源项目提供的][Snippets]。

--------------------

本教程免费开源，任何人都可以免费学习、分享，甚至可以进行修改。但需要注明作者及来源，并且不能用于商业。

本教程采用[知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议][-_-_ 4.0]进行许可。

[Snippets]: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
[-_-_ 4.0]: http://creativecommons.org/licenses/by-nc-nd/4.0/