NonDocumentTypeChildNode.nextElementSibling - Web API 接口参考 编辑

概述

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

语法

var nextNode = elementNodeReference.nextElementSibling;

例子

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

<script type="text/javascript">
  var el = document.getElementById('div-01').nextElementSibling;
  document.write('<p>Siblings of div-01</p><ol>');
  while (el) {
    document.write('<li>' + el.nodeName + '</li>');
    el = el.nextElementSibling;
  }
  document.write('</ol>');
</script>

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

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]);

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support (on Element)	4	3.5 (1.9.1)	9	9.8	4
Support on CharacterData	29.0	25 (25) [1]	未实现	16.0	未实现

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support (on Element)	(Yes)	1.0 (1.9.1)	(Yes)	9.8	(Yes)
Support on CharacterData	(Yes)	25.0 (25)	未实现	16.0	未实现

 

相关链接

• nextSibling
• childElementCount
• children
• firstElementChild
• lastElementChild
• previousElementSibling