资讯专栏INFORMATION COLUMN

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

codeGoogle / 2863人阅读

摘要:对象提供了一系列的属性和方法用来利用元素树结构中元素的关系实现遍历其中的元素。关于元素之间的关系,可以参考元素树一节有关元素之间关系的内容。该属性获取一个包含指定元素的所有子元素的集合。值得注意的是如果当前元素无子节点,则属性返回。

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

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

获取子元素

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

属性名 描述
children 获取指定元素的所有子元素
firstElementChild 获取指定元素的第一个子元素
lastElementChild 获取指定元素的最后一个子元素

值得注意的是: 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 对象的属性实现:

属性名 描述
previousElementSibling 获取指定元素的前面相邻兄弟元素
nextElementSibling 获取指定元素的后面相邻兄弟元素
获取相邻前面兄弟元素

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 开源项目提供的。

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87329.html

相关文章

  • EASYDOM系列教程获取内联样式

    摘要:回顾什么是内联样式所谓内联样式,就是通过页面元素的属性为当前元素定义样式。对象提供的属性和方法可以帮助我们获取样式的具体内容。遍历对象由于对象具有属性,返回该对象的属性的数量。方法通过获取的样式属性名,这种方式也可以通过方式进行替换。 回顾什么是内联样式 所谓内联样式,就是通过 HTML 页面元素的 style 属性为当前元素定义 CSS 样式。 以下代码示例,就是通过 style 属...

    xiaodao 评论0 收藏0
  • EASYDOM系列教程定位页面元素

    摘要:对象提供了属性和方法实现定位页面元素功能,这也是的标准规范中对象的主要应用之一。是返回值,表示定位元素的集合,是一个集合。定位匹配选择器的第一个元素。方法定位页面元素所返回的集合就是静态集合。 Document 对象提供了属性和方法实现定位页面元素功能,这也是 DOM 的标准规范中 Document 对象的主要应用之一。 定位页面元素方法 目前 Document 对象提供实现定位页面元...

    NotFound 评论0 收藏0
  • EASYDOM系列教程定位页面元素

    摘要:对象提供了属性和方法实现定位页面元素功能。定位匹配选择器的第一个元素。是返回值,表示定位元素的集合,是一个集合。下面是使用方法的示例代码循环遍历所有元素上述代码通过方法定位页面中元素名为的元素,并遍历所有得到的元素,为其元素的属性添加样式。 Element 对象提供了属性和方法实现定位页面元素功能。该对象与 Document 对象提供的属性和方法实现定位页面元素功能的区别在于,Docu...

    MartinDai 评论0 收藏0
  • EASYDOM系列教程 Element 对象

    摘要:而标准规范中提供了对象,主要是依靠元素树结构访问和更新页面的内容。值得注意的是所有的页面的元素都是对象,而这个对象又是继承于对象的。我们可以简单地理解对象是对象的补充。本教程采用知识共享署名非商业性使用禁止演绎国际许可协议进行许可。 DOM 的标准规范中提供了 Element 对象,该对象提供了 HTML 页面中所有元素所具有的属性和方法。 我们都知道 DOM 标准规范中提供了 Nod...

    jeyhan 评论0 收藏0
  • EASYDOM系列教程遍历节点

    摘要:对象提供了一系列的属性和方法用来利用节点树结构中节点的关系实现遍历其中的节点。在上述语法结构中,属性返回指定节点的父元素节点。该属性获取一个包含指定节点的所有子节点的集合。值得注意的是及之前版本的浏览器中不存在空白节点问题。 Node 对象提供了一系列的属性和方法用来利用 DOM 节点树结构中节点的关系实现遍历其中的节点。 关于节点之间的关系,可以参考《DOM树结构》一节有关节点之间关...

    BigNerdCoding 评论0 收藏0

发表评论

0条评论

codeGoogle

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<