diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-02-27 15:00:03 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2022-03-06 14:10:33 +0900 |
commit | 38a18236aca758a3c29963a8654ab7c5d84dd9ca (patch) | |
tree | 42f601357e89261debd6931e1c9d211741a370b5 /files/ja/web | |
parent | 478de33ac5a748d403c77bed813546f57e53c05e (diff) | |
download | translated-content-38a18236aca758a3c29963a8654ab7c5d84dd9ca.tar.gz translated-content-38a18236aca758a3c29963a8654ab7c5d84dd9ca.tar.bz2 translated-content-38a18236aca758a3c29963a8654ab7c5d84dd9ca.zip |
2021/11/08 時点の英語版に同期
Diffstat (limited to 'files/ja/web')
-rw-r--r-- | files/ja/web/api/node/comparedocumentposition/index.md | 173 | ||||
-rw-r--r-- | files/ja/web/api/node/contains/index.md | 88 | ||||
-rw-r--r-- | files/ja/web/api/node/isdefaultnamespace/index.md | 96 | ||||
-rw-r--r-- | files/ja/web/api/node/isequalnode/index.md | 116 | ||||
-rw-r--r-- | files/ja/web/api/node/issupported/index.md | 87 | ||||
-rw-r--r-- | files/ja/web/api/node/removechild/index.md | 175 | ||||
-rw-r--r-- | files/ja/web/api/node/replacechild/index.md | 113 |
7 files changed, 429 insertions, 419 deletions
diff --git a/files/ja/web/api/node/comparedocumentposition/index.md b/files/ja/web/api/node/comparedocumentposition/index.md index 5865081c84..346dc65e73 100644 --- a/files/ja/web/api/node/comparedocumentposition/index.md +++ b/files/ja/web/api/node/comparedocumentposition/index.md @@ -1,118 +1,69 @@ --- -title: Node.compareDocumentPosition +title: Node.compareDocumentPosition() slug: Web/API/Node/compareDocumentPosition tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference + - メソッド + - リファレンス +browser-compat: api.Node.compareDocumentPosition 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 要素より前に記述されています。"); +{{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.log("head 要素は body 要素の前に配置しなくてはなりません。"); + console.error('<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> +``` + +> **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.md b/files/ja/web/api/node/contains/index.md index 2947ce92d1..6bcb67f897 100644 --- a/files/ja/web/api/node/contains/index.md +++ b/files/ja/web/api/node/contains/index.md @@ -1,56 +1,56 @@ --- -title: Node.contains +title: Node.contains() slug: Web/API/Node/contains tags: - - API - - DOM - - Method - - Node + - メソッド + - リファレンス +browser-compat: api.Node.contains translation_of: Web/API/Node/contains --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p><strong><code>Node.contains</code></strong> メソッドは指定ノードの子孫ノードに特定の子ノード(※自身も含む)が含まれるかどうかを示す真偽値を返します。</p> +**`contains()`** は {{domxref("Node")}} インターフェイスのメソッドで、あるノードが指定されたノードの子孫であるか、すなわち、このノード自体であるか、直接の子ノード ({{domxref("Node.childNodes", "childNodes")}}) の何れかであるか、直接の子ノードの子ノードの何れかであるか(以下同様)を示す論理値を返します。 -<h2 id="Syntax" name="Syntax">構文</h2> +> **Note:** ノードは自分自身に**含まれます**。 -<pre class="syntaxbox">node.contains( otherNode ) -</pre> +## 構文 -<h2 id="Example" name="Example">例</h2> +```js +contains(otherNode); +``` -<p>この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。<code>contains</code> は包括的かつ決定的であるため、body がそれ自身を含むかどうかは <code>isInPage</code> の意図ではないため明示的に <code>false</code> を返します。</p> +### 引数 -<pre class="brush:js">function isInPage(node) { +- `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); -}</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> +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.compareDocumentPosition")}} +- {{domxref("Node.hasChildNodes")}} diff --git a/files/ja/web/api/node/isdefaultnamespace/index.md b/files/ja/web/api/node/isdefaultnamespace/index.md index 018e6562cc..44f1b3acec 100644 --- a/files/ja/web/api/node/isdefaultnamespace/index.md +++ b/files/ja/web/api/node/isdefaultnamespace/index.md @@ -1,35 +1,71 @@ --- -title: Node.isDefaultNamespace +title: Node.isDefaultNamespace() slug: Web/API/Node/isDefaultNamespace tags: - - DOM - - Gecko DOM Reference - - Namespaces - - Node + - メソッド + - リファレンス +browser-compat: api.Node.isDefaultNamespace 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> +{{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.md b/files/ja/web/api/node/isequalnode/index.md index 3eced87fe0..b4c71cc44a 100644 --- a/files/ja/web/api/node/isequalnode/index.md +++ b/files/ja/web/api/node/isequalnode/index.md @@ -1,90 +1,82 @@ --- -title: Node.isEqualNode +title: Node.isEqualNode() slug: Web/API/Node/isEqualNode +tags: + - メソッド + - リファレンス +browser-compat: api.Node.isEqualNode translation_of: Web/API/Node/isEqualNode --- -<div>{{ApiRef}}</div> +{{APIRef("DOM")}} -<h2 id="Summary" name="Summary">概要</h2> +**`isEqualNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 2 つのノードが等しいかどうかを検査します。 +2 つのノードは、同じ型、定義特性(要素の場合、 ID や子ノードの数など)、その属性が一致している場合、等しいといえます。データで一致が求められる具体的な点は、ノードの型によって異なります。 -<p><code>Node.isEqualNode()</code>は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性(要素であればIDや子要素の数など)、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +```js +isEqualNode(otherNode); +``` -<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(otherNode); -</pre> +### 引数 -<ul> - <li><code>otherNode</code> : 同値性を比較する対象の {{domxref("Node")}}</li> -</ul> +- `otherNode` + - : 比較対象となる {{domxref("Node")}} です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 -<h2 id="Example" name="Example">例</h2> +### 返値 -<p>3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、<code>isEqualNode()</code> を使ってJavaScriptでノードを比較した結果は以下のようになります。</p> +論理値で、 2 つのノードが等しければ `true`、そうでなければ `false` です。 +`otherNode` が `null` であった場合、 `isEqualNode()` は常に false を返します。 -<h3 id="HTML">HTML</h3> +## 例 -<pre class="brush: html"><div>最初の要素です。</div> -<div>2番目の要素です。</div> -<div>最初の要素です。</div> +この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isEqualNode()` を使って JavaScript でノードを比較した結果は以下のようになります。 -<p id="output"></p></pre> +### HTML -<div class="hidden"> -<h3 id="CSS">CSS</h3> +```html +<div>最初の要素です。</div> +<div>2 番目の要素です。</div> +<div>最初の要素です。</div> -<pre class="brush: css">#output { - width: 440px; - border: 2px solid black; - border-radius: 5px; - padding: 10px; - margin-top: 20px; - display: block; -}</pre> -</div> +<p id="output"></p> +``` -<h3 id="JavaScript">JavaScript</h3> +```css hidden +#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +} +``` -<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> +### JavaScript -<h3 id="Results">Results</h3> - -<p>{{ EmbedLiveSample('Example', 480) }}</p> +```js +let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); -<p> - </p><h2 id="仕様">仕様</h2> +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/>"; +``` +### 結果 -<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> +{{ EmbedLiveSample('Example', "100%", "210") }} -<h2 id="ブラウザー互換性">ブラウザー互換性</h2> +## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -<p>{{Compat("api.Node.isEqualNode")}}</p> +{{Compat}} -<h2 id="参考">参考</h2> +## 関連情報 -<ul> - <li>{{domxref("Node.isSameNode()")}}</li> -</ul> +- {{domxref("Node.isSameNode()")}} diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md index 3b25dc254b..db0b3935ee 100644 --- a/files/ja/web/api/node/issupported/index.md +++ b/files/ja/web/api/node/issupported/index.md @@ -1,44 +1,53 @@ --- -title: Node.isSupported +title: Node.isSupported() slug: Web/API/Node/isSupported tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference + - メソッド + - 非推奨 + - リファレンス +browser-compat: api.Node.isSupported 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> +{{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/removechild/index.md b/files/ja/web/api/node/removechild/index.md index ff64604414..335eea5b85 100644 --- a/files/ja/web/api/node/removechild/index.md +++ b/files/ja/web/api/node/removechild/index.md @@ -1,124 +1,125 @@ --- -title: Node.removeChild +title: Node.removeChild() slug: Web/API/Node/removeChild tags: - - DOM - - Gecko - - Node + - メソッド + - リファレンス +browser-compat: api.Node.removeChild translation_of: Web/API/Node/removeChild --- -<p><code><strong>Node.removeChild()</strong></code> メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。</p> +{{APIRef("DOM")}} -<h2 id="Syntax" name="Syntax">構文</h2> +**`removeChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。 -<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>); -<strong>または</strong> -<em>node</em>.removeChild(<em>child</em>); -</pre> +> **Note:** 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。 +> 後のコードで再利用することができます。 +> +> `removeChild()` の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから[自動的に削除](/en-US/docs/Web/JavaScript/Memory_Management)されます。 -<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> +{{domxref("Node.cloneNode()")}} とは異なり、返値は関連付けられた {{domxref("EventListener")}} オブジェクトを保持します。 -<p>取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 <code>oldChild</code> オブジェクト参照を通じて、後でコード中で再利用することができます。</p> +## 構文 -<p>しかし、第二の構文では <code>oldChild</code> の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから <a href="/ja/docs/Web/JavaScript/Memory_Management">自動的に削除</a>されます。</p> +```js +removeChild(child); +``` -<p><code>child</code> が実際には <code>element</code> ノードの子ではない場合、このメソッドは例外を発生します。これは <code>child</code> が呼び出し時には実際に <code>element</code> の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。</p> +### 引数 -<p>このメソッドでは、2つの異なる方法で例外が発生します。</p> +- `child` + - : {{domxref("Node")}} で、 DOM から取り除きたい子ノードを指定します。 -<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> +- `NotFoundError` {{domxref("DOMException")}} + - : `child` がこのノードの子ではない場合に発生します。 +- {{jsxref("TypeError")}} + - : `child` が `null` であった場合に発生します。 -<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"); +この HTML を使います。 - var garbage = top.removeChild(nested); //Test Case 2: the method throws the exception (2) +```html +<div id="top"> + <div id="nested"></div> +</div> +``` -</script> +親ノードが分かる場合に、指定された要素を取り除きます。 -<!--Sample HTML code--> -<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); +``` -<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 +```js +let node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +} +``` - // ...... - garbage = top.removeChild(nested); // Test Case 1: the method in the second call here, throws the exception (1) +ある要素からすべての子を削除します。 -</script> +```js +let element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +} +``` -</pre> +### TypeError が発生する例 -<pre class="brush: html"><!--Sample HTML code--> +```html +<!--HTML コードの例--> +<div id="top"> </div> +``` -<div id="top"> - <div id="nested"></div> -</div> -</pre> +```js +let top = document.getElementById("top"); +let nested = document.getElementById("nested"); -<pre class="brush:js">// 親ノードから指定した子要素を除去 -var d = document.getElementById("top"); -var d_nested = document.getElementById("nested"); -var throwawayNode = d.removeChild(d_nested); -</pre> +// TypeError が発生 +let garbage = top.removeChild(nested); +``` -<pre class="brush:js">// 親要素が不明、不定の場合の方法 -var node = document.getElementById("nested"); -if (node.parentNode) { - node.parentNode.removeChild(node); -} -</pre> +### NotFoundError が発生する例 -<pre class="brush:js">// 要素の全ての子を除去 -var element = document.getElementById("top"); -while (element.firstChild) { - element.removeChild(element.firstChild); -} -</pre> +```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); -<h2 id="Specification" name="Specification">仕様書</h2> +// NotFoundError が発生 +garbage = top.removeChild(nested); +``` -<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> +{{Specifications}} -<p>{{Compat("api.Node.removeChild")}}</p> +## ブラウザーの互換性 -<h2 id="See_also" name="See_also">関連情報</h2> +{{Compat}} -<ul> - <li>{{domxref("Node.replaceChild")}}</li> - <li>{{domxref("Node.parentNode")}}</li> - <li>{{domxref("ChildNode.remove")}}</li> -</ul> +## 関連情報 -<div>{{APIRef("DOM")}}</div> +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.parentNode")}} +- {{domxref("Element.remove()")}} +- {{domxref("Node.cloneNode()")}} diff --git a/files/ja/web/api/node/replacechild/index.md b/files/ja/web/api/node/replacechild/index.md index 2c69ea2114..da96d01cf6 100644 --- a/files/ja/web/api/node/replacechild/index.md +++ b/files/ja/web/api/node/replacechild/index.md @@ -2,74 +2,95 @@ title: Node.replaceChild slug: Web/API/Node/replaceChild tags: - - API - - DOM - - Method - - Node - - Reference + - メソッド + - リファレンス +browser-compat: api.Node.replaceChild translation_of: Web/API/Node/replaceChild --- -<div>{{ApiRef("DOM")}}</div> +{{APIRef("DOM")}} -<p><strong><code>Node.replaceChild()</code></strong> メソッドは指定ノードの子ノードを別のノードに置き換えます。</p> +**`replaceChild()`** は {{domxref("Node")}} 要素のメソッドで、この(親)ノードの中の子ノードを置き換えます。 -<h2 id="Syntax" name="Syntax">構文</h2> +**`Node.replaceChild()`** メソッドは指定ノードの子ノードを別のノードに置き換えます。 -<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> +```js +replaceChild(newChild, oldChild); +``` -<h2 id="Example" name="Example">例</h2> +### 引数 -<pre class="brush:js">// <div> -// <span id="childSpan">foo bar</span> -// </div> +- `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 も属性も内容も持たない空要素を生成 -var sp1 = document.createElement("span"); +const sp1 = document.createElement("span"); // 生成したノードに id 属性 'newSpan' を付与 -sp1.setAttribute("id", "newSpan"); +sp1.id = "newSpan"; -// テキストノードを生成 -var sp1_content = document.createTextNode("新しい span 要素"); +// 新しい要素にいくらかの内容を作成 +const sp1_content = document.createTextNode("新しい置換 span 要素"); -// 生成したテキストノードを先の空要素の子ノードとして配置 +// その内容を新しい要素に適用 sp1.appendChild(sp1_content); -// 置換に先んじ、参照を代入 -var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード -var parentDiv = sp2.parentNode; // 置換対象ノードの親要素 +// 置き換えられる既存のノードの参照を作る +const sp2 = document.getElementById("childSpan"); +const parentDiv = sp2.parentNode; -// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換 +// 既存のノード sp2 を新しい span 要素 sp1 で置換 parentDiv.replaceChild(sp1, sp2); +// 結果: +// <div> +// <span id="newSpan">新しい置換 span 要素</span> +// </div> +``` -// 上記コード実行後のノードは以下の様になります: -// <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> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> +## ブラウザーの互換性 -<p>{{Compat("api.Node.replaceChild")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{domxref("Node.removeChild")}}</li> -</ul> +- {{domxref("Node.removeChild")}} +- {{domxref("Element.replaceWith")}} |