1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
---
title: NonDocumentTypeChildNode.nextElementSibling
slug: Web/API/Element/nextElementSibling
translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling
original_slug: Web/API/NonDocumentTypeChildNode/nextElementSibling
---
<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>{{ ApiRef() }}</p>
<h2 id="Summary" name="Summary">概述</h2>
<p><strong><span style="font-family: Verdana,Tahoma,sans-serif;">nextElementSibling</span></strong> 返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回<code>null,</code>该属性是只读的.</p>
<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2>
<pre class="eval">var <em>nextNode</em> = elementNodeReference.nextElementSibling;
</pre>
<h2 id="Example" name="Example">例子</h2>
<pre><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>
</pre>
<p>上面的例子会输出以下内容:</p>
<pre>Siblings of div-01
1. DIV
2. SCRIPT
3. P
4. OL</pre>
<h3 id="Specification" name="Specification" style="line-height: 30px; font-size: 2.14285714285714rem;"> </h3>
<h2 id="Internet_Explorer_8_支持补丁">Internet Explorer 8 支持补丁</h2>
<p>该属性不支持IE9之前的版本, 下面的代码片段可以增进对IE8的支持:</p>
<pre><code>// 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;
}
});
}</code>
</pre>
<h2 id="Internet_Explorer_9_和_Safari支持补丁">Internet Explorer 9+ 和 Safari支持补丁</h2>
<pre><code>// 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]);</code></pre>
<h2 id="Specification" name="Specification" style="line-height: 30px; font-size: 2.14286rem;">浏览器兼容性</h2>
{{Compat("api.Element.nextElementSibling")}}
<h2 id="相关链接">相关链接</h2>
<ul>
<li><code><a href="/zh-cn/DOM/Node.nextSibling" title="zh-cn/DOM/Element.nextSibling">nextSibling</a></code></li>
<li><a class="internal" href="/zh-cn/DOM/Element.childElementCount" title="zh-cn/DOM/Element.childElementCount"><code>childElementCount</code></a></li>
<li><a class="internal" href="/zh-cn/DOM/Element.children" title="zh-cn/DOM/Element.children"><code>children</code></a></li>
<li><a class="internal" href="/zh-cn/DOM/Element.firstElementChild" title="zh-cn/DOM/Element.firstElementChild"><code>firstElementChild</code></a></li>
<li><a class="internal" href="/zh-cn/DOM/Element.lastElementChild" title="zh-cn/DOM/Element.lastElementChild"><code>lastElementChild</code></a></li>
<li><a class="internal" href="/zh-cn/DOM/Element.previousElementSibling" title="zh-cn/DOM/Element.previousElementSibling"><code>previousElementSibling</code></a></li>
</ul>
<p>{{ languages( {"en": "en/DOM/element.nextElementSibling" } ) }}</p>
|
