From 5fbfeee5908241590dacb0f0aac3859f61360947 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 27 Feb 2022 13:04:02 +0900 Subject: Node インターフェイスのメソッドの記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/insertbefore/index.html | 186 -------------------------- files/ja/web/api/node/insertbefore/index.md | 186 ++++++++++++++++++++++++++ 2 files changed, 186 insertions(+), 186 deletions(-) delete mode 100644 files/ja/web/api/node/insertbefore/index.html create mode 100644 files/ja/web/api/node/insertbefore/index.md (limited to 'files/ja/web/api/node/insertbefore') 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 ---- -
{{APIRef("DOM")}}
- -

Node.insertBefore() メソッドは、ノードを参照ノードの前に、指定された親ノードの子として挿入します。

- -

指定されたノードが既に文書中に存在した場合、 insertBefore() はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)

- -

これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。

- -
-

メモ: {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 cloneNode() で作成された複製は自動的には同期されません。

-
- -

指定された子が {{domxref("DocumentFragment")}} である場合、 DocumentFragment の内容全体が指定された親ノードの子リストに移動されます。

- -

構文

- -
let insertedNode = parentNode.insertBefore(newNode, referenceNode)
-
- -
-
insertedNode
-
挿入されたノード (newNode と同じ) です。
-
parentNode
-
新しく挿入されるノードの親です。
-
newNode
-
挿入されるノードです。
-
referenceNode
-
newNode がこのノードの直前に挿入されます。このノードが null である場合は、 newNodeparentNode の子ノードの末尾に挿入されます。
-
- -
-

メモ: referenceNode は省略可能な引数ではありません。明示的に {{domxref("Node")}} または null を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって異なる動作をすることがあります。

-
- -

返値

- -

追加された子ノードを返します (ただし newNode が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。

- -

- -

例 1

- -
<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

- -
<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>
-
- -
-

メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。

-
- -

前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。

- -
parentDiv.insertBefore(sp1, sp2.nextSibling)
- -

sp2 に次の兄弟がない場合、これは最後の子ノードです。 — sp2.nextSiblingnull を返し、 sp1 は子ノードリストの末尾 (sp2 の直後) に挿入されます。

- -

例 3

- -

要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。

- -
// 親ノードを取得
-let parentElement = document.getElementById('parentElement')
-// 親の最初の子を取得
-let theFirstChild = parentElement.firstChild
-
-// 新しい要素を取得
-let newElement = document.createElement("div")
-
-// 最初の子の前に新しい要素を挿入
-parentElement.insertBefore(newElement, theFirstChild)
-
- -

要素に最初の子がない場合、 firstChildnull になります。その場合も、要素は親の最後の子の後に追加されます。

- -

親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は唯一の要素になります。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}挿入アルゴリズムのエラーを修正
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}より詳細にアルゴリズムを記述
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}目立った変更はなし
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}目立った変更はなし
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}導入
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - 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..2bfea72cdf --- /dev/null +++ b/files/ja/web/api/node/insertbefore/index.md @@ -0,0 +1,186 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +tags: + - API + - DOM + - Element + - Method + - Node + - Reference + - メソッド +translation_of: Web/API/Node/insertBefore +--- +
{{APIRef("DOM")}}
+ +

Node.insertBefore() メソッドは、ノードを参照ノードの前に、指定された親ノードの子として挿入します。

+ +

指定されたノードが既に文書中に存在した場合、 insertBefore() はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)

+ +

これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。

+ +
+

メモ: {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 cloneNode() で作成された複製は自動的には同期されません。

+
+ +

指定された子が {{domxref("DocumentFragment")}} である場合、 DocumentFragment の内容全体が指定された親ノードの子リストに移動されます。

+ +

構文

+ +
let insertedNode = parentNode.insertBefore(newNode, referenceNode)
+
+ +
+
insertedNode
+
挿入されたノード (newNode と同じ) です。
+
parentNode
+
新しく挿入されるノードの親です。
+
newNode
+
挿入されるノードです。
+
referenceNode
+
newNode がこのノードの直前に挿入されます。このノードが null である場合は、 newNodeparentNode の子ノードの末尾に挿入されます。
+
+ +
+

メモ: referenceNode は省略可能な引数ではありません。明示的に {{domxref("Node")}} または null を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって異なる動作をすることがあります。

+
+ +

返値

+ +

追加された子ノードを返します (ただし newNode が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。

+ +

+ +

例 1

+ +
<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

+ +
<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>
+
+ +
+

メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。

+
+ +

前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling)
+ +

sp2 に次の兄弟がない場合、これは最後の子ノードです。 — sp2.nextSiblingnull を返し、 sp1 は子ノードリストの末尾 (sp2 の直後) に挿入されます。

+ +

例 3

+ +

要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。

+ +
// 親ノードを取得
+let parentElement = document.getElementById('parentElement')
+// 親の最初の子を取得
+let theFirstChild = parentElement.firstChild
+
+// 新しい要素を取得
+let newElement = document.createElement("div")
+
+// 最初の子の前に新しい要素を挿入
+parentElement.insertBefore(newElement, theFirstChild)
+
+ +

要素に最初の子がない場合、 firstChildnull になります。その場合も、要素は親の最後の子の後に追加されます。

+ +

親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は唯一の要素になります。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}挿入アルゴリズムのエラーを修正
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}より詳細にアルゴリズムを記述
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}目立った変更はなし
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}目立った変更はなし
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}導入
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf From a3335b2232582afc0a98d893b7e9f4987e968583 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 27 Feb 2022 16:24:00 +0900 Subject: 2022/02/01 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/haschildnodes/index.md | 70 +++++---- files/ja/web/api/node/insertbefore/index.md | 209 +++++++++++---------------- 2 files changed, 130 insertions(+), 149 deletions(-) (limited to 'files/ja/web/api/node/insertbefore') diff --git a/files/ja/web/api/node/haschildnodes/index.md b/files/ja/web/api/node/haschildnodes/index.md index b4ed1654d3..85717cb827 100644 --- a/files/ja/web/api/node/haschildnodes/index.md +++ b/files/ja/web/api/node/haschildnodes/index.md @@ -1,31 +1,49 @@ --- -title: Node.hasChildNodes +title: Node.hasChildNodes() slug: Web/API/Node/hasChildNodes tags: - - DOM - - Gecko - - Gecko DOM Reference + - メソッド + + - リファレンス +browser-compat: api.Node.hasChildNodes translation_of: Web/API/Node/hasChildNodes --- -
- {{ApiRef}}
-

概要

-

hasChildNodes は指定したノード子ノードを持つか否かを示す真偽値を返します。

-

構文

-
node.hasChildNodes()
-

-

"foo" を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。

-
var foo = document.getElementById("foo");
-
-if ( foo.hasChildNodes() ) {
-  foo.removeChild( foo.childNodes[0] );
-}
-

仕様書

- -

関連情報

- +{{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.md b/files/ja/web/api/node/insertbefore/index.md index 2bfea72cdf..36ae9e86ba 100644 --- a/files/ja/web/api/node/insertbefore/index.md +++ b/files/ja/web/api/node/insertbefore/index.md @@ -2,62 +2,57 @@ title: Node.insertBefore() slug: Web/API/Node/insertBefore tags: - - API - - DOM - - Element - - Method - - Node - - Reference - メソッド + - リファレンス +browser-compat: api.Node.insertBefore translation_of: Web/API/Node/insertBefore --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

Node.insertBefore() メソッドは、ノードを参照ノードの前に、指定された親ノードの子として挿入します。

+**`insertBefore()`** は {{domxref("Node")}} インターフェイスのメソッドで、*参照先ノード*の前にこの*親ノード*の子としてノードを挿入します。 -

指定されたノードが既に文書中に存在した場合、 insertBefore() はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)

+指定されたノードが既に文書中に存在した場合、 `insertBefore()` はこれを現在の位置から新しい位置に移動します。(つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。) -

これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。

+これは、 1 つのノードが文書中に同時に 2 か所に存在できないことを意味します。 -
-

メモ: {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 cloneNode() で作成された複製は自動的には同期されません。

-
+> **Note:** {{domxref("Node.cloneNode()")}} を使用すると、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 `cloneNode()` で作成された複製は自動的には同期されません。 -

指定された子が {{domxref("DocumentFragment")}} である場合、 DocumentFragment の内容全体が指定された親ノードの子リストに移動されます。

+指定された子が {{domxref("DocumentFragment")}} である場合、 `DocumentFragment` の内容全体が指定された親ノードの子リストに移動されます。 -

構文

+## 構文 -
let insertedNode = parentNode.insertBefore(newNode, referenceNode)
-
+```js +insertBefore(newNode, referenceNode); +``` -
-
insertedNode
-
挿入されたノード (newNode と同じ) です。
-
parentNode
-
新しく挿入されるノードの親です。
-
newNode
-
挿入されるノードです。
-
referenceNode
-
newNode がこのノードの直前に挿入されます。このノードが null である場合は、 newNodeparentNode の子ノードの末尾に挿入されます。
-
+### 引数 -
-

メモ: referenceNode は省略可能な引数ではありません。明示的に {{domxref("Node")}} または null を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって異なる動作をすることがあります。

-
+- `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")}} を返します)。 -

追加された子ノードを返します (ただし newNode が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。

+### 例外 -

+挿入前の検証 -

例 1

+## 例 -
<div id="parentElement">
-   <span id="childElement">foo bar</span>
-</div>
+### 例 1
+
+```html
+
+ foo bar +
-<script> + +``` -

例 2

+### 例 2 -
<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
+```html
+
+ foo bar +
-<script> -// 新しい只の <span> 要素を作成 + +``` + +> **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 -
-

メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。

-
+// 新しい要素を取得 +let newElement = document.createElement("div") -

前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。

+// 最初の子ノードの前に新しい要素を挿入 +parentElement.insertBefore(newElement, theFirstChild) +``` -
parentDiv.insertBefore(sp1, sp2.nextSibling)
+要素に最初の子ノードがない場合、 `firstChild` は `null` になります。その場合も、要素は親ノードの最後の子ノードの後に追加されます。 -

sp2 に次の兄弟がない場合、これは最後の子ノードです。 — sp2.nextSiblingnull を返し、 sp1 は子ノードリストの末尾 (sp2 の直後) に挿入されます。

+親要素に最初の子ノードがない場合は、最後の子ノードもありません。結果的に、新しく挿入された要素は**唯一の**要素になります。 -

例 3

+## 仕様書 -

要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。

+{{Specifications}} -
// 親ノードを取得
-let parentElement = document.getElementById('parentElement')
-// 親の最初の子を取得
-let theFirstChild = parentElement.firstChild
+## ブラウザーの互換性
 
-// 新しい要素を取得
-let newElement = document.createElement("div")
+{{Compat}}
 
-// 最初の子の前に新しい要素を挿入
-parentElement.insertBefore(newElement, theFirstChild)
-
- -

要素に最初の子がない場合、 firstChildnull になります。その場合も、要素は親の最後の子の後に追加されます。

- -

親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は唯一の要素になります。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}挿入アルゴリズムのエラーを修正
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}より詳細にアルゴリズムを記述
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}目立った変更はなし
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}目立った変更はなし
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}導入
- -

ブラウザーの互換性

- -

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

- -

関連情報

- -
    -
  • {{domxref("Node.removeChild()")}}
  • -
  • {{domxref("Node.replaceChild()")}}
  • -
  • {{domxref("Node.appendChild()")}}
  • -
  • {{domxref("Node.hasChildNodes()")}}
  • -
  • {{domxref("Element.insertAdjacentElement()")}}
  • -
  • {{domxref("ParentNode.prepend()")}}
  • -
+## 関連情報 + +- {{domxref("Node.removeChild()")}} +- {{domxref("Node.replaceChild()")}} +- {{domxref("Node.appendChild()")}} +- {{domxref("Node.hasChildNodes()")}} +- {{domxref("Element.insertAdjacentElement()")}} +- {{domxref("Element.prepend()")}} +- {{domxref("Element.before()")}} +- {{domxref("Element.after()")}} -- cgit v1.2.3-54-g00ecf