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