files/ru/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
77
78
79
80
81
82
83

---
title: Node.nextSibling
slug: Web/API/Node/nextSibling
tags:
  - API
  - DOM
  - Gecko
  - Node
  - Property
  - Свойство
  - Узел
  - Узлы
translation_of: Web/API/Node/nextSibling
---
<div>
<div>{{APIRef("DOM")}}</div>
</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>

<div><p>Браузеры, основанные на Gecko, вставляют текстовые узлы в документ для представления пробелов в разметке.
    Поэтому узел, полученный, например, при использовании <a href="/ru/docs/Web/API/Node/firstChild" title="Свойство Node.firstChild только для чтения, возвращающее первый потомок узла в древе или null, если узел является бездетным. Если узел это документ, он возвращает первый узел в списке своих прямых детей."><code>Node.firstChild</code></a> или <a href="/ru/docs/Web/API/Node/previousSibling" title="Свойство Node.previousSibling используется только для чтения, оно возвращает узел предшедствующий указанному в родительском элементе childNodes, или null,  если указанный узел первый в своём родителе."><code>Node.previousSibling</code></a> может относиться к
    пробелу, а не к тому элементу, который автор хотел получить.</p>

    <p>Смотрите <a class="new" href="/ru/docs/Web/Guide/DOM/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></div>

<h2 id="Example" name="Example">Пример</h2>

<pre class="brush:html">&lt;div id="div-01"&gt;Вот div-01&lt;/div&gt;
&lt;div id="div-02"&gt;Вот div-02&lt;/div&gt;

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

console.log('Потомки div-01:');

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

&lt;/script&gt;

/**************************************************
  Следующий пример напишет в консоль:

     Потомки div-01:

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

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

<p>В приведенном выше примере вы можете видеть, что <code>#text</code> узлы вставляются в DOM, где между тегами встречаются пробелы (т.е. после закрывающего тега элемента и до открывающего тега рядом). Не создается пробелов между элементами, вставленных с помощью <code>document.write</code></p>

<p>Возможность включения текстовых узлов в DOM должна быть разрешена, когда DOM обходится с помощью <code>nextSibling</code>. Смотрите раздел "Заметки".</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>