NonDocumentTypeChildNode.nextElementSibling

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

概述

nextElementSibling 返回当前元素在其父元素的子元素节点中的后一个元素节点，如果该元素已经是最后一个元素节点，则返回 null, 该属性是只读的。

语法

var nextNode = elementNodeReference.nextElementSibling;

例子

Here is div-01


Here is div-02

上面的例子会输出以下内容：

Siblings of div-01

   1. DIV
   2. SCRIPT
   3. P
   4. OL

Internet Explorer 8 支持补丁

该属性不支持 IE9 之前的版本，下面的代码片段可以增进对 IE8 的支持：

// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if(!("nextElementSibling" in document.documentElement)){
    Object.defineProperty(Element.prototype, "nextElementSibling", {
        get: function(){
            var e = this.nextSibling;
            while(e && 1 !== e.nodeType)
                e = e.nextSibling;
            return e;
        }
    });
}

Internet Explorer 9+ 和 Safari 支持补丁

// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('nextElementSibling')) {
      return;
    }
    Object.defineProperty(item, 'nextElementSibling', {
      configurable: true,
      enumerable: true,
      get: function () {
        var el = this;
        while (el = el.nextSibling) {
          if (el.nodeType === 1) {
              return el;
          }
        }
        return null;
      },
      set: undefined
    });
  });
})([Element.prototype, CharacterData.prototype]);

规范

Specification
DOM
# ref-for-dom-nondocumenttypechildnode-nextelementsibling②

浏览器兼容性

参见