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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
---
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>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th style="line-height: 16px;">Feature</th>
<th style="line-height: 16px;">Chrome</th>
<th style="line-height: 16px;">Firefox (Gecko)</th>
<th style="line-height: 16px;">Internet Explorer</th>
<th style="line-height: 16px;">Opera</th>
<th style="line-height: 16px;">Safari</th>
</tr>
<tr>
<td>Basic support (on {{domxref("Element")}})</td>
<td>4</td>
<td>{{CompatGeckoDesktop("1.9.1")}}</td>
<td>9</td>
<td>9.8</td>
<td>4</td>
</tr>
<tr>
<td>Support on {{domxref("CharacterData")}}</td>
<td>29.0</td>
<td>{{CompatGeckoDesktop("25")}} [1]</td>
<td>{{CompatNo}}</td>
<td>16.0</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th style="line-height: 16px;">Feature</th>
<th style="line-height: 16px;">Android</th>
<th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
<th style="line-height: 16px;">IE Mobile</th>
<th style="line-height: 16px;">Opera Mobile</th>
<th style="line-height: 16px;">Safari Mobile</th>
</tr>
<tr>
<td>Basic support (on {{domxref("Element")}})</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("1.9.1")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>9.8</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>Support on {{domxref("CharacterData")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("25")}}</td>
<td>{{CompatNo}}</td>
<td>16.0</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h3 id="sect1"> </h3>
<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>
|
