Merge branch 'main' into fix-typo-client-side-web-apis-intro-ja

2 files changed, 66 insertions, 87 deletions

diff --git a/files/ja/web/api/node/nextsibling/index.html b/files/ja/web/api/node/nextsibling/index.html
deleted file mode 100644
index 1ff4c13cef..0000000000
--- a/files/ja/web/api/node/nextsibling/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: Node.nextSibling
-slug: Web/API/Node/nextSibling
-tags:
-  - DOM
-  - Gecko
-  - Node
-  - 要更新
-translation_of: Web/API/Node/nextSibling
----
-<div>
-<div>
-<div>{{APIRef("DOM")}}</div>
-</div>
-
-<p><code><strong>Node.nextSibling</strong></code> という読み取り専用プロパティは指定したノードの親の{{domxref("Node.childNodes","子ノード")}}リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は <code>null</code> を返します。</p>
-</div>
-
-<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="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p>
-    <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p>
-
-<div> </div>
-
-<div>{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。</div>
-</div>
-
-<h2 id="Example" name="Example">例</h2>
-
-<pre class="brush:html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>div</span><span class="punctuation token">&gt;</span></span>
-
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
-<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span>
-    i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span>
-
-console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-
-<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span>
-  el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span>
-  i<span class="operator token">++</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-
-</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span>
-
-/**************************************************
-  The following is written to the console as it loads:
-
-     Siblings of div-01
-
-      1. #text
-      2. DIV
-      3. #text
-      4. SCRIPT
-
-**************************************************/</code></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>
-
-
-
-<p>{{Compat("api.Node.nextSibling")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Element.nextElementSibling")}}</li>
-</ul>
diff --git a/files/ja/web/api/node/nextsibling/index.md b/files/ja/web/api/node/nextsibling/index.md
new file mode 100644
index 0000000000..f310d8e456
--- /dev/null
+++ b/files/ja/web/api/node/nextsibling/index.md
@@ -0,0 +1,66 @@
+---
+title: Node.nextSibling
+slug: Web/API/Node/nextSibling
+tags:
+  - プロパティ
+  - リファレンス
+  - 読み取り専用
+browser-compat: api.Node.nextSibling
+translation_of: Web/API/Node/nextSibling
+---
+{{APIRef("DOM")}}
+
+**`nextSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親の {{domxref("Node.childNodes","childNodes")}} の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は `null` を返します。
+
+> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に {{domxref("Text")}} ノードを挿入します。
+> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や [`Node.previousSibling`](/ja/docs/Web/API/Node/previousSibling) を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。
+>
+> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。
+>
+> {{domxref("Element.nextElementSibling")}} を使用すると、ホワイトスペースのノードや要素間のテキスト、コメントなどを飛ばして次の要素を取得することができます。
+>
+> 子ノードのリストで反対方向に移動する場合は、 [Node.previousSibling](/ja/docs/Web/API/Node/previousSibling) を使用してください。
+
+## 値
+
+現在のノードの次の兄弟ノードを表す {{domxref("Node")}}、または存在しない場合は `null` です。
+
+## 例
+
+```html
+<div id="div-1">こちらは div-1 です。</div>
+<div id="div-2">こちらは div-2 です。</div>
+<br/>
+<output><em>計算結果がありません。</em></output>
+```
+
+```js
+let el = document.getElementById('div-1').nextSibling,
+i = 1;
+
+let result = "div-1 の兄弟要素:<br/>";
+
+while (el) {
+  result += i + '. ' + el.nodeName+"<br/>";
+  el = el.nextSibling;
+  i++;
+}
+
+const output = document.getElementsByTagName("output")[0];
+output.innerHTML = result;
+```
+
+{{ EmbedLiveSample("Example", "100%", 500)}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.nextElementSibling")}}
+- {{domxref("Node.previousSibling")}}