files/zh-cn/web/api/node/nextsibling/index.html


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

---
title: Node.nextSibling
slug: Web/API/Node/nextSibling
translation_of: Web/API/Node/nextSibling
---
<div>{{APIRef}}</div>

<p><code><strong>Node.nextSibling</strong></code> 是一个只读属性，返回其父节点的 {{domxref("Node.childNodes","childNodes")}} 列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回 <code>null</code>。</p>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling
</pre>

<h2 id="Notes" name="Notes">备注</h2>

<p> </p>

<p>Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如 <a href="/zh-CN/docs/Web/API/Node/firstChild" title="Node.firstChild 只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。"><code>Node.firstChild</code></a> 和 <a href="/zh-CN/docs/Web/API/Node/previousSibling" title="返回当前节点的前一个兄弟节点,没有则返回null."><code>Node.previousSibling</code></a> 之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点.</p>

<p>详情请参见 <a class="new" href="/zh-CN/docs/Whitespace_in_the_DOM" rel="nofollow">DOM 中的空白符</a> 和<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: 为什么一些文本节点是空的</a>.</p>

<p> </p>

<h2 id="Example" name="Example">示例</h2>

<pre class="brush:html">&lt;div id="div-01"&gt;Here is div-01&lt;/div&gt;
&lt;div id="div-02"&gt;Here is div-02&lt;/div&gt;

&lt;script type="text/javascript"&gt;
var el = document.getElementById('div-01').nextSibling,
    i = 1;

console.log('Siblings of div-01:');

while (el) {
  console.log(i + '. ' + el.nodeName);
  el = el.nextSibling;
  i++;
}

&lt;/script&gt;

/**************************************************
  The following is written to the console as it loads:

     Siblings of div-01

      1. #text
      2. DIV
      3. #text
      4. SCRIPT

**************************************************/
</pre>

<p>从上面的例子中可以看出，在两个标签之间（即一个元素的闭合标签之后，下一个元素的起始标签之前）有空白出现时，会有<code>#text</code> 节点被插入到 DOM 中。使用 <code>document.write</code> 语句插入的两个元素之间不会有空白。</p>

<p>The possible inclusion of text nodes in the DOM must be allowed for when traversing the DOM using <code>nextSibling</code>. See the resources in the Notes section.</p>

<h2 id="Specification" name="Specification">规范</h2>

<ul>
 <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li>
 <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li>
</ul>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>{{domxref("Element.nextElementSibling")}}</li>
</ul>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.Node.nextSibling")}}</p>