From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/node/nextsibling/index.html | 87 ++++++++++++++++++++++++++++ 1 file changed, 87 insertions(+) create mode 100644 files/ja/web/api/node/nextsibling/index.html (limited to 'files/ja/web/api/node/nextsibling') diff --git a/files/ja/web/api/node/nextsibling/index.html b/files/ja/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..1ff4c13cef --- /dev/null +++ b/files/ja/web/api/node/nextsibling/index.html @@ -0,0 +1,87 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +tags: + - DOM + - Gecko + - Node + - 要更新 +translation_of: Web/API/Node/nextSibling +--- +
+
+
{{APIRef("DOM")}}
+
+ +

Node.nextSibling という読み取り専用プロパティは指定したノードの親の{{domxref("Node.childNodes","子ノード")}}リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は null を返します。

+
+ +

構文

+ +
nextNode = node.nextSibling
+
+ +

注記

+ +
+

Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば Node.firstChild や Node.previousSibling で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。

+

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

+ +
 
+ +
{{domxref("Element.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').nextSibling,
+    i = 1;
+
+console.log('Siblings of div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+</script>
+
+/**************************************************
+  The following is written to the console as it loads:
+
+     Siblings of div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+ +

上の例で、#text ノードがタグ間のマークアップ内に (つまり、 要素の閉じタグと次の開始タグの間) 空白がある DOM に挿入されているのが見られます。 document.write 文で挿入された要素の間には空白が作成されません。

+ +

DOM にテキストノードが入りうるのは DOM が nextSibling を使って横断される時に許可されます。注記のセクションのリソースを見てください。

+ +

仕様

+ + + +

ブラウザ実装状況

+ + + +

{{Compat("api.Node.nextSibling")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf