diff options
| author | Atsuto Yamashita <atyamash@yahoo-corp.jp> | 2022-03-15 19:47:35 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-15 19:47:35 +0900 |
| commit | 9bf38df91fadd199a5ea45ad79d5e111ddfb3fe0 (patch) | |
| tree | 71952407ea41c86feabef4214610d59e15aae55d /files/ja/web/api/node | |
| parent | c2678137db5f97ad1fe39e872529159a1afafec1 (diff) | |
| parent | 9e7fbb013772ebab9b35185f0d0836995acbe6db (diff) | |
| download | translated-content-9bf38df91fadd199a5ea45ad79d5e111ddfb3fe0.tar.gz translated-content-9bf38df91fadd199a5ea45ad79d5e111ddfb3fe0.tar.bz2 translated-content-9bf38df91fadd199a5ea45ad79d5e111ddfb3fe0.zip | |
Merge branch 'main' into fix-typo-client-side-web-apis-intro-ja
Diffstat (limited to 'files/ja/web/api/node')
52 files changed, 1942 insertions, 1852 deletions
diff --git a/files/ja/web/api/node/appendchild/index.html b/files/ja/web/api/node/appendchild/index.html deleted file mode 100644 index 3242491906..0000000000 --- a/files/ja/web/api/node/appendchild/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Node.appendChild -slug: Web/API/Node/appendChild -tags: - - API - - DOM - - Method - - Node - - Reference -translation_of: Web/API/Node/appendChild ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>Node.appendChild()</strong></code> メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。</p> - -<p>これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。<code>cloneNode</code> で作成したコピーは自動的に同期を保たないことに注意してください。</p> - -<p>このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre> - -<h3 id="引数">引数</h3> - -<h4 id="aChild">aChild</h4> - -<p>親ノードに追加する子ノード(要素)</p> - -<h3 id="戻り値">戻り値</h3> - -<p>追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。</p> - -<h2 id="Notes" name="Notes">注意</h2> - -<p><code>appendChild()</code> が子要素を返すため、メソッドチェーンが期待通りに動きません。:</p> - -<pre class="brush: js"><code>var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre> - -<p><code>aBlock</code> に <code><b></b></code> を与えただけでは期待通りに動きません。</p> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。 -var p = document.createElement("p"); -document.body.appendChild(p); -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>{{SpecName("DOM3 Core")}} から変更なし。</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>{{SpecName("DOM2 Core")}} から変更なし。</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>{{SpecName("DOM1")}} から変更なし。</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>初期定義。</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - -<p>{{Compat("api.Node.appendChild")}}</p> - -<div id="compat-mobile"></div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.removeChild()")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("Node.hasChildNodes()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> -</ul> diff --git a/files/ja/web/api/node/appendchild/index.md b/files/ja/web/api/node/appendchild/index.md new file mode 100644 index 0000000000..6abebeaac4 --- /dev/null +++ b/files/ja/web/api/node/appendchild/index.md @@ -0,0 +1,82 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - メソッド + - リファレンス +browser-compat: api.Node.appendChild +translation_of: Web/API/Node/appendChild +--- +{{APIRef("DOM")}} + +**`appendChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していた場合は、 `appendChild()` はその子ノードを現在の位置から新しい位置へ移動します（他のノードに追加する前に、そのノードを親ノードから取り除く必要はありません）。 + +これは、 1 つのノードが同時に文書の 2 か所に存在できないということです。したがって、すでにノードに親がある場合、最初にノードが取り除かれた後、新しい位置に追加されます。 +{{domxref("Node.cloneNode()")}} メソッドを使用すると、新しい親ノード以下に追加する前に、ノードのコピーを作成することができます。 +`cloneNode` で作成したコピーは自動的に同期されません。 + +指定された子ノードが {{domxref("DocumentFragment")}} であった場合、その +{{domxref("DocumentFragment")}} の内容全体が指定された親ノードの子ノードリストに移動します。 + +> **Note:** このメソッドとは異なり、 {{domxref("Element.append()")}} メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。 + +`appendChild()` は子要素を返すので、メソッドチェーンは動作しません。 + +```js +let aBlock = document.createElement('block').appendChild( document.createElement('b') ); +``` + +`aBlock` に `<b></b>` を追加するだけですが、 `block` に対して複数の `appendChild` を連鎖させるなど、それ以外の操作を連鎖せることはできません。 + +## 構文 + +```js +appendChild(aChild); +``` + +### 引数 + +- `aChild` + - : 指定された親ノードに追加するノード（ふつうは要素）。 + +### 返値 + +{{domxref("Node")}} で追加された子ノード (`aChild`) を返します。 +ただし、 `aChild` が {{domxref("DocumentFragment")}} であった場合は、空の {{domxref("DocumentFragment")}} を返します。 + +### 例外 + +- `HierarchyRequestError` {{domxref("DOMException")}} + - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。 + - `aChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。 + - `aChild` を挿入すると循環参照になる場合。すなわち `aChild` がこのノードの祖先である場合。 + - `aChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。 + - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。 + - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。 + - このノードの親が {{domxref("Document")}} で `aChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。 + -`aChild` を挿入すると {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。 + +## 例 + +```js +// 新しい段落要素を作成し、文書の body の末尾に追加します。 +let p = document.createElement("p"); +document.body.appendChild(p); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.removeChild()")}} +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.insertBefore()")}} +- {{domxref("Node.hasChildNodes()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("Element.append()")}} diff --git a/files/ja/web/api/node/baseuri/index.md b/files/ja/web/api/node/baseuri/index.md new file mode 100644 index 0000000000..053fadb866 --- /dev/null +++ b/files/ja/web/api/node/baseuri/index.md @@ -0,0 +1,67 @@ +--- +title: Node.baseURI +slug: Web/API/Node/baseURI +tags: + - Node + - プロパティ + - 読み取り専用 +browser-compat: api.Node.baseURI +translation_of: Web/API/Node/baseURI +--- +{{APIRef("DOM")}} + +**`baseURI`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードを含む文書の絶対的なベース URL を返します。 + +ベース URL はブラウザーが絶対 URL を必要とするときに、相対 URL を解決するために使用されます。例えば、 HTML の {{HTMLElement("img")}} 要素の `src` 属性や、 SVG の `xlink:href` や `href` 属性を処理する場合などです。 + +このプロパティは読み取り専用ですが、値はプロパティがアクセスされるたびにアルゴリズムで決まりますので、状況が変化すると変化することがあります。 + +ベース URL は次のように決まります。 + +1. 既定で、ベース URL は文書の位置（{{domxref("window.location")}} で指定された通り）となります。 +2. これが HTML 文書であり、文書に {{HTMLElement("Base")}} 要素があった場合、*最初の* `Base` 要素の `href` の値があれば、代わりに使用されます。 + +## 値 + +{{domxref("Node")}} のベース URL を表す文字列です。 + +## 例 + +### \<base> なし + +```html +<output>Not calculated</output> +``` + +```js +const output = document.getElementsByTagName("output")[0]; +output.value = output.baseURI; +``` + +{{EmbedLiveSample("Without <base>", "100%", 40)}} + +### \<base> あり + +```html +<base href="https://developer.mozilla.org/modified_base_uri/"> +<output>Not calculated</output> +``` + +```js +const output = document.getElementsByTagName("output")[0]; +output.value = output.baseURI; +``` + +{{EmbedLiveSample("With <base>", "100%", 40)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{HTMLElement("base")}} 要素 diff --git a/files/ja/web/api/node/childnodes/index.html b/files/ja/web/api/node/childnodes/index.html deleted file mode 100644 index 82a90460c6..0000000000 --- a/files/ja/web/api/node/childnodes/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Node.childNodes -slug: Web/API/Node/childNodes -tags: - - API - - DOM - - DOMリファレンス - - プロパティ - - リファレンス -translation_of: Web/API/Node/childNodes ---- -<p>{{ ApiRef() }}</p> - -<p><code><strong>Node.childNodes</strong></code>読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子{{domxref("Node","nodes")}}の現在の{{domxref("NodeList")}}を返します。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox">let <var>nodeList</var> = <var>elementNodeReference</var>.childNodes; -</pre> - -<h2 id=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4" name=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4">例</h2> - -<h3 id="簡単な使用方法">簡単な使用方法</h3> - -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// 変数pargは<p>要素へのオブジェクト参照です</span> - -<span class="comment token">// まず、pargが子ノードを持っているかをチェックします</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span> - - <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// for文を使って各ノードにchildren[i]としてアクセスします - // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<h3 id="ノードから全ての子を削除する">ノードから全ての子を削除する</h3> - -<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// これは一例ですが、この方法でノードからすべての子ノードを削除することができます</span> -<span class="comment token">// let box = document.getElementById(/**/)</span>; - -<span class="keyword token">while</span> <span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{ - // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します</span> - box<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<h2 id="注記">注記</h2> - -<p>ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえば<code>elementNodeReference.childNodes[1].nodeName</code> で名前を取得) を使用します。<br> - <br> - <code>document</code>オブジェクト自体には Doctype 宣言と root 要素 の2つの子があり、通常は<code>documentElement</code>と呼ばれます。 （(X)HTML文書ではこれが<code>HTML</code>要素です）<br> - <br> - <code>childNodes</code>にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。</p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - -<p>{{Compat("api.Node.childNodes")}}</p> - -<h2 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">関連情報</h2> - -<ul> - <li>{{ domxref("Node.firstChild") }}</li> - <li>{{ domxref("Node.lastChild") }}</li> - <li>{{ domxref("Node.nextSibling") }}</li> - <li>{{ domxref("Node.previousSibling") }}</li> - <li>{{ domxref("Element.children") }}</li> -</ul> diff --git a/files/ja/web/api/node/childnodes/index.md b/files/ja/web/api/node/childnodes/index.md new file mode 100644 index 0000000000..0e07d3ecb3 --- /dev/null +++ b/files/ja/web/api/node/childnodes/index.md @@ -0,0 +1,74 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.childNodes +translation_of: Web/API/Node/childNodes +--- +{{APIRef("DOM")}} + +**`childNodes`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティであり、{{domxref("NodeList")}} で指定された要素の子{{domxref("Node", "ノード", "", 1)}}の生きたリストを返し、最初の子ノードは位置 `0` に割り当てられます。子ノードには要素、テキスト、コメントが含まれます。 + +> **Note:** {{domxref("NodeList")}} が生きたリストであるというのは、新しい子が追加されたり取り除かれたりするたびに、内容が変化するという意味です。 + +ノードのコレクションの項目はオブジェクトであり、文字列ではありません。ノードオブジェクトからデータを取得するには、そのプロパティを使用してください。例えば、最初の子ノードの名前を取得するには、 `elementNodeReference.childNodes[0].nodeName` を使うことで実現できます。 + +{{domxref("document")}} オブジェクト自体には 2 つの子があります。文書型宣言と、ルート要素、ふつうは `documentElement` として参照されます。 HTML 文書の場合、後者は {{HTMLElement("html")}} 要素です。 + +覚えておくべき重要なこととして、 `childNodes` には*すべての*子ノードが含まれ、テキストやコメントなどの要素以外のノードが含まれることです。 +要素のみが含まれるコレクションを取得するのであれば、 {{domxref("Element.children")}} を代わりに使用してください。 + +## 値 + +このノードの子を含む生きた {{domxref("NodeList")}} です。 + +> **Note:** `childNodes` を複数回呼び出しても、*同じ* {{domxref("NodeList")}} が返されます。 + +## 例 + +### 単純な使用方法 + +```js +// parg は <p> 要素へのオブジェクト参照です + +// まず、要素に子ノードがあるかどうかをチェックします +if (parg.hasChildNodes()) { + let children = parg.childNodes; + + for (let i = 0; i < children.length; i++) { + // それぞれの子を children[i] として処理します + // 注: リストは生きています。子を追加したり取り除いたりすると、リストの `length` が変わります + } +} +``` + +### ノードからすべてての子を削除 + +```js +// これはあるノードからすべての子を取り除くための一つの方法です +// box はある要素へのオブジェクト参照です + +while (box.firstChild) { + // リストは生きているので、呼び出されるたびにインデックスが変わります + box.removeChild(box.firstChild); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.firstChild")}} +- {{domxref("Node.lastChild")}} +- {{domxref("Node.nextSibling")}} +- {{domxref("Node.previousSibling")}} +- {{domxref("Element.children")}} diff --git a/files/ja/web/api/node/clonenode/index.html b/files/ja/web/api/node/clonenode/index.html deleted file mode 100644 index db00fc7a61..0000000000 --- a/files/ja/web/api/node/clonenode/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Node.cloneNode() -slug: Web/API/Node/cloneNode -translation_of: Web/API/Node/cloneNode ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>現在のノードの複製を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>); -</pre> - -<dl> - <dt><code>node</code></dt> - <dd>複製するノード</dd> - <dt><code>dupNode</code></dt> - <dd>新しく生成される <code>node</code> の複製</dd> - <dt><code>deep</code> {{optional_inline}}</dt> - <dd><code>node</code> の子孫ノードも複製する場合は <code>true</code> 、 <code>node</code> のみを複製する場合は <code>false</code> - <div class="note"> - <p><strong>注記:</strong> DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 <code>deep</code> は省略可能な引数です。省略された場合、 <code>deep</code> には <code>true</code> が渡され、深い複製を生成します。浅い複製を生成するには、 <code>deep</code> を <code>false</code> にする必要があります。</p> - - <p>以前のDOMの仕様を実装しているブラウザでは、 <code>deep</code> は必須の引数です。</p> - </div> - </dd> -</dl> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">var p = document.getElementById("para1"); -var p_prime = p.cloneNode(true); -</pre> - -<h2 id="Notes" name="Notes">注記</h2> - -<p id="not-event-listeners">ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。<a href="/ja/docs/DOM/element.addEventListener" title="DOM/element.addEventListener"><code>addEventListener()</code></a> を使用したものや、要素のプロパティに代入されたもの (例: <code>node.onclick = fn;</code>) は複製されません。</p> - -<p><code><strong>cloneNode</strong></code> によって返される複製ノードは、 {{domxref("Node.appendChild()")}} や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。</p> - -<p><code><strong>deep</strong></code> が <code>false</code> に設定されていると、どの子ノードも複製されません。 そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。</p> - -<p><code><strong>deep</strong></code> が <code>true</code> に評価できる場合、サブツリー全体 (子 {{domxref("Text")}} ノードにあるテキストを含む) もコピーされます。 {{HTMLElement("img")}} や {{HTMLElement("input")}} 要素などの空ノードの場合には <code>deep</code> を true と false のどちらに設定してもかまいません。</p> - -<div class="warning"><strong>注意:</strong> <code>cloneNode()</code> を使用すると、ドキュメント内で要素の id が重複する可能性があります。</div> - -<p>別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.cloneNode")}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<ul> - <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li> - <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li> - <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (草案)</li> -</ul> diff --git a/files/ja/web/api/node/clonenode/index.md b/files/ja/web/api/node/clonenode/index.md new file mode 100644 index 0000000000..ff734aa6c0 --- /dev/null +++ b/files/ja/web/api/node/clonenode/index.md @@ -0,0 +1,61 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +tags: + - メソッド + - リファレンス +browser-compat: api.Node.cloneNode +translation_of: Web/API/Node/cloneNode +--- +{{APIRef("DOM")}} + +**`cloneNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、このメソッドが呼び出されたノードの複製を返します。 +引数でノードに含まれるサブツリーを一緒に複製するかどうかを制御できます。 + +ノードを複製すると、固有（インライン）のリスナーを含む、ノードのすべての属性とその値が複製されます。 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使って追加されたイベントリスナーや、要素のプロパティに代入されたイベントリスナー（例: `node.onclick = someFunction`）は複製されません。さらに、 {{HTMLElement("canvas")}} 要素では、描画された画像は複製されません。 + +> **Warning:** `cloneNode()` を使用すると、文書内で要素の ID が重複する可能性があります。 +> +> 元のノードに `id` 属性があり、複製を同じ文書に配置する場合は、複製の ID が重複しないように変更してください。 +> +> また、 `name` 属性も重複した名前を使わない場面では、変更する必要があるかもしれません。 + +**異なる**文書にノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。 + +## 構文 + +```js +cloneNode(); +cloneNode(deep); +``` + +### 引数 + +- `deep` {{optional_inline}} + + - : `true` の場合、ノードとそのサブツリーは、子ノードの {{domxref("Text")}} にあるテキストも含め複製されます。 + + `false` の場合、このノードのみが複製されます。 + サブツリーは、そのノードに含まれているテキストも含め、複製されません。 + + なお、 `deep` は {{HTMLElement("img")}} や {{HTMLElement("input")}} のような空要素には効果がありません。 + +### 返値 + +複製された {{domxref("Node")}} を返します。 +複製されたノードには、文書に所属する他のノードに {{domxref("Node.appendChild()")}} などを使用して追加されるまで、親ノードがなく、文書にも所属していません。 + +## 例 + +```js +let p = document.getElementById("para1") +let p_prime = p.cloneNode(true) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/comparedocumentposition/index.html b/files/ja/web/api/node/comparedocumentposition/index.html deleted file mode 100644 index 5865081c84..0000000000 --- a/files/ja/web/api/node/comparedocumentposition/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Node.compareDocumentPosition -slug: Web/API/Node/compareDocumentPosition -tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/compareDocumentPosition ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>node</var>.compareDocumentPosition( <var>otherNode</var> ) -</pre> - -<h3 id="パラメーター">パラメーター</h3> - -<dl> - <dt><code>node</code></dt> - <dd>比較元ノード</dd> - <dt><code>otherNode</code></dt> - <dd><em>node</em> と比較する別ノード</dd> -</dl> - -<h3 id="返り値">返り値</h3> - -<p>呼び出し元の <code>node</code> と {{domxref("Document")}} 内の <code>otherNode</code> の関係を表すビットの整数値。複数の条件に適応する場合、1つ以上のビットがセットされることがあります。<code>compareDocumentPosition()</code> を呼び出した <code>node</code> と比較して、<code>otherNode</code> が 文書のより前にあり、かつ <code>node</code> を含んでいるならば、<code>DOCUMENT_POSITION_CONTAINS</code> と <code>DOCUMENT_POSITION_PRECEDING</code> のビットがセットされ、結果は0x0Aもしくは10進数の10になります。</p> - -<h2 id="Notes" name="Notes">注記</h2> - -<p>戻り値は以下の値を持つビットマスクの何れかとなります。</p> - -<table> - <thead> - <tr> - <th scope="col">名称</th> - <th scope="col">値</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td> - <td>1</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_PRECEDING</code></td> - <td>2</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_FOLLOWING</code></td> - <td>4</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_CONTAINS</code></td> - <td>8</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td> - <td>16</td> - </tr> - <tr> - <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td> - <td>32</td> - </tr> - </tbody> -</table> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js;highlight:[3]">var head = document.getElementsByTagName('head').item(0); - -if ( head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING ) { - console.log("head 要素は body 要素より前に記述されています。"); -} else { - console.log("head 要素は body 要素の前に配置しなくてはなりません。"); -} -</pre> - -<div class="note"> -<p><strong>注記:</strong> <code>compareDocumentPosition</code> の戻り値はビットマスクです。よって、有意な結果を得るには <a href="/ja/docs/JavaScript/Reference/Operators/Bitwise_Operators">ビット演算子</a>の "<code>&</code>" を用いなくてはならない点に注意して下さい。</p> -</div> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table> - <thead> - <tr> - <th>仕様書</th> - <th>策定状況</th> - <th>コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition">DOM Level 3</a></td> - <td>Recommendation</td> - <td></td> - </tr> - <tr> - <td><a href="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition">DOM Standard</a></td> - <td>Living standard</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.contains")}}</li> - <li><a href="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li> -</ul> diff --git a/files/ja/web/api/node/comparedocumentposition/index.md b/files/ja/web/api/node/comparedocumentposition/index.md new file mode 100644 index 0000000000..346dc65e73 --- /dev/null +++ b/files/ja/web/api/node/comparedocumentposition/index.md @@ -0,0 +1,69 @@ +--- +title: Node.compareDocumentPosition() +slug: Web/API/Node/compareDocumentPosition +tags: + - メソッド + - リファレンス +browser-compat: api.Node.compareDocumentPosition +translation_of: Web/API/Node/compareDocumentPosition +--- +{{APIRef("DOM")}} + +**`compareDocumentPosition()`** は {{domxref("Node")}} インターフェイスのメソッドで、引数のノードの位置を、呼び出されたノードからの相対位置で報告します。 + +## 構文 + +```js +compareDocumentPosition(otherNode); +``` + +### 引数 + +- `otherNode` + - : {{domxref("Node")}} で、このノードとの相対位置を報告するノードを指定します。 + +### 返値 + +整数値で、 `otherNode` の `node` から見た相対位置を、以下の {{domxref("Node")}} の定数プロパティを組み合わせた[ビットマスク](<https://ja.wikipedia.org/wiki/マスク_(情報工学)>)で表します。 + +- `Node.DOCUMENT_POSITION_DISCONNECTED` (`1`) + - : 両方のノードが、異なる文書、または同じ文書の異なるツリーにあります。 +- `Node.DOCUMENT_POSITION_PRECEDING` (`2`) + - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で前にある（祖先ノード、前にある兄弟ノード、前にある兄弟ノードの子孫ノード、祖先ノードの前にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも前に位置します。 +- `Node.DOCUMENT_POSITION_FOLLOWING` (`4`) + - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で後にある（子孫ノード、後にある兄弟ノード、後にある兄弟ノードの子孫ノード、祖先ノードの後にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも後に位置します。 +- `Node.DOCUMENT_POSITION_CONTAINS` (`8`) + - : `otherNode` はこのノードの祖先ノードです。 +- `Node.DOCUMENT_POSITION_CONTAINED_BY` (`16`) + - : `otherNode` はこのノードの子孫ノードです。 +- `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` (`32`) + - : その結果は、任意や実装固有の動作に依存し、移植性は保証されません。 + +複数の条件に適合する場合、複数のビットが設定されることがあります。例えば、 `otherNode` が文書中でより先にあり、**_かつ_** `compareDocumentPosition()` が呼び出されたノードを含んでいれば、 `DOCUMENT_POSITION_CONTAINS` と `DOCUMENT_POSITION_PRECEDING` の両ビットが設定され、 `10` (`0x0A`) という値になります。 + +## 例 + +```js +const head = document.head; +const body = document.body; + +if (head.compareDocumentPosition(body) & Node.DOCUMENT_POSITION_FOLLOWING) { + console.log('正しい形式の文書です'); +} else { + console.error('<head> が <body> の前にありません'); +} +``` + +> **Note:** `compareDocumentPosition()` の返値はビットマスクですので、意味のある結果を得るには[ビット AND 演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND)を使用する必要があります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{DOMxRef("Node.contains()")}} diff --git a/files/ja/web/api/node/contains/index.html b/files/ja/web/api/node/contains/index.html deleted file mode 100644 index 2947ce92d1..0000000000 --- a/files/ja/web/api/node/contains/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Node.contains -slug: Web/API/Node/contains -tags: - - API - - DOM - - Method - - Node -translation_of: Web/API/Node/contains ---- -<div>{{APIRef("DOM")}}</div> - -<p><strong><code>Node.contains</code></strong> メソッドは指定ノードの子孫ノードに特定の子ノード（※自身も含む）が含まれるかどうかを示す真偽値を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">node.contains( otherNode ) -</pre> - -<h2 id="Example" name="Example">例</h2> - -<p>この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。<code>contains</code> は包括的かつ決定的であるため、body がそれ自身を含むかどうかは <code>isInPage</code> の意図ではないため明示的に <code>false</code> を返します。</p> - -<pre class="brush:js">function isInPage(node) { - return (node === document.body) ? false : document.body.contains(node); -}</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.contains")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.compareDocumentPosition")}}</li> - <li>{{domxref("Node.hasChildNodes")}}</li> -</ul> diff --git a/files/ja/web/api/node/contains/index.md b/files/ja/web/api/node/contains/index.md new file mode 100644 index 0000000000..6bcb67f897 --- /dev/null +++ b/files/ja/web/api/node/contains/index.md @@ -0,0 +1,56 @@ +--- +title: Node.contains() +slug: Web/API/Node/contains +tags: + - メソッド + - リファレンス +browser-compat: api.Node.contains +translation_of: Web/API/Node/contains +--- +{{APIRef("DOM")}} + +**`contains()`** は {{domxref("Node")}} インターフェイスのメソッドで、あるノードが指定されたノードの子孫であるか、すなわち、このノード自体であるか、直接の子ノード ({{domxref("Node.childNodes", "childNodes")}}) の何れかであるか、直接の子ノードの子ノードの何れかであるか（以下同様）を示す論理値を返します。 + +> **Note:** ノードは自分自身に**含まれます**。 + +## 構文 + +```js +contains(otherNode); +``` + +### 引数 + +- `otherNode` + - : 検査する {{domxref("Node")}} です。 + > **Note:** `otherNode` は省略できませんが、 `null` に設定することはできます。 + +### 返値 + +論理値で、 `true` は `otherNode` がそのノードに含まれていることを表します。 +そうでなければ `false` になります。 + +`otherNode` 引数が `null` であれば、 `contains()` は常に `false` になります。 + +## 例 + +この関数は、ある要素がそのページの body 要素に含まれるかどうかを検査するものです。 `contains` は包括的かつ決定的であるため、 body がそれ自身を含むかどうかは `isInPage` の意図するところではないため、明示的に `false` を返します。 + +```js +function isInPage(node) { + return (node === document.body) ? false : document.body.contains(node); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.compareDocumentPosition")}} +- {{domxref("Node.hasChildNodes")}} diff --git a/files/ja/web/api/node/firstchild/index.html b/files/ja/web/api/node/firstchild/index.html deleted file mode 100644 index 5a57be3ae9..0000000000 --- a/files/ja/web/api/node/firstchild/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Node.firstChild -slug: Web/API/Node/firstChild -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/firstChild ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ <code>null</code> を返します。ノードが <code>Document</code> の場合は、その直接の子のリスト内の最初のノードを返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild; -</pre> -<ul> - <li><code>childNode</code> : node の最初の子ノードがあればその参照、無い場合は <code>null</code></li> -</ul> -<h2 id="Example" name="Example">例</h2> -<p>次の例では <code>firstChild</code> の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。</p> -<pre class="brush:html"><p id="para-01"> - <span>First span</span> -</p> - -<script type="text/javascript"> - var p01 = document.getElementById('para-01'); - alert(p01.firstChild.nodeName) -</script></pre> -<p>上記の例では alert は'#text'を表示します。なぜなら開始タグ <p> の末端と <span> の間にある空白を調整するためにテキストノードが挿入されているからです。<b>どんな</b> 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。</p> -<p>その他の #text ノードは閉じタグ </span> と </p> の間に挿入されていみます。</p> -<p>もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。</p> -<pre class="brush:html"><p id="para-01"><span>First span</span></p> - -<script type="text/javascript"> - var p01 = document.getElementById('para-01'); - alert(p01.firstChild.nodeName) -</script> -</pre> -<p>今度は alert は 'SPAN' を表示するでしょう。</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-firstChild">DOM Level 1 Core: firstChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></li> -</ul> diff --git a/files/ja/web/api/node/firstchild/index.md b/files/ja/web/api/node/firstchild/index.md new file mode 100644 index 0000000000..504cd98284 --- /dev/null +++ b/files/ja/web/api/node/firstchild/index.md @@ -0,0 +1,69 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +tags: + - プロパティ + - リファレンス +browser-compat: api.Node.firstChild +translation_of: Web/API/Node/firstChild +--- +{{APIRef("DOM")}} + +**`firstChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は `null` を返します。 + +このノードが {{domxref("Document")}} であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。 + +> **Note:** このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。 +> {{domxref("Text")}} または {{domxref("Comment")}} ノードになることがあります。 +> 他の要素の子である最初の {{domxref("Element")}} を取得したい場合は、 {{domxref("Element.firstElementChild")}} を使用することを検討してください。 + +## 値 + +{{domxref("Node")}}、または存在しなければ `null`。 + +## 例 + +次の例では `firstChild` の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかを示しています。 + +```html +<p id="para-01"> + <span>最初の span</span> +</p> + +<script> + const p01 = document.getElementById('para-01'); + console.log(p01.firstChild.nodeName); +</script> +``` + +上記の例では[コンソール](/ja/docs/Web/API/console)に '#text' と表示されます。開始タグ `<p>` の末尾と `<span>` タグとの間にある空白を調整するためにテキストノードが挿入されているためです。**あらゆる**[ホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)は、単一の空白から複数のスペース、改行、タブに至るまで、 1 つの `#text` ノードを生成します。 + +`#text` ノードはもう 1 つ、閉じタグ `</span>` と `</p>` の間に挿入されます。 + +ホワイトスペースをソースから取り除くと、 #text ノードは挿入されず、 span 要素がその段落の最初の子になります。 + +```html +<p id="para-01"><span>最初の span</span></p> + +<script> + const p01 = document.getElementById('para-01'); + console.log(p01.firstChild.nodeName); +</script> +``` + +コンソールには 'SPAN' と表示されるようになります。 + +`node.firstChild` が `#text` や `#comment` ノードを返す問題を回避するには、 {{domxref("Element.firstElementChild")}} を使用すると最初の要素ノードのみを返すことができます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.firstElementChild")}} +- {{domxref("Node.lastChild")}} diff --git a/files/ja/web/api/node/haschildnodes/index.html b/files/ja/web/api/node/haschildnodes/index.html deleted file mode 100644 index b4ed1654d3..0000000000 --- a/files/ja/web/api/node/haschildnodes/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Node.hasChildNodes -slug: Web/API/Node/hasChildNodes -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/hasChildNodes ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><strong>hasChildNodes</strong> は指定した<a href="/ja/docs/Web/API/Node">ノード</a>が<a href="/ja/docs/Web/API/Node.childNodes">子ノード</a>を持つか否かを示す<a href="/ja/docs/JavaScript/Reference/Global_Objects/Boolean">真偽値</a>を返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre> -<h2 id="Example" name="Example">例</h2> -<p><code>"foo"</code> を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。</p> -<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo"); - -if ( foo.hasChildNodes() ) { - foo.removeChild( foo.childNodes[0] ); -}</pre> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li>{{domxref("Node.childNodes")}}</li> - <li>{{domxref("Node.hasAttributes")}}</li> -</ul> diff --git a/files/ja/web/api/node/haschildnodes/index.md b/files/ja/web/api/node/haschildnodes/index.md new file mode 100644 index 0000000000..85717cb827 --- /dev/null +++ b/files/ja/web/api/node/haschildnodes/index.md @@ -0,0 +1,49 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - メソッド + + - リファレンス +browser-compat: api.Node.hasChildNodes +translation_of: Web/API/Node/hasChildNodes +--- +{{APIRef("DOM")}} + +**`hasChildNodes()`** は {{domxref("Node")}} インターフェイスのメソッドで、この {{domxref("Node")}} に[子ノード](/ja/docs/Web/API/Node/childNodes)があるかどうかを示す論理値を返します。 + +## 構文 + +```js +hasChildNodes(); +``` + +### 引数 + +なし。 + +### 返値 + +論理値で、このノードに子ノードがあれば `true` を、そうでなければ `false` を返します。 + +## 例 + +```js +let foo = document.getElementById('foo'); + +if (foo.hasChildNodes()) { + // 'foo.childNodes' で何かを行う +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.childNodes")}} diff --git a/files/ja/web/api/node/insertbefore/index.html b/files/ja/web/api/node/insertbefore/index.html deleted file mode 100644 index 2bfea72cdf..0000000000 --- a/files/ja/web/api/node/insertbefore/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: Node.insertBefore() -slug: Web/API/Node/insertBefore -tags: - - API - - DOM - - Element - - Method - - Node - - Reference - - メソッド -translation_of: Web/API/Node/insertBefore ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"> <code><strong>Node.insertBefore()</strong></code> メソッドは、ノードを<em>参照ノード</em>の前に、指定された<em>親ノード</em>の子として挿入します。</span></p> - -<p>指定されたノードが既に文書中に存在した場合、 <code>insertBefore()</code> はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)</p> - -<p>これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。</p> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 <code>cloneNode()</code> で作成された複製は自動的には同期されません。</p> -</div> - -<p>指定された子が {{domxref("DocumentFragment")}} である場合、 <code>DocumentFragment</code> の内容全体が指定された親ノードの子リストに移動されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">let <var>insertedNode</var> = <var>parentNode</var>.insertBefore(<var>newNode</var>, <var>referenceNode</var>) -</pre> - -<dl> - <dt><code><var>insertedNode</var></code></dt> - <dd>挿入されたノード (<code><var>newNode</var></code> と同じ) です。</dd> - <dt><code><var>parentNode</var></code></dt> - <dd>新しく挿入されるノードの親です。</dd> - <dt><code><var>newNode</var></code></dt> - <dd>挿入されるノードです。</dd> - <dt><code><var>referenceNode</var></code></dt> - <dd> <code><var>newNode</var></code> がこのノードの直前に挿入されます。このノードが <code>null</code> である場合は、 <code><var>newNode</var></code> は <code><var>parentNode</var></code> の子ノードの末尾に挿入されます。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> <code><var>referenceNode</var></code> は省略可能な引数では<strong>ありません</strong>。明示的に {{domxref("Node")}} または <code>null</code> を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって<a href="https://code.google.com/p/chromium/issues/detail?id=419780">異なる</a><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">動作</a>をすることがあります。</p> -</div> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>追加された子ノードを返します (ただし <code><var>newNode</var></code> が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="Example_1" name="Example_1">例 1</h3> - -<pre class="brush: html"><div id="parentElement"> - <span id="childElement">foo bar</span> -</div> - -<script> -// 挿入する新しいノードを作成する -let newNode = document.createElement("span") - -// 親ノードの参照を取得する -let parentDiv = document.getElementById("childElement").parentNode - -// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作) -let sp2 = document.getElementById("childElement") -parentDiv.insertBefore(newNode, sp2) -// テストケース [ 1 ] 終了 - -// テストケース [ 2 ] 開始: childElement が undefined 型の場合 -let sp2 = undefined // "childElement" の ID を持つノードが存在しない -parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換 -// テストケース [ 2 ] 終了 - -// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合 -let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない -parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument" -// テストケース [ 3 ] 終了 -</script> -</pre> - -<h3 id="Example_2" name="Example_2">例 2</h3> - -<pre class="brush:html"><div id="parentElement"> - <span id="childElement">foo bar</span> -</div> - -<script> -// 新しい只の <span> 要素を作成 -let sp1 = document.createElement("span") - -// 参照要素を取得 -let sp2 = document.getElementById("childElement") -// 親要素を取得 -let parentDiv = sp2.parentNode - -// 新しい要素を sp2 の手前に挿入 -parentDiv.insertBefore(sp1, sp2) -</script> -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> <code>insertAfter()</code> メソッドはありません。これは <code>insertBefore</code> メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。</p> -</div> - -<p>前の例では、 <code>sp1</code> は以下のようにして <code>sp2</code> の後に挿入することができます。</p> - -<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling)</code></pre> - -<p><code>sp2</code> に次の兄弟がない場合、これは最後の子ノードです。 — <code>sp2.nextSibling</code> は <code>null</code> を返し、 <code>sp1</code> は子ノードリストの末尾 (<code>sp2</code> の直後) に挿入されます。</p> - -<h3 id="Example_3" name="Example_3">例 3</h3> - -<p>要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。</p> - -<pre class="brush:js">// 親ノードを取得 -let parentElement = document.getElementById('parentElement') -// 親の最初の子を取得 -let theFirstChild = parentElement.firstChild - -// 新しい要素を取得 -let newElement = document.createElement("div") - -// 最初の子の前に新しい要素を挿入 -parentElement.insertBefore(newElement, theFirstChild) -</pre> - -<p>要素に最初の子がない場合、 <code>firstChild</code> は <code>null</code> になります。その場合も、要素は親の最後の子の後に追加されます。</p> - -<p>親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は<em>唯一の</em>要素になります。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="spectable standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>挿入アルゴリズムのエラーを修正</td> - </tr> - <tr> - <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td>より詳細にアルゴリズムを記述</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>目立った変更はなし</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td> - <td>{{Spec2('DOM2 Core')}}</td> - <td>目立った変更はなし</td> - </tr> - <tr> - <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td>導入</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Node.insertBefore")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.removeChild()")}}</li> - <li>{{domxref("Node.replaceChild()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.hasChildNodes()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> -</ul> diff --git a/files/ja/web/api/node/insertbefore/index.md b/files/ja/web/api/node/insertbefore/index.md new file mode 100644 index 0000000000..36ae9e86ba --- /dev/null +++ b/files/ja/web/api/node/insertbefore/index.md @@ -0,0 +1,149 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +tags: + - メソッド + - リファレンス +browser-compat: api.Node.insertBefore +translation_of: Web/API/Node/insertBefore +--- +{{APIRef("DOM")}} + +**`insertBefore()`** は {{domxref("Node")}} インターフェイスのメソッドで、*参照先ノード*の前にこの*親ノード*の子としてノードを挿入します。 + +指定されたノードが既に文書中に存在した場合、 `insertBefore()` はこれを現在の位置から新しい位置に移動します。（つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。） + +これは、 1 つのノードが文書中に同時に 2 か所に存在できないことを意味します。 + +> **Note:** {{domxref("Node.cloneNode()")}} を使用すると、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 `cloneNode()` で作成された複製は自動的には同期されません。 + +指定された子が {{domxref("DocumentFragment")}} である場合、 `DocumentFragment` の内容全体が指定された親ノードの子リストに移動されます。 + +## 構文 + +```js +insertBefore(newNode, referenceNode); +``` + +### 引数 + +- `newNode` + - : 挿入するノードです。 +- `referenceNode` + - : `newNode` が挿入される位置の前にあるノードです。このノードが `null` である場合は、 `newNode` はこのノードの子ノードの末尾に挿入されます。 + > **Note:** `referenceNode` は省略可能な引数では**ありません**。 + > 明示的に {{domxref("Node")}} または `null` を渡す必要があります。 + > 渡さなかった場合や無効な値を渡した場合の[動作](https://code.google.com/p/chromium/issues/detail?id=419780)は、ブラウザーのバージョンによって[異なる](https://bugzilla.mozilla.org/show_bug.cgi?id=119489)可能性があります。 + +## 返値 + +追加された子ノードを返します（ただし `newNode` が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} を返します）。 + +### 例外 + +挿入前の検証 + +## 例 + +### 例 1 + +```html +<div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// 挿入する新しいノードを作成する +let newNode = document.createElement("span") + +// 親ノードの参照を取得する +let parentDiv = document.getElementById("childElement").parentNode + +// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作) +let sp2 = document.getElementById("childElement") +parentDiv.insertBefore(newNode, sp2) +// テストケース [ 1 ] 終了 + +// テストケース [ 2 ] 開始: childElement が undefined 型の場合 +let sp2 = undefined // "childElement" の ID を持つノードが存在しない +parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換 +// テストケース [ 2 ] 終了 + +// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合 +let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない +parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument" +// テストケース [ 3 ] 終了 +</script> +``` + +### 例 2 + +```html +<div id="parentElement"> + <span id="childElement">foo bar</span> +</div> + +<script> +// 新しい只の <span> 要素を作成 +let sp1 = document.createElement("span") + +// 参照要素を取得 +let sp2 = document.getElementById("childElement") +// 親要素を取得 +let parentDiv = sp2.parentNode + +// 新しい要素を sp2 の手前に挿入 +parentDiv.insertBefore(sp1, sp2) +</script> +``` + +> **Note:** `insertAfter()` メソッドはありません。 +> これは `insertBefore` メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。 +> +> 前の例では、 `sp1` は以下のようにして `sp2` の後に挿入することができます。 +> +> ```js +> parentDiv.insertBefore(sp1, sp2.nextSibling) +> ``` +> +> `sp2` に次の兄弟ノードがない場合、これが最後の子ノードです。 — `sp2.nextSibling` は `null` を返し、 `sp1` は子ノードリストの末尾（`sp2` の直後）に挿入されます。 + +### 例 3 + +要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。 + +```js +// 親ノードを取得 +let parentElement = document.getElementById('parentElement') +// 親ノードの最初の子ノードを取得 +let theFirstChild = parentElement.firstChild + +// 新しい要素を取得 +let newElement = document.createElement("div") + +// 最初の子ノードの前に新しい要素を挿入 +parentElement.insertBefore(newElement, theFirstChild) +``` + +要素に最初の子ノードがない場合、 `firstChild` は `null` になります。その場合も、要素は親ノードの最後の子ノードの後に追加されます。 + +親要素に最初の子ノードがない場合は、最後の子ノードもありません。結果的に、新しく挿入された要素は**唯一の**要素になります。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.removeChild()")}} +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Node.hasChildNodes()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("Element.prepend()")}} +- {{domxref("Element.before()")}} +- {{domxref("Element.after()")}} diff --git a/files/ja/web/api/node/isdefaultnamespace/index.html b/files/ja/web/api/node/isdefaultnamespace/index.html deleted file mode 100644 index 018e6562cc..0000000000 --- a/files/ja/web/api/node/isdefaultnamespace/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Node.isDefaultNamespace -slug: Web/API/Node/isDefaultNamespace -tags: - - DOM - - Gecko DOM Reference - - Namespaces - - Node -translation_of: Web/API/Node/isDefaultNamespace ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><code>isDefaultNamespace</code> は、引数としてネームスペース URI を受け取り、ネームスペースが指定されたノードのデフォルトのネームスペースである場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>result</var> = <var>node</var>.isDefaultNamespace(<var>namespaceURI</var>) -</pre> -<ul> - <li><var>result</var> : 戻り値は真偽値 (<code>true</code> / <code>false</code>) となる</li> - <li><var>namespaceURI</var> : 要素に対してチェックする、名前空間を表す文字列</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; -var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0]; - -alert(el.isDefaultNamespace(XULNS)); // true</pre> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li> - <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> -</ul> diff --git a/files/ja/web/api/node/isdefaultnamespace/index.md b/files/ja/web/api/node/isdefaultnamespace/index.md new file mode 100644 index 0000000000..44f1b3acec --- /dev/null +++ b/files/ja/web/api/node/isdefaultnamespace/index.md @@ -0,0 +1,71 @@ +--- +title: Node.isDefaultNamespace() +slug: Web/API/Node/isDefaultNamespace +tags: + - メソッド + - リファレンス +browser-compat: api.Node.isDefaultNamespace +translation_of: Web/API/Node/isDefaultNamespace +--- +{{APIRef("DOM")}} + +**`isDefaultNamespace()`** は {{domxref("Node")}} インターフェイスのメソッドで、名前空間 URI を引数として受け取ります。 +その名前空間がこのノードの既定の名前空間である場合は `true` を返し、そうでない場合は `false` を返します。 + +> **Note:** 既定の名前空間は、 HTML 要素では常に `""` です。 SVG 要素では、 `xmlns` 属性で設定されます。 + +## 構文 + +```js +isDefaultNamespace(namespaceURI); +``` + +### 引数 + +- `namespaceURI` + - : 要素の検査対象となる名前空間を表す文字列です。 + > **Note:** `namespaceURI` は省略可能ではありませんが、 `null` に設定することはできます。 + +### 返値 + +`true` または `false` の値を持つ論理値で、引数が既定の名前空間であるかどうかを示します。 + +## 例 + +```html +"" が <output> の既定の名前空間であるか: <output>未検査</output><br/> +"http://www.w3.org/2000/svg" が <output> の既定の名前空間であるか: <output>未検査</output><br/> +"" が <svg> の既定の名前空間であるか: <output>未検査</output><br/> +"http://www.w3.org/2000/svg" が <svg> の既定の名前空間であるか: <output>未検査</output><br/> +<svg xmlns="http://www.w3.org/2000/svg" height="1"></svg> +<button>結果を見るにはクリック</button> +``` + +```js +const button = document.getElementsByTagName('button')[0]; +button.addEventListener("click", function () { + const aHtmlElt = document.getElementsByTagName('output')[0]; + const aSvgElt = document.getElementsByTagName('svg')[0]; + + const result = document.getElementsByTagName('output'); + result[0].value = aHtmlElt.isDefaultNamespace(""); // true + result[1].value = aHtmlElt.isDefaultNamespace("http://www.w3.org/2000/svg"); // false + result[2].value = aSvgElt.isDefaultNamespace(""); // true + result[3].value = aSvgElt.isDefaultNamespace("http://www.w3.org/2000/svg"); // false +}); +``` + +{{ EmbedLiveSample('Example','100%',130) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.lookupNamespaceURI")}} +- {{domxref("Node.lookupPrefix")}} diff --git a/files/ja/web/api/node/isequalnode/index.html b/files/ja/web/api/node/isequalnode/index.html deleted file mode 100644 index 3eced87fe0..0000000000 --- a/files/ja/web/api/node/isequalnode/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Node.isEqualNode -slug: Web/API/Node/isEqualNode -translation_of: Web/API/Node/isEqualNode ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p><code>Node.isEqualNode()</code>は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性（要素であればIDや子要素の数など）、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(otherNode); -</pre> - -<ul> - <li><code>otherNode</code> : 同値性を比較する対象の {{domxref("Node")}}</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<p>3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、<code>isEqualNode()</code> を使ってJavaScriptでノードを比較した結果は以下のようになります。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div>最初の要素です。</div> -<div>2番目の要素です。</div> -<div>最初の要素です。</div> - -<p id="output"></p></pre> - -<div class="hidden"> -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#output { - width: 440px; - border: 2px solid black; - border-radius: 5px; - padding: 10px; - margin-top: 20px; - display: block; -}</pre> -</div> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">let output = document.getElementById("output"); -let divList = document.getElementsByTagName("div"); - -output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "<br/>"; -output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "<br/>"; -output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "<br/>";</pre> - -<h3 id="Results">Results</h3> - -<p>{{ EmbedLiveSample('Example', 480) }}</p> - -<p> - </p><h2 id="仕様">仕様</h2> - - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー互換性">ブラウザー互換性</h2> - - - -<p>{{Compat("api.Node.isEqualNode")}}</p> - -<h2 id="参考">参考</h2> - -<ul> - <li>{{domxref("Node.isSameNode()")}}</li> -</ul> diff --git a/files/ja/web/api/node/isequalnode/index.md b/files/ja/web/api/node/isequalnode/index.md new file mode 100644 index 0000000000..b4c71cc44a --- /dev/null +++ b/files/ja/web/api/node/isequalnode/index.md @@ -0,0 +1,82 @@ +--- +title: Node.isEqualNode() +slug: Web/API/Node/isEqualNode +tags: + - メソッド + - リファレンス +browser-compat: api.Node.isEqualNode +translation_of: Web/API/Node/isEqualNode +--- +{{APIRef("DOM")}} + +**`isEqualNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 2 つのノードが等しいかどうかを検査します。 +2 つのノードは、同じ型、定義特性（要素の場合、 ID や子ノードの数など）、その属性が一致している場合、等しいといえます。データで一致が求められる具体的な点は、ノードの型によって異なります。 + +## 構文 + +```js +isEqualNode(otherNode); +``` + +### 引数 + +- `otherNode` + - : 比較対象となる {{domxref("Node")}} です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 + +### 返値 + +論理値で、 2 つのノードが等しければ `true`、そうでなければ `false` です。 +`otherNode` が `null` であった場合、 `isEqualNode()` は常に false を返します。 + +## 例 + +この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isEqualNode()` を使って JavaScript でノードを比較した結果は以下のようになります。 + +### HTML + +```html +<div>最初の要素です。</div> +<div>2 番目の要素です。</div> +<div>最初の要素です。</div> + +<p id="output"></p> +``` + +```css hidden +#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +} +``` + +### JavaScript + +```js +let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); + +output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "<br/>"; +output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "<br/>"; +output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "<br/>"; +``` + +### 結果 + +{{ EmbedLiveSample('Example', "100%", "210") }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.isSameNode()")}} diff --git a/files/ja/web/api/node/issamenode/index.html b/files/ja/web/api/node/issamenode/index.html deleted file mode 100644 index f94668cfd5..0000000000 --- a/files/ja/web/api/node/issamenode/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Node.isSameNode -slug: Web/API/Node/isSameNode -tags: - - DOM - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/isSameNode ---- -<div> - {{ApiRef}}{{Obsolete_header}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ふたつのノードが同一ノードの場合は <code>true</code> を、異なる場合は <code>false</code> を返します。</p> -<div class="warning"> - <strong>注記</strong>: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。<br> - <pre class="brush:js">// 当メソッド -node1.isSameNode(node2) - -// 代替策 -node1 === node2 -node1 == node2 - -</pre> -</div> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>isSameNode</var> = <var>node</var>.isSameNode(<var>org</var>); -</pre> -<ul> - <li><var>arg</var> : 比較ノード</li> -</ul> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}</li> - <li>{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています</li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li>{{domxref("Node.isEqualNode")}}</li> -</ul> diff --git a/files/ja/web/api/node/issamenode/index.md b/files/ja/web/api/node/issamenode/index.md new file mode 100644 index 0000000000..ffd47f8bf3 --- /dev/null +++ b/files/ja/web/api/node/issamenode/index.md @@ -0,0 +1,83 @@ +--- +title: Node.isSameNode() +slug: Web/API/Node/isSameNode +tags: + - メソッド + - リファレンス +browser-compat: api.Node.isSameNode +translation_of: Web/API/Node/isSameNode +--- +{{APIRef("DOM")}} + +**`isSameNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 [`===` 厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)の古い別名です。 +すなわち、 2 つのノードが全く同じであるかどうか（言い換えれば、同じオブジェクトを指しているかどうか）を検査します。 + +> **Note:** `isSameNode()` を使用する必要はありません。 `===` 厳密等価演算子を使用してください。 + +## 構文 + +```js +isSameNode(otherNode); +``` + +### 引数 + +- `otherNode` + - : 検査対象となる {{domxref("Node")}} です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 + +### 返値 + +論理値で、両ノードが厳密に等しい場合は `true`、そうでなければ `false` です。 + +## 例 + +この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isSameNode()` を使って JavaScript でノードを比較した結果は以下のようになります。 + +### HTML + +```html +<div>最初の要素です。</div> +<div>2 番目の要素です。</div> +<div>最初の要素です。</div> + +<p id="output"></p> +``` + +```css hidden +#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +} +``` + +### JavaScript + +```js +let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); + +output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isSameNode(divList[0]) + "<br/>"; +output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isSameNode(divList[1]) + "<br/>"; +output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isSameNode(divList[2]) + "<br/>"; +``` + +### 結果 + +{{ EmbedLiveSample('Example', "100%", "205") }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.isEqualNode()")}} diff --git a/files/ja/web/api/node/issupported/index.html b/files/ja/web/api/node/issupported/index.html deleted file mode 100644 index 3b25dc254b..0000000000 --- a/files/ja/web/api/node/issupported/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Node.isSupported -slug: Web/API/Node/isSupported -tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/isSupported ---- -<div> - {{ApiRef}}{{obsolete_header("22")}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">element.isSupported(feature, version)</pre> -<dl> - <dt> - <code>feature</code></dt> - <dd> - テストする機能の名前。<a href="/ja/docs/DOM/document.implementation" title="DOM/document.implementation">DOMImplementation</a> の <code>hasFeature</code> メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance セクション</a> にリストがあります。</dd> - <dt> - <code>version</code></dt> - <dd> - テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は <code>2.0</code> になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は <code>true</code> を返します。</dd> -</dl> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js"><div id="doc"> -</div> - -<script> - // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します - var main = document.getElementById('doc'); - var output = main.isSupported('HTML', '2.0'); -</script> -</pre> -<h2 id="Specification" name="Specification">仕様</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-Node-supports">DOM Level 2 Core: isSupported</a></li> -</ul> -<h2 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko に関する注記</h2> -<ul> - <li>Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に <code>true</code> を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。</li> -</ul> diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md new file mode 100644 index 0000000000..db0b3935ee --- /dev/null +++ b/files/ja/web/api/node/issupported/index.md @@ -0,0 +1,53 @@ +--- +title: Node.isSupported() +slug: Web/API/Node/isSupported +tags: + - メソッド + - 非推奨 + - リファレンス +browser-compat: api.Node.isSupported +translation_of: Web/API/Node/isSupported +--- +{{APIRef("DOM")}}{{deprecated_header}} + +**`isSupported()`** は {{domxref("Node")}} インターフェイスのメソッドで、この DOM の実装が指定された機能を実装しており、このノードがこの機能に対応しているかどうかを検査した結果を論理値で返します。 + +## 構文 + +```js +isSupported(feature, version); +``` + +### 引数 + +- `feature` + - : 文字列で、検査する機能の名前を指定します。 + これは [DOMImplementation](/ja/docs/Web/API/Document/implementation) の `hasFeature` メソッドに渡すものと同じ名前です。有効な値については、 [Conformance の章](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance)にあります。 +- `version` + - : 文字列で、検査する機能のバージョン番号を指定します。 + DOM Level 2 第 1 版では、これは `2.0` という文字列です。このバージョンが指定されなかった場合、何れかの版のメソッドが対応していれば、このメソッドは true を返します。 + +## 例 + +```html +<div id="doc"> +</div> + +<script> + // 要素を取得して DOM2 HTML Module に対応しているかどうかを検査します。 + const main = document.getElementById('doc'); + const output = main.isSupported('HTML', '2.0'); +</script> +``` + +## 仕様書 + +この機能は仕様書に含まれていません。標準化路線から外れました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.isEqualNode()")}} diff --git a/files/ja/web/api/node/lastchild/index.html b/files/ja/web/api/node/lastchild/index.html deleted file mode 100644 index e7f5626f3c..0000000000 --- a/files/ja/web/api/node/lastchild/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Node.lastChild -slug: Web/API/Node/lastChild -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/lastChild ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p><strong>lastChild</strong> はノードの子要素の内、最後のものを返します。</p> -<h2 id="Syntax_and_Values" name="Syntax_and_Values">構文</h2> -<pre class="syntaxbox">var last_child = element.lastChild -</pre> -<h2 id="Description" name="Description">説明</h2> -<p><code>lastChild</code> として返されるのはノードです。その親が要素であるならば、子ノードは一般的に Element ノード、Text ノード、Comment ノード となります。子要素を持たない場合は <code>null</code> が返されます。</p> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">var tr = document.getElementById("row1"); // table 要素の特定の行を取得 -var corner_td = tr.lastChild; // 特定の行の内、最後のセルを取得 -</pre> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li> - <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li> -</ul> diff --git a/files/ja/web/api/node/lastchild/index.md b/files/ja/web/api/node/lastchild/index.md new file mode 100644 index 0000000000..9e9d386274 --- /dev/null +++ b/files/ja/web/api/node/lastchild/index.md @@ -0,0 +1,39 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.lastChild +translation_of: Web/API/Node/lastChild +--- +{{APIRef("DOM")}} + +**`lastChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最後の子ノードを返します。 +親ノードが要素であった場合、子ノードはふつう、要素ノード、テキストノード、コメントノードの何れかです。 +子要素がない場合は `null` を返します。 + +## Value + +このノードの最後の子である {{domxref("Node")}}、または子ノードがなければ `null` です。 + +## 例 + +```js +const tr = document.getElementById("row1"); +const corner_td = tr.lastChild; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.firstChild")}} +- {{domxref("Element.lastElementChild")}} diff --git a/files/ja/web/api/node/lookupprefix/index.md b/files/ja/web/api/node/lookupprefix/index.md new file mode 100644 index 0000000000..30dcc549ac --- /dev/null +++ b/files/ja/web/api/node/lookupprefix/index.md @@ -0,0 +1,77 @@ +--- +title: Node.lookupPrefix() +slug: Web/API/Node/lookupPrefix +tags: + - メソッド + - リファレンス +browser-compat: api.Node.lookupPrefix +translation_of: Web/API/Node/lookupPrefix +--- +{{APIRef("DOM")}} + +**`lookupPrefix()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された名前空間 URI に対応する接頭辞があれば、それを含む文字列を返します。ない場合は `null` を返します。 +複数の接頭辞の可能性があれば、最初の接頭辞を返します。 + +## 構文 + +```js +lookupPrefix(namespace); +``` + +### 引数 + +- `namespace` + - : 接頭辞を検索するための名前空間の入った文字列です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 + +### 返値 + +対応する接頭辞の入った文字列です。見つからなかった場合は `null` になります。 +`namespace` が null または空文字列であった場合、 `lookupPrefix()` は `null` を返します。 + +このノードが {{domxref("DocumentType")}} または {{domxref("DocumentFragment")}} であった場合は、 `lookupPrefix()` は常に `null` を返します。 + +## 例 + +```html +Prefix for <code>http://www.w3.org/2000/svg</code> on <output>: <output>未検査</output><br/> +Prefix for <code>http://www.w3.org/XML/1998/namespace</code> on <output>: <output>未検査</output><br/> +Prefix for <code>http://www.w3.org/TR/html4/</code> on <output>: <output>未検査</output><br/> +Prefix for <code>https://www.w3.org/1999/xlink</code> on <output>: <output>未検査</output><br/> +Prefix for <code>http://www.w3.org/2000/svg</code> on <svg>: <output>未検査</output><br/> +Prefix for <code>https://www.w3.org/1999/xlink</code> on <svg>: <output>未検査</output><br/> +Prefix for <code>http://www.w3.org/XML/1998/namespace</code> on <svg>: <output>未検査</output><br/> +<svg xmlns:t="http://www.w3.org/2000/svg" height="1"></svg> +<button>結果を確認するにはクリック</button> +``` + +```js +const button = document.getElementsByTagName('button')[0]; +button.addEventListener("click", function () { + const aHtmlElt = document.getElementsByTagName('output')[0]; + const aSvgElt = document.getElementsByTagName('svg')[0]; + + const result = document.getElementsByTagName('output'); + result[0].value = aHtmlElt.lookupPrefix("http://www.w3.org/2000/svg"); // true + result[1].value = aHtmlElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false + result[2].value = aHtmlElt.lookupPrefix("http://www.w3.org/TR/html4/"); // true + result[3].value = aHtmlElt.lookupPrefix("https://www.w3.org/1999/xlink"); // false + result[4].value = aSvgElt.lookupPrefix("http://www.w3.org/2000/svg"); // true + result[5].value = aSvgElt.lookupPrefix("https://www.w3.org/1999/xlink"); // true + result[6].value = aSvgElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false +}); +``` + +{{ EmbedLiveSample('Example','100%',190) }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix](https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix) 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"><</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">></span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</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">></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"></</span>script</span><span class="punctuation token">></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")}} diff --git a/files/ja/web/api/node/nodename/index.html b/files/ja/web/api/node/nodename/index.html deleted file mode 100644 index 65daeb1074..0000000000 --- a/files/ja/web/api/node/nodename/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Node.nodeName -slug: Web/API/Node/nodeName -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/nodeName ---- -<div> - {{APIRef}}</div> -<div> - </div> -<div> - <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">概要</span></div> -<p>ノードの名前を文字列で返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>str</var> = <var>node</var>.nodeName; -</pre> -<ul> - <li><code>str</code> には指定した要素の名前が文字列の形式で入ります。</li> - <li><code>nodeName</code> は読み取り専用の属性です。</li> -</ul> -<h2 id="Notes" name="Notes">注記</h2> -<p>以下の異なる種類のノードの戻り値があります。</p> -<table> - <thead> - <tr> - <th>Interface</th> - <th>nodeName</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/ja/docs/DOM/Attr">Attr</a></td> - <td><a href="/ja/docs/DOM/Attr.name"><code>Attr.name</code></a> と同じ</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/CDATASection">CDATASection</a></td> - <td>"#cdata-section"</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/Comment">Comment</a></td> - <td>"#comment"</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/document">Document</a></td> - <td>"#document"</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/DocumentFragment">DocumentFragment</a></td> - <td>"#document-fragment"</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/DocumentType">DocumentType</a></td> - <td><a href="/ja/docs/DOM/DocumentType.name"><code>DocumentType.name</code></a> と同じ</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/element">Element</a></td> - <td><a href="/ja/docs/DOM/element.tagName"><code>Element.tagName</code></a> と同じ</td> - </tr> - <tr> - <td><a href="/ja/docs/Web/API/Entity">Entity</a></td> - <td>実体名</td> - </tr> - <tr> - <td><a href="/ja/docs/Web/API/EntityReference">EntityReference</a></td> - <td>実体参照名</td> - </tr> - <tr> - <td><a href="/ja/docs/Web/API/Notation">Notation</a></td> - <td>記法名</td> - </tr> - <tr> - <td><a href="/ja/docs/DOM/ProcessingInstruction">ProcessingInstruction</a></td> - <td><a href="/ja/docs/DOM/ProcessingInstruction.target"><code>ProcessingInstruction.target</code></a> と同じ</td> - </tr> - <tr> - <td>Text</td> - <td>"#text"</td> - </tr> - </tbody> -</table> -<h2 id="Example" name="Example">例</h2> -<p>次のマークアップ文書が与えられているとします。</p> -<pre class="brush:html"><div id="d1">hello world</div> -<input type="text" id="t"/> -</pre> -<p>そして、以下のスクリプトがあると考えてください。</p> -<pre class="brush:js">var div1 = document.getElementById("d1"); -var text_field = document.getElementById("t"); - -text_field.value = div1.nodeName; -</pre> -<p>XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。</p> -<p>注意: <a href="/ja/docs/DOM/element.tagName"><code>tagName</code></a> プロパティが使用された場合、<code>nodeName</code> は <code>tagName</code> と同じ値になります。<code>tagName</code> が未定義 (<code>undefined</code>) の時 <code>nodeName</code> はテキストノードである <code>#text</code> を返します。</p> -<h2 id="Specifications" name="Specifications">仕様</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> -</ul> diff --git a/files/ja/web/api/node/nodename/index.md b/files/ja/web/api/node/nodename/index.md new file mode 100644 index 0000000000..ea9679714d --- /dev/null +++ b/files/ja/web/api/node/nodename/index.md @@ -0,0 +1,84 @@ +--- +title: Node.nodeName +slug: Web/API/Node/nodeName +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.nodeName +translation_of: Web/API/Node/nodeName +--- +{{APIRef("DOM")}} + +**`nodeName`** は {{domxref("Node")}} の読み取り専用プロパティで、現在のノードの名前を文字列で返します。 + +## 値 + +文字列です。ノードの種類によって、次のような値になります。 + +- {{domxref("Attr")}} + - : {{domxref("Attr.name")}} の値で、この属性の*修飾名*です。 +- {{domxref("CDATASection")}} + - : `"#cdata-section"` という文字列です。 +- {{domxref("Comment")}} + - : `"#comment"` という文字列です。 +- {{domxref("Document")}} + - : `"#document"` という文字列です。 +- {{domxref("DocumentFragment")}} + - : `"#document-fragment"` という文字列です。 +- {{domxref("DocumentType")}} + - : {{domxref("DocumentType.name")}} の値です。 +- {{domxref("Element")}} + - : {{domxref("Element.tagName")}} の値です。これは HTML 要素であればその要素のタグの*大文字の*名前であり、 XML 要素（SVG や MathML の要素）であればその要素のタグの*小文字の*名前です。 +- {{domxref("ProcessingInstruction")}} + - : {{domxref("ProcessingInstruction.target")}} の値です。 +- {{domxref("Text")}} + - : `"#text"` という文字列です。 + +## 例 + +この例では、様々なノードのノード名を表示します。 + +```html +こちらは HTML です。 +<div id="d1">Hello world</div> +<!-- コメントの例 --> +テキスト<span>テキスト</span> +テキスト<br/> +<svg height="20" width="20"> + <circle cx="10" cy="10" r="5" stroke="black" stroke-width="1" fill="red" /> +</svg> +<hr> +<output id="result">まだ出力されていません。</output> +``` + +また、スクリプトは以下の通りです。 + +```js +let node = document.getElementsByTagName("body")[0].firstChild; +let result = "ノード名:<br/>"; +while (node) { + result += node.nodeName + "<br/>"; + node = node.nextSibling +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "450")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.tagName")}} +- {{domxref("Attr.name")}} +- {{domxref("DocumentType.name")}} +- {{domxref("ProcessingInstruction.target")}} diff --git a/files/ja/web/api/node/nodetype/index.html b/files/ja/web/api/node/nodetype/index.html deleted file mode 100644 index 135f0f95c7..0000000000 --- a/files/ja/web/api/node/nodetype/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Node.nodeType -slug: Web/API/Node/nodeType -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/Node/nodeType ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ノードの種類を表す整数のコードを返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType; -</pre> -<p><code>type</code> は以下の内の何れかの unsigned short 型の値となります。</p> -<table> - <thead> - <tr> - <th scope="col">名称</th> - <th scope="col">値</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>ELEMENT_NODE</code></td> - <td>1</td> - </tr> - <tr> - <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline}}</td> - <td>2</td> - </tr> - <tr> - <td><code>TEXT_NODE</code></td> - <td>3</td> - </tr> - <tr> - <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline}}</td> - <td>4</td> - </tr> - <tr> - <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline}}</td> - <td>5</td> - </tr> - <tr> - <td><code>ENTITY_NODE</code> {{deprecated_inline}}</td> - <td>6</td> - </tr> - <tr> - <td><code>PROCESSING_INSTRUCTION_NODE</code></td> - <td>7</td> - </tr> - <tr> - <td><code>COMMENT_NODE</code></td> - <td>8</td> - </tr> - <tr> - <td><code>DOCUMENT_NODE</code></td> - <td>9</td> - </tr> - <tr> - <td><code>DOCUMENT_TYPE_NODE</code></td> - <td>10</td> - </tr> - <tr> - <td><code>DOCUMENT_FRAGMENT_NODE</code></td> - <td>11</td> - </tr> - <tr> - <td><code>NOTATION_NODE</code> {{deprecated_inline}}</td> - <td>12</td> - </tr> - </tbody> -</table> -<h2 id="Example" name="Example">例</h2> -<p>次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。</p> -<pre class="brush:js">var node = document.documentElement.firstChild; - -if (node.nodeType != Node.COMMENT_NODE) - console.log("※社内コーディングルールに沿ったコメントを記述して下さい。"); -</pre> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li> - <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li> -</ul> diff --git a/files/ja/web/api/node/nodetype/index.md b/files/ja/web/api/node/nodetype/index.md new file mode 100644 index 0000000000..099e980805 --- /dev/null +++ b/files/ja/web/api/node/nodetype/index.md @@ -0,0 +1,74 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.nodeType +translation_of: Web/API/Node/nodeType +--- +{{APIRef("DOM")}} + +**`nodeType`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティであり、整数値でこのノードがなんであるかを識別します。これは様々なノードの種類、例えば {{domxref("Element", "elements")}}, {{domxref("Text", "text")}}, {{domxref("Comment", "comments")}} を見分けます。 + +## 値 + +整数値で、このノードの種類を識別します。可能な値は次の通りです。 + +- `Node.ELEMENT_NODE` (`1`) + - : {{HTMLElement("p")}} や {{HTMLElement("div")}} などの {{domxref("Element")}} ノードです。 +- `Node.ATTRIBUTE_NODE` (`2`) + - : {{domxref("Element")}} の {{domxref("Attr", "Attribute")}} ノードです。 +- `Node.TEXT_NODE` (`3`) + - : {{domxref("Element")}} や {{domxref("Attr")}} の中に存在する {{domxref("Text")}} です。 +- `Node.CDATA_SECTION_NODE`(`4`) + - : `<!CDATA[[ … ]]>` のような {{domxref("CDATASection")}} です。 +- `Node.PROCESSING_INSTRUCTION_NODE` (`7`) + - : `<?xml-stylesheet … ?>` のような XML 文書の {{domxref("ProcessingInstruction")}} です。 +- `Node.COMMENT_NODE` (`8`) + - : `<!-- … -->` のような {{domxref("Comment")}} ノードです。 +- `Node.DOCUMENT_NODE` (`9`) + - : {{domxref("Document")}} ノードです。 +- `Node.DOCUMENT_TYPE_NODE` (`10`) + - : `<!DOCTYPE html>` のような {{domxref("DocumentType")}} ノードです。 +- `Node.DOCUMENT_FRAGMENT_NODE` (`11`) + - : A {{domxref("DocumentFragment")}} node. + +`Node.ENTITY_REFERENCE_NODE` (`5`), `Node.ENTITY_NODE` (`6`), `Node.NOTATION_NODE` (`12`) は非推奨になっており、使用されなくなっています。 + +## 例 + +## 様々な種類のノード + +```js +document.nodeType === Node.DOCUMENT_NODE; // true +document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true + +document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true + +const p = document.createElement("p"); +p.textContent = "昔々…"; + +p.nodeType === Node.ELEMENT_NODE; // true +p.firstChild.nodeType === Node.TEXT_NODE; // true +``` + +### コメント + +次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。 + +```js +const node = document.documentElement.firstChild; +if (node.nodeType !== Node.COMMENT_NODE) { + console.warn("コメントを入れてください。"); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/nodevalue/index.html b/files/ja/web/api/node/nodevalue/index.html deleted file mode 100644 index 2cfbbf795f..0000000000 --- a/files/ja/web/api/node/nodevalue/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Node.nodeValue -slug: Web/API/Node/nodeValue -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/nodeValue ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ノードの値を取得または設定します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue</pre> -<p><code><var>node</var>.nodeValue</code> が存在する場合、 <code>value</code> はノードの値を含む文字列です。</p> -<h2 id="Notes" name="Notes">注記</h2> -<p>document 自身は、 <code>nodeValue</code> は <code>nullを返します。</code>text</p> -<p>ノード、 <code>comment</code> ノード、<code>CDATA</code> ノードでは、 <code>nodeValue</code> はノードの中身を返します。 <code>attribute</code> ノードは属性値を返します。</p> -<p> </p> -<p>以下の表は、 様々なノードの戻り値を表しています。</p> -<table> - <thead> - <tr> - <th>Attr</th> - <th>attribute の値</th> - </tr> - </thead> - <tbody> - <tr> - <td>CDATASection</td> - <td>CDATA Sectionの中身</td> - </tr> - <tr> - <td>コメント</td> - <td>commentの中身</td> - </tr> - <tr> - <td>Document</td> - <td>null</td> - </tr> - <tr> - <td>DocumentFragment</td> - <td>null</td> - </tr> - <tr> - <td>DocumentType</td> - <td>null</td> - </tr> - <tr> - <td>Element</td> - <td>null</td> - </tr> - <tr> - <td>NamedNodeMap</td> - <td>null</td> - </tr> - <tr> - <td>EntityReference</td> - <td>null</td> - </tr> - <tr> - <td>Notation</td> - <td>null</td> - </tr> - <tr> - <td>ProcessingInstruction</td> - <td>ターゲットを除く全体の内容</td> - </tr> - <tr> - <td>Text</td> - <td>the text nodeの中身</td> - </tr> - </tbody> -</table> -<p><code>nodeValue</code> が <code>null</code> と定義されている場合、値を設定しても効果はありません。</p> -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li> -</ul> diff --git a/files/ja/web/api/node/nodevalue/index.md b/files/ja/web/api/node/nodevalue/index.md new file mode 100644 index 0000000000..2d254b0a33 --- /dev/null +++ b/files/ja/web/api/node/nodevalue/index.md @@ -0,0 +1,67 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - プロパティ + - リファレンス +browser-compat: api.Node.nodeValue +translation_of: Web/API/Node/nodeValue +--- +{{APIRef("DOM")}} + +**`nodeValue`** は {{domxref("Node")}} インターフェイスのプロパティで、現在のノードの値を返したり設定したりします。 + +## Value + +もしあれば、現在のノードの値を含む文字列です。 +文書自身においては、 `nodeValue` は `null` を返します。 +テキスト、コメント、 CDATA ノードでは、 `nodeValue` はノードの内容を返します。 +属性ノードにおいては、属性の値が返します。 + +以下の表はノードの種類別の返値を表しています。 + +| ノード | nodeValue の値 | +| ------------------------------------ | ----------------------------------- | +| {{domxref("CDATASection")}} | CDATA セクションの中身 | +| {{domxref("Comment")}} | コメントの中身 | +| {{domxref("Document")}} | `null` | +| {{domxref("DocumentFragment")}} | `null` | +| {{domxref("DocumentType")}} | `null` | +| {{domxref("Element")}} | `null` | +| {{domxref("NamedNodeMap")}} | `null` | +| {{domxref("ProcessingInstruction")}} | 対象を除く内容物全体 | +| {{domxref("Text")}} | テキストノードの中身 | + +> **Note:** `nodeValue` が `null` になると定義されている場合は、設定しても効果がありません。 + +## 例 + +```html +<div id="d1">Hello world</div> +<!-- コメントの例 --> +<output id="result">結果が出ていません。</output> +``` + +また、以下のスクリプトを参照してください。 + +```js +let node = document.getElementsByTagName("body")[0].firstChild; +let result = "<br/>ノード名:<br/>"; +while (node) { + result += node.nodeName + "の値: " + node.nodeValue + "<br/>"; + node = node.nextSibling +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "250")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/normalize/index.html b/files/ja/web/api/node/normalize/index.html deleted file mode 100644 index 83026ac378..0000000000 --- a/files/ja/web/api/node/normalize/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Node.normalize -slug: Web/API/Node/normalize -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/normalize ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>element</em>.normalize(); -</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js;highlight:10;">var wrapper = document.createElement("div"); - -wrapper.appendChild( document.createTextNode("Part 1 ") ); -wrapper.appendChild( document.createTextNode("Part 2 ") ); - -// wrapper.childNodes[0].textContent === "Part 1 " -// wrapper.childNodes[1].textContent === "Part 2 " -// この時点で、wrapper の 子ノード数は 2 です。 wrapper.childNodes.length === 2 - -wrapper.normalize(); // 正規化 - -// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1 -// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2" -</pre> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Text.splitText"><code>Text.splitText</code></a></li> -</ul> diff --git a/files/ja/web/api/node/normalize/index.md b/files/ja/web/api/node/normalize/index.md new file mode 100644 index 0000000000..7432a8f979 --- /dev/null +++ b/files/ja/web/api/node/normalize/index.md @@ -0,0 +1,73 @@ +--- +title: Node.normalize() +slug: Web/API/Node/normalize +tags: + - メソッド + - リファレンス +browser-compat: api.Node.normalize +translation_of: Web/API/Node/normalize +--- +{{APIRef("DOM")}} + +**`normalize()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定されたノードとその下のツリーを*正規化された*形にします。 +正規化されたサブツリーでは、サブツリー内に空のテキストノードがなくなり、隣り合うテキストノードがなくなります。 + +## 構文 + +```js +normalize(); +``` + +### 引数 + +なし。 + +### 返値 + +なし。 + +## 例 + +```html +<output id="result"></output> +``` + +```js +let wrapper = document.createElement("div"); + +wrapper.appendChild( document.createTextNode("Part 1 ") ); +wrapper.appendChild( document.createTextNode("Part 2 ") ); + +let node = wrapper.firstChild; +let result = "正規化前:<br/>"; +while (node) { + result += " " + node.nodeName + ": " + node.nodeValue + "<br/>"; + node = node.nextSibling; +} + +wrapper.normalize(); + +node = wrapper.firstChild; +result += "<br/><br/>正規化後:<br/>"; +while (node) { + result += " " + node.nodeName + ": " + node.nodeValue + "<br/>"; + node = node.nextSibling; +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "170")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 逆の操作である {{domxref("Text.splitText()")}} diff --git a/files/ja/web/api/node/ownerdocument/index.html b/files/ja/web/api/node/ownerdocument/index.html deleted file mode 100644 index f6eef4f570..0000000000 --- a/files/ja/web/api/node/ownerdocument/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Node.ownerDocument -slug: Web/API/Node/ownerDocument -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/ownerDocument ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p><code>ownerDocument</code> プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>document</var> = element.ownerDocument -</pre> - -<ul> - <li><code>document</code> : 指定要素の祖先である {{domxref("document")}} オブジェクト</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得 -var html = doc.documentElement; // owner のドキュメント要素を取得 - -alert(html); // [object HTMLHtmlElement] -</pre> - -<h2 id="Notes" name="Notes">注記</h2> - -<p>このプロパティによって返される <code>document</code> オブジェクトは、実際の HTML 文書中ですべての子ノードの属するメインオブジェクトです。<code>document</code> ノード自身に対しこのプロパティを用いた場合、戻り値は <code>null</code> となります。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> - <td>{{Spec2("DOM3 Core")}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> - <td>{{Spec2("DOM2 Core")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.ownerDocument")}}</p> diff --git a/files/ja/web/api/node/ownerdocument/index.md b/files/ja/web/api/node/ownerdocument/index.md new file mode 100644 index 0000000000..75cf471b02 --- /dev/null +++ b/files/ja/web/api/node/ownerdocument/index.md @@ -0,0 +1,36 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.ownerDocument +translation_of: Web/API/Node/ownerDocument +--- +{{APIRef("DOM")}} + +**`ownerDocument`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最上位の文書オブジェクトを返します。 + +## 値 + +すべての子ノードが作成された最上位の {{domxref("Document")}} オブジェクトです。 + +このプロパティが文書自身のノードで使用された場合、値は `null` になります。 + +## 例 + +```js +// 指定された "p" から、文書オブジェクトの子である最上位の HTML を取得します。 + +const d = p.ownerDocument; +const html = d.documentElement; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/parentelement/index.html b/files/ja/web/api/node/parentelement/index.html deleted file mode 100644 index e121601c07..0000000000 --- a/files/ja/web/api/node/parentelement/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Node.parentElement -slug: Web/API/Node/parentElement -tags: - - DOM - - Element - - Node - - Property - - parent -translation_of: Web/API/Node/parentElement ---- -<div> -<div>{{APIRef("DOM")}}</div> -</div> - -<p><strong>Node.parentElement</strong>のread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、<code>null</code> が返ります。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>parentElement</var> = <em>node</em>.parentElement</pre> - -<p><code>parentElement</code>は現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトか<code>nullです</code>。</p> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">if (node.parentElement) { - node.parentElement.style.color = "red"; -}</pre> - -<h2 id="Specification" name="Specification">仕様</h2> - -<ul> - <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li> -</ul> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.parentElement")}}</p> - -<p>一部のブラウザーでは、<code>parentElement</code>プロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.parentNode")}}</li> -</ul> diff --git a/files/ja/web/api/node/parentelement/index.md b/files/ja/web/api/node/parentelement/index.md new file mode 100644 index 0000000000..8aa85b65f5 --- /dev/null +++ b/files/ja/web/api/node/parentelement/index.md @@ -0,0 +1,37 @@ +--- +title: Node.parentElement +slug: Web/API/Node/parentElement +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.parentElement +translation_of: Web/API/Node/parentElement +--- +{{APIRef("DOM")}} + +**`parentElement`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、この DOM ノードの親である要素 ({{DOMxRef("Element")}}) を返します。このノードに親ノードがないか、親が DOM の {{DOMxRef("Element")}} でない場合は `null` を返します。 + +## 値 + +現在のノードの親ノードである {{domxref("Element")}} を返します。そのようなものがない場合は `null` を返します。 + +## 例 + +```js +if (node.parentElement) { + node.parentElement.style.color = "red"; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.parentNode")}} diff --git a/files/ja/web/api/node/parentnode/index.html b/files/ja/web/api/node/parentnode/index.html deleted file mode 100644 index 33ea858b0c..0000000000 --- a/files/ja/web/api/node/parentnode/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Node.parentNode -slug: Web/API/Node/parentNode -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node -translation_of: Web/API/Node/parentNode ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>指定されたノードの DOM ツリー内の親ノードを返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><var>parentNode</var> = <var>node</var>.parentNode -</pre> -<ul> - <li><code>parentNode</code> : 指定ノードの親ノード。要素の親ノードは、<code>Element</code> ノード、<code>Document</code> ノード、または <code>DocumentFragment</code> になります。</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">if (node.parentNode) { - // ツリー上に既に存在しない場合を除き、 - // ツリーからノードを削除します。 - node.parentNode.removeChild(node); -}</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p><code>parentNode</code> は、以下の<a href="/ja/docs/Web/API/Node.nodeType">ノードタイプ</a>については <code>null</code> を返します : <code>Attr</code> 、<code>Document</code> 、<code>DocumentFragment</code> 、<code>Entity</code> 、<code>Notation</code></p> -<p>また、ノードが作成された直後でまだツリーに加えられていない場合も <code>null</code> を返します。</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.parentNode")}}</p> - -<h2 id="Specification" name="Specification">仕様書</h2> -<ul> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> -</ul> -<h2 id="See_also" name="See_also">関連情報</h2> -<ul> - <li>{{Domxref("element.firstChild")}}</li> - <li>{{Domxref("element.lastChild")}}</li> - <li>{{Domxref("element.childNodes")}}</li> - <li>{{Domxref("element.nextSibling")}}</li> - <li>{{Domxref("element.previousSibling")}}</li> - <li>{{Domxref("Node.removeChild")}}</li> -</ul> diff --git a/files/ja/web/api/node/parentnode/index.md b/files/ja/web/api/node/parentnode/index.md new file mode 100644 index 0000000000..d50c111b37 --- /dev/null +++ b/files/ja/web/api/node/parentnode/index.md @@ -0,0 +1,47 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.parentNode +translation_of: Web/API/Node/parentNode +--- +{{APIRef("DOM")}} + +**`parentNode`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、 DOM ツリー内の特定のノードの親ノードを返します。 + +`Document` および `DocumentFragment` [ノード](/ja/docs/Web/API/Node/nodeType)には親が付くことはないので、 `parentNode` は常に `null` になります。 +ノードが生成されてからツリーに割り当てられていない場合も `null` を返します。 + +## 値 + +現在のノードの親に当たる {{domxref("Node")}} です。要素の親になるのは `Element` ノード、 `Document` ノード、 `DocumentFragment` ノードの何れかです。 + +## 例 + +```js +if (node.parentNode) { + // ノードがツリーの中にある場合は、ツリーから取り除く + node.parentNode.removeChild(node); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Domxref("Node.firstChild")}} +- {{Domxref("Node.lastChild")}} +- {{Domxref("Node.childNodes")}} +- {{Domxref("Node.nextSibling")}} +- {{Domxref("Node.parentElement")}} +- {{Domxref("Node.previousSibling")}} +- {{Domxref("Node.removeChild")}} diff --git a/files/ja/web/api/node/previoussibling/index.html b/files/ja/web/api/node/previoussibling/index.html deleted file mode 100644 index 5506f5fd86..0000000000 --- a/files/ja/web/api/node/previoussibling/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Node.previousSibling -slug: Web/API/Node/previousSibling -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/previousSibling ---- -<div>{{ApiRef}}</div> - -<h2 id="Summary" name="Summary">概要</h2> - -<p>指定のノードの親ノードの <a href="/ja/docs/Web/API/Node.childNodes"><code>childNodes</code></a> リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は <code>null</code> を返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>previousNode</var> = <var>node</var>.previousSibling; -</pre> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">// <a><b1 id="b1"/><b2 id="b2"/></a> - -alert( document.getElementById("b1").previousSibling ); // null -alert( document.getElementById("b2").previousSibling.id ); // "b1" -</pre> - -<h2 id="Notes" name="Notes">注記</h2> - - <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> - -<p><code>childNode</code> リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。</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-previousSibling">DOM Level 1 Core: previousSibling</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li> -</ul> diff --git a/files/ja/web/api/node/previoussibling/index.md b/files/ja/web/api/node/previoussibling/index.md new file mode 100644 index 0000000000..cec77e3af9 --- /dev/null +++ b/files/ja/web/api/node/previoussibling/index.md @@ -0,0 +1,75 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +tags: + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.previousSibling +translation_of: Web/API/Node/previousSibling +--- +{{APIRef("DOM")}} + +**`previousSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親ノードの {{domxref("Node.childNodes", "childNodes")}} リスト内で、直前にある ノードを返します。指定されたノードがリストの先頭にあった倍は `null` を返します。 + +> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。 +> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。 +> +> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。 +> +> [`previousElementSibling`](/ja/docs/Web/API/Element/previousElementSibling) を使用すると、（テキストノードやその他の要素以外のノードを飛ばして）次の要素を取得することができます。 +> +> 子ノードのリストで反対方向に移動する場合は、 [Node.nextSibling](/ja/docs/Web/API/Node/nextSibling) を使用してください。 + +## 値 + +現在のノードの直前のノードを表す {{domxref("Node")}} です。 +存在しない場合は `null` です。 + +## 例 + +次の例では、要素にテキストノードがある場合とない場合の `previousSibling` の動作を示しています。 + +### 最初の例 + +この例では、一連の `img` 要素が互いに隣り合っており、その間にホワイトスペースがありません。 + +```html +<img id="b0"><img id="b1"><img id="b2"> +``` + +```js +document.getElementById("b1").previousSibling; // <img id="b0"> +document.getElementById("b2").previousSibling.id; // "b1" +``` + +### 2 番目の例 + +この例では、 `img` 要素の間にホワイトスペースのテキストノード（改行）があります。 + +```html +<img id="b0"> +<img id="b1"> +<img id="b2"> +``` + +```js +document.getElementById("b1").previousSibling; // #text +document.getElementById("b1").previousSibling.previousSibling; // <img id="b0"> +document.getElementById("b2").previousSibling.previousSibling; // <img id="b1"> +document.getElementById("b2").previousSibling; // #text +document.getElementById("b2").previousSibling.id; // undefined +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.nextSibling")}} +- {{domxref("Element.previousElementSibling")}} diff --git a/files/ja/web/api/node/removechild/index.html b/files/ja/web/api/node/removechild/index.html deleted file mode 100644 index ff64604414..0000000000 --- a/files/ja/web/api/node/removechild/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Node.removeChild -slug: Web/API/Node/removeChild -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/removeChild ---- -<p><code><strong>Node.removeChild()</strong></code> メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>); -<strong>または</strong> -<em>node</em>.removeChild(<em>child</em>); -</pre> - -<ul> - <li><code>child</code> は DOM から取り除く、子ノードです。</li> - <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">node</span></font> は <code>child</code> の親ノードです。</li> - <li><code>oldChild</code> は 取り除かれた子ノードへの参照を保持します。 <code>oldChild</code> === <code>child</code> です。</li> -</ul> - -<p>取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 <code>oldChild</code> オブジェクト参照を通じて、後でコード中で再利用することができます。</p> - -<p>しかし、第二の構文では <code>oldChild</code> の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから <a href="/ja/docs/Web/JavaScript/Memory_Management">自動的に削除</a>されます。</p> - -<p><code>child</code> が実際には <code>element</code> ノードの子ではない場合、このメソッドは例外を発生します。これは <code>child</code> が呼び出し時には実際に <code>element</code> の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。</p> - -<p>このメソッドでは、2つの異なる方法で例外が発生します。</p> - -<ol> - <li> - <p><code>child</code> が実際に <code>element</code> の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。</p> - - <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p> - </li> - <li> - <p><code>child</code> がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。<br> - <br> - <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p> - </li> -</ol> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: html"><!-- 対象とする HTML のコード --> -<div id="top" > </div> - -<script type="text/javascript"> - var top = document.getElementById("top"); - var nested = document.getElementById("nested"); - - var garbage = top.removeChild(nested); //Test Case 2: the method throws the exception (2) - -</script> - -<!--Sample HTML code--> -<div id="top"> - <div id="nested"></div> -</div> - -<script type="text/javascript"> - var top = document.getElementById("top"); - var nested = document.getElementById("nested"); - - var garbage = top.removeChild(nested); // This first call remove correctly the node - - // ...... - garbage = top.removeChild(nested); // Test Case 1: the method in the second call here, throws the exception (1) - -</script> - -</pre> - -<pre class="brush: html"><!--Sample HTML code--> - -<div id="top"> - <div id="nested"></div> -</div> -</pre> - -<pre class="brush:js">// 親ノードから指定した子要素を除去 -var d = document.getElementById("top"); -var d_nested = document.getElementById("nested"); -var throwawayNode = d.removeChild(d_nested); -</pre> - -<pre class="brush:js">// 親要素が不明、不定の場合の方法 -var node = document.getElementById("nested"); -if (node.parentNode) { - node.parentNode.removeChild(node); -} -</pre> - -<pre class="brush:js">// 要素の全ての子を除去 -var element = document.getElementById("top"); -while (element.firstChild) { - element.removeChild(element.firstChild); -} -</pre> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<ul> - <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> -</ul> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("api.Node.removeChild")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.replaceChild")}}</li> - <li>{{domxref("Node.parentNode")}}</li> - <li>{{domxref("ChildNode.remove")}}</li> -</ul> - -<div>{{APIRef("DOM")}}</div> diff --git a/files/ja/web/api/node/removechild/index.md b/files/ja/web/api/node/removechild/index.md new file mode 100644 index 0000000000..335eea5b85 --- /dev/null +++ b/files/ja/web/api/node/removechild/index.md @@ -0,0 +1,125 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +tags: + - メソッド + - リファレンス +browser-compat: api.Node.removeChild +translation_of: Web/API/Node/removeChild +--- +{{APIRef("DOM")}} + +**`removeChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。 + +> **Note:** 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。 +> 後のコードで再利用することができます。 +> +> `removeChild()` の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから[自動的に削除](/en-US/docs/Web/JavaScript/Memory_Management)されます。 + +{{domxref("Node.cloneNode()")}} とは異なり、返値は関連付けられた {{domxref("EventListener")}} オブジェクトを保持します。 + +## 構文 + +```js +removeChild(child); +``` + +### 引数 + +- `child` + - : {{domxref("Node")}} で、 DOM から取り除きたい子ノードを指定します。 + +### 例外 + +- `NotFoundError` {{domxref("DOMException")}} + - : `child` がこのノードの子ではない場合に発生します。 +- {{jsxref("TypeError")}} + - : `child` が `null` であった場合に発生します。 + +## 例 + +### 単純な例 + +この HTML を使います。 + +```html +<div id="top"> + <div id="nested"></div> +</div> +``` + +親ノードが分かる場合に、指定された要素を取り除きます。 + +```js +let d = document.getElementById("top"); +let d_nested = document.getElementById("nested"); +let throwawayNode = d.removeChild(d_nested); +``` + +親ノードが分からないときに指定された要素を取り除きます。 + +```js +let node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +} +``` + +ある要素からすべての子を削除します。 + +```js +let element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +} +``` + +### TypeError が発生する例 + +```html +<!--HTML コードの例--> +<div id="top"> </div> +``` + +```js +let top = document.getElementById("top"); +let nested = document.getElementById("nested"); + +// TypeError が発生 +let garbage = top.removeChild(nested); +``` + +### NotFoundError が発生する例 + +```html +<!--HTML コードの例--> +<div id="top"> + <div id="nested"></div> +</div> +``` + +```js +let top = document.getElementById("top"); +let nested = document.getElementById("nested"); + +// 最初の呼び出しでは正しくノードを取り除く +let garbage = top.removeChild(nested); + +// NotFoundError が発生 +garbage = top.removeChild(nested); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.parentNode")}} +- {{domxref("Element.remove()")}} +- {{domxref("Node.cloneNode()")}} diff --git a/files/ja/web/api/node/replacechild/index.html b/files/ja/web/api/node/replacechild/index.html deleted file mode 100644 index 2c69ea2114..0000000000 --- a/files/ja/web/api/node/replacechild/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Node.replaceChild -slug: Web/API/Node/replaceChild -tags: - - API - - DOM - - Method - - Node - - Reference -translation_of: Web/API/Node/replaceChild ---- -<div>{{ApiRef("DOM")}}</div> - -<p><strong><code>Node.replaceChild()</code></strong> メソッドは指定ノードの子ノードを別のノードに置き換えます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>replacedNode</var> = <var>parentNode</var>.replaceChild(<var>newChild</var>, <var>oldChild</var>); -</pre> - -<ul> - <li><code>newChild</code> : <code>oldChild</code> を置き換える新しいノード（既存のノードは先に取り除かれます）</li> - <li><code>oldChild</code> : 置き換えられる既存ノード</li> - <li><code>replacedNode</code> : 置き換えられたノード（<code>oldChild</code> と同じノード）</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">// <div> -// <span id="childSpan">foo bar</span> -// </div> - -// ID も属性も内容も持たない空要素を生成 -var sp1 = document.createElement("span"); - -// 生成したノードに id 属性 'newSpan' を付与 -sp1.setAttribute("id", "newSpan"); - -// テキストノードを生成 -var sp1_content = document.createTextNode("新しい span 要素"); - -// 生成したテキストノードを先の空要素の子ノードとして配置 -sp1.appendChild(sp1_content); - -// 置換に先んじ、参照を代入 -var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード -var parentDiv = sp2.parentNode; // 置換対象ノードの親要素 - -// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換 -parentDiv.replaceChild(sp1, sp2); - - -// 上記コード実行後のノードは以下の様になります: -// <div> -// <span id="newSpan">新しい span 要素</span> -// </div> -</pre> - -<h2 id="Specification" name="Specification">仕様書</h2> - -<ul> - <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li> - <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li> -</ul> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> - -<p>{{Compat("api.Node.replaceChild")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.removeChild")}}</li> -</ul> diff --git a/files/ja/web/api/node/replacechild/index.md b/files/ja/web/api/node/replacechild/index.md new file mode 100644 index 0000000000..da96d01cf6 --- /dev/null +++ b/files/ja/web/api/node/replacechild/index.md @@ -0,0 +1,96 @@ +--- +title: Node.replaceChild +slug: Web/API/Node/replaceChild +tags: + - メソッド + - リファレンス +browser-compat: api.Node.replaceChild +translation_of: Web/API/Node/replaceChild +--- +{{APIRef("DOM")}} + +**`replaceChild()`** は {{domxref("Node")}} 要素のメソッドで、この（親）ノードの中の子ノードを置き換えます。 + +**`Node.replaceChild()`** メソッドは指定ノードの子ノードを別のノードに置き換えます。 + +## 構文 + +```js +replaceChild(newChild, oldChild); +``` + +### 引数 + +- `newChild` + - : `oldChild` を置き換える新しいノードです。 + > **Warning:** 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。 +- `oldChild` + - : 置き換えられる子ノードです。 + +> **Note:** 引数の順序で、*新しい*ものの前に*古い*ものが来るのは異例です。 +[`Element.replaceWith()`](/ja/docs/Web/API/Element/replaceWith) は、要素であるノードのみに適用されるものですが、読んだり使用したりしやすいかもしれません。 + +### 返値 + +置き換えられた {{domxref("Node")}} です。これは `oldChild` と同じノードです。 + +### 例外 + +- `HierarchyRequestError` {{domxref("DOMException")}} + - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。 + - `oldChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。 + - `oldChild` を `newChild` で置き換えると循環参照になる場合。すなわち `newChild` がこのノードの祖先である場合。 + - `newChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。 + - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。 + - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。 + - このノードの親が {{domxref("Document")}} で `newChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。 + - `oldChild` を `newChild` で置き換えると、 {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。 + - `oldChild` を `newChild` で置き換えると、 {{domxref("Element")}} ノードが {{domxref("DocumentType")}} の前になる場合。 +- `NotFoundError` {{domxref("DOMException")}} + - : `oldChild` の親ノードが現在のノードではない場合に発生します。 + +## 例 + +```js +// 前提: +// <div> +// <span id="childSpan">foo bar</span> +// </div> + +// ID も属性も内容も持たない空要素を生成 +const sp1 = document.createElement("span"); + +// 生成したノードに id 属性 'newSpan' を付与 +sp1.id = "newSpan"; + +// 新しい要素にいくらかの内容を作成 +const sp1_content = document.createTextNode("新しい置換 span 要素"); + +// その内容を新しい要素に適用 +sp1.appendChild(sp1_content); + +// 置き換えられる既存のノードの参照を作る +const sp2 = document.getElementById("childSpan"); +const parentDiv = sp2.parentNode; + +// 既存のノード sp2 を新しい span 要素 sp1 で置換 +parentDiv.replaceChild(sp1, sp2); + +// 結果: +// <div> +// <span id="newSpan">新しい置換 span 要素</span> +// </div> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.removeChild")}} +- {{domxref("Element.replaceWith")}} diff --git a/files/ja/web/api/node/textcontent/index.html b/files/ja/web/api/node/textcontent/index.html deleted file mode 100644 index 3f90221d9f..0000000000 --- a/files/ja/web/api/node/textcontent/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Node.textContent -slug: Web/API/Node/textContent -tags: - - API - - DOM - - Node - - Property - - Reference - - プロパティ -translation_of: Web/API/Node/textContent ---- -<div>{{APIRef("DOM")}}</div> - -<p><code><strong>textContent</strong></code> は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。</p> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> <code>textContent</code> と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは<a href="#Differences_from_innerText">重要な点が異なります</a>。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">let <var>text</var> = <var>someNode</var>.textContent -<var>someOtherNode</var>.textContent = <var>string</var> -</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>文字列または {{jsxref("null")}}</p> - -<h2 id="Description" name="Description">説明</h2> - -<p><code>textContent</code> の値は状況によります。</p> - -<ul> - <li>ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 <code>textContent</code> は {{jsxref("null")}} を返します。 - - <div class="note"><strong>メモ:</strong> 文書全体の<em>すべての</em>テキストと <a href="/ja/docs/Web/API/CDATASection">CDATA データ</a>を取得するには、 <code><a href="/ja/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> を使用する方法があります。</div> - </li> - <li>ノードが <a href="/ja/docs/Web/API/CDATASection">CDATA セクション</a>、コメント、<a href="/ja/docs/Web/API/ProcessingInstruction">処理命令ノード</a>、 <a href="/ja/docs/Web/API/Text">テキストノード</a>の場合、 <code>textContent</code> はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。</li> - <li>他のノードタイプの場合、<code>textContent</code> は、コメントと処理命令ノードを除く、すべての子ノードの <code>textContent</code> 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)</li> -</ul> - -<p>ノードの <code>textContent</code> を設定すると、そのノードの<em>すべて</em>の子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。</p> - -<h3 id="Differences_from_innerText" name="Differences_from_innerText">innerText との違い</h3> - -<p><code>Node.textContent</code> と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。</p> - -<ul> - <li><code>textContent</code> は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、<em>すべて</em>の要素の内容を取得します。一方、 <code>innerText</code> は「人間が読める」要素のみを示します。</li> - <li><code>textContent</code> はノード内のすべての要素を返します。一方、 <code>innerText</code> はスタイルを反映し、「非表示」の要素のテキストを返しません。 - <ul> - <li>もっと言えば、 <code>innerText</code> は CSS のスタイルを考慮するので、 <code>innerText</code> の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)</li> - </ul> - </li> - <li><code>textContent</code> とは異なり、 <code>innerText</code> を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを<em>完全に破棄します</em>。他の要素または同じ要素にノードをもう一度挿入することは不可能です。</li> -</ul> - -<h3 id="Differences_from_innerHTML" name="Differences_from_innerHTML">innerHTML との違い</h3> - -<p>{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 <code>innerHTML</code> を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 <code>textContent</code> は値が HTML として解析されないので性能が良くなります。</p> - -<p>さらに、<code>textContent</code> を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。</p> - -<h2 id="Example" name="Example">例</h2> - -<p>以下のような HTML の断片があります。</p> - -<pre class="brush: html"><div id="divA">This is <span>some</span> text!</div></pre> - -<p>... <code>textContent</code> を使用して、要素のテキストの内容を取得することができます。</p> - -<pre class="brush: js">let text = document.getElementById('divA').textContent; -// 変数 text の値は 'This is some text!' となります。</pre> - -<p>... また、要素のテキストを設定します。</p> - -<pre class="brush: js">document.getElementById('divA').textContent = 'This text is different!'; -// divA の HTML は次のようになります。 -// <div id="divA">This text is different!</div> -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Node.textContent")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("HTMLElement.innerText")}}</li> - <li>{{domxref("Element.innerHTML")}}</li> - <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (ブログ投稿)</li> -</ul> diff --git a/files/ja/web/api/node/textcontent/index.md b/files/ja/web/api/node/textcontent/index.md new file mode 100644 index 0000000000..1777a5cd21 --- /dev/null +++ b/files/ja/web/api/node/textcontent/index.md @@ -0,0 +1,81 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - プロパティ + - リファレンス +browser-compat: api.Node.textContent +translation_of: Web/API/Node/textContent +--- +{{APIRef("DOM")}} + +**`textContent`** は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。 + +> **Note:** `textContent` と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、 2 つのプロパティは[重要な点が異なります](#innertext_との違い)。 + +## 値 + +文字列または {{jsxref("null")}} です。値は場面によります。 + +- ノードが {{domxref("document")}} または {{glossary("doctype")}} である場合、 `textContent` は {{jsxref("null")}} を返します。 + + > **Note:** 文書全体の*すべての*テキストと [CDATA データ](/ja/docs/Web/API/CDATASection)を取得するには、 `document.documentElement.textContent` を使用する方法があります。 + +- ノードが [CDATA セクション](/ja/docs/Web/API/CDATASection)、コメント、[処理命令ノード](/ja/docs/Web/API/ProcessingInstruction)、 [テキストノード](/ja/docs/Web/API/Text)の場合、 `textContent` はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。 +- 他のノード型の場合、`textContent` は、コメントと処理命令ノードを除く、すべての子ノードの `textContent` 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。） + +> **Warning:** ノードの `textContent` を設定すると、そのノードの*すべて*の子が取り除かれて、指定された値を持つ単一のテキストノードに置き換わります。 + +### innerText との違い + +`Node.textContent` と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。 + +- `textContent` は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、*すべて*の要素の中身を取得します。一方、 `innerText` は「人間が読める」要素のみを示します。 +- `textContent` はノード内のすべての要素を返します。一方、 `innerText` はスタイルを反映し、「非表示」の要素のテキストは返しません。 + + - もっと言えば、 `innerText` は CSS のスタイルを考慮するので、 `innerText` の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。) + +- `textContent` とは異なり、 `innerText` を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを*完全に破棄します*。他の要素または同じ要素にノードをもう一度挿入することは不可能です。 + +### innerHTML との違い + +{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 `innerHTML` を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 `textContent` は値が HTML として解析されないので性能が良くなります。 + +さらに、`textContent` を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。 + +## 例 + +以下のような HTML の断片があります。 + +```html +<div id="divA">This is <span>some</span> text!</div> +``` + +... `textContent` を使用して、要素のテキストの内容を取得することができます。 + +```js +let text = document.getElementById('divA').textContent; +// 変数 text の値は 'This is some text!' となります。 +``` + +... また、要素のテキストを設定します。 + +```js +document.getElementById('divA').textContent = 'This text is different!'; +// divA の HTML は次のようになります。 +// <div id="divA">This text is different!</div> +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLElement.innerText")}} +- {{domxref("Element.innerHTML")}} +- [More on differences between `innerText` and `textContent`](http://perfectionkills.com/the-poor-misunderstood-innerText/) (ブログ投稿) |