From 45bf098003a11b56bbf28ceb6f9563191d0dd26e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 19 Aug 2021 22:44:39 +0900 Subject: ParentNode ミックスインを廃止 (#2028) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ParentNode ミックスインを廃止 - メンバーは Element クラスへ移動 - 各ドキュメントを 2021/08/11 時点の英語版に同期 --- files/ja/_redirects.txt | 6 - files/ja/_wikihistory.json | 59 +++----- .../orphaned/web/api/parentnode/append/index.html | 143 ------------------ .../web/api/parentnode/children/index.html | 93 ------------ files/ja/orphaned/web/api/parentnode/index.html | 93 ------------ .../orphaned/web/api/parentnode/prepend/index.html | 143 ------------------ .../web/api/parentnode/queryselectorall/index.html | 162 --------------------- files/ja/web/api/element/append/index.html | 100 +++++++++++++ .../web/api/element/childelementcount/index.html | 88 +++-------- files/ja/web/api/element/children/index.html | 58 ++++++++ files/ja/web/api/element/prepend/index.html | 98 +++++++++++++ .../ja/web/api/element/queryselectorall/index.html | 156 ++++++++------------ 12 files changed, 355 insertions(+), 844 deletions(-) delete mode 100644 files/ja/orphaned/web/api/parentnode/append/index.html delete mode 100644 files/ja/orphaned/web/api/parentnode/children/index.html delete mode 100644 files/ja/orphaned/web/api/parentnode/index.html delete mode 100644 files/ja/orphaned/web/api/parentnode/prepend/index.html delete mode 100644 files/ja/orphaned/web/api/parentnode/queryselectorall/index.html create mode 100644 files/ja/web/api/element/append/index.html create mode 100644 files/ja/web/api/element/children/index.html create mode 100644 files/ja/web/api/element/prepend/index.html (limited to 'files') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 7ddf4ab6ef..12133f1be4 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3228,12 +3228,6 @@ /ja/docs/Web/API/Node/prefix /ja/docs/Web/API/Element/prefix /ja/docs/Web/API/NodeList.item /ja/docs/Web/API/NodeList/item /ja/docs/Web/API/NonDocumentTypeChildNode /ja/docs/Web/API/Element -/ja/docs/Web/API/ParentNode /ja/docs/orphaned/Web/API/ParentNode -/ja/docs/Web/API/ParentNode/append /ja/docs/orphaned/Web/API/ParentNode/append -/ja/docs/Web/API/ParentNode/childElementCount /ja/docs/Web/API/Element/childElementCount -/ja/docs/Web/API/ParentNode/children /ja/docs/orphaned/Web/API/ParentNode/children -/ja/docs/Web/API/ParentNode/prepend /ja/docs/orphaned/Web/API/ParentNode/prepend -/ja/docs/Web/API/ParentNode/querySelectorAll /ja/docs/orphaned/Web/API/ParentNode/querySelectorAll /ja/docs/Web/API/Position /ja/docs/Web/API/GeolocationPosition /ja/docs/Web/API/PositionError /ja/docs/Web/API/GeolocationPositionError /ja/docs/Web/API/Push_API/Using_the_Push_API /ja/docs/Web/API/Push_API diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 0f002f99c7..4ff0966dc6 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -13592,6 +13592,14 @@ "hashedhyphen" ] }, + "Web/API/Element/append": { + "modified": "2020-10-15T22:19:11.886Z", + "contributors": [ + "mfuji09", + "dskymd", + "isdh" + ] + }, "Web/API/Element/attachShadow": { "modified": "2020-10-15T22:09:56.110Z", "contributors": [ @@ -13635,6 +13643,13 @@ "Marsf" ] }, + "Web/API/Element/children": { + "modified": "2020-11-23T04:45:58.549Z", + "contributors": [ + "segayuu", + "sii" + ] + }, "Web/API/Element/classList": { "modified": "2020-10-15T21:14:13.067Z", "contributors": [ @@ -14095,6 +14110,13 @@ "sii" ] }, + "Web/API/Element/prepend": { + "modified": "2020-10-15T22:22:02.876Z", + "contributors": [ + "mfuji09", + "silverskyvicto" + ] + }, "Web/API/Element/querySelector": { "modified": "2019-03-23T23:02:48.166Z", "contributors": [ @@ -49344,43 +49366,6 @@ "Wind1808" ] }, - "orphaned/Web/API/ParentNode": { - "modified": "2020-11-23T03:46:53.867Z", - "contributors": [ - "segayuu", - "yyss", - "Marsf", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/ParentNode/append": { - "modified": "2020-10-15T22:19:11.886Z", - "contributors": [ - "mfuji09", - "dskymd", - "isdh" - ] - }, - "orphaned/Web/API/ParentNode/children": { - "modified": "2020-11-23T04:45:58.549Z", - "contributors": [ - "segayuu", - "sii" - ] - }, - "orphaned/Web/API/ParentNode/prepend": { - "modified": "2020-10-15T22:22:02.876Z", - "contributors": [ - "mfuji09", - "silverskyvicto" - ] - }, - "orphaned/Web/API/ParentNode/querySelectorAll": { - "modified": "2020-10-15T22:26:50.502Z", - "contributors": [ - "mfuji09" - ] - }, "orphaned/Web/API/RTCIdentityErrorEvent": { "modified": "2019-03-23T22:51:24.405Z", "contributors": [ diff --git a/files/ja/orphaned/web/api/parentnode/append/index.html b/files/ja/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index 1206957c43..0000000000 --- a/files/ja/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -

{{APIRef("DOM")}}

- -

ParentNode.append() メソッドは、{{domxref("Node")}} オブジェクト、または {{domxref("DOMString")}} オブジェクトのセットを ParentNode の最後に追加します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと同等に挿入されます。

- -

{{domxref("Node.appendChild()")}} との違いは次の通りです。

- - - -

構文

- -
// [Throws, Unscopable]
-ParentNode.append(...nodesOrDOMStrings) // returns undefined
-
- -

引数

- -
-
nodes
-
追加する {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセット
-
- -

例外

- - - -

例

- -

要素の追加

- -
let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append(p)
-
-console.log(parent.childNodes) // NodeList [ <p> ]
-
- -

テキストの追加

- -
let parent = document.createElement("div")
-parent.append("Some text")
-
-console.log(parent.textContent) // "Some text"
- -

要素とテキストの追加

- -
let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append("Some text", p)
-
-console.log(parent.childNodes) // NodeList [ #text "Some text", <p> ]
- -

ParentNode.append() はスコープが効かない

- -

append() メソッドは with 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。

- -
let parent = document.createElement("div")
-
-with(parent) {
-  append("foo")
-}
-// ReferenceError: append is not defined
- -

Polyfill

- -

append() メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('append')) {
-      return;
-    }
-    Object.defineProperty(item, 'append', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function append() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.appendChild(docFrag);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.ParentNode.append")}}

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/parentnode/children/index.html b/files/ja/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index 537c91d1c6..0000000000 --- a/files/ja/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -tags: - - API - - Child - - Child Nodes - - DOM - - HTMLCollection - - Node - - ParentNode - - Property - - children -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -
{{ APIRef("DOM") }}
- -

{{domxref("ParentNode")}} の children プロパティは、呼び出された際のノードの子{{domxref("Element", "要素", "", 1)}}ノードをすべて含んだ動的な（生きている） {{domxref("HTMLCollection")}} を返す、読み取り専用プロパティです。

- -

構文

- -
let children = node.children;
- -

値

- -

node の子の DOM要素の生きている順序付きコレクションの、 {{ domxref("HTMLCollection") }} です。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。

- -

ノードが子要素を持たない場合、 children は要素を含まず、length は 0 です。

- -

例 

- -
const foo = document.getElementById('foo');
-for (let i = 0; i < foo.children.length; i++) {
-  console.log(foo.children[i].tagName);
-}
- -

Polyfill

- -
// Overwrites native 'children' prototype.
-// Adds Document & DocumentFragment support for IE9 & Safari.
-// Returns array instead of HTMLCollection.
-;(function(constructor) {
-  if (constructor &&
-    constructor.prototype &&
-    constructor.prototype.children == null) {
-    Object.defineProperty(constructor.prototype, 'children', {
-      get: function() {
-        let i = 0, node, nodes = this.childNodes, children = [];
-        while (node = nodes[i++]) {
-          if (node.nodeType === 1) {
-            children.push(node);
-          }
-        }
-        return children;
-      }
-    });
-  }
-})(window.Node || window.Element);
-
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}初めての定義
- -

ブラウザー実装状況

- -

{{Compat("api.ParentNode.children")}}

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/parentnode/index.html b/files/ja/orphaned/web/api/parentnode/index.html deleted file mode 100644 index 5d1ec6c97e..0000000000 --- a/files/ja/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - Finding Elements - - Finding Nodes - - Interface - - Locating Elements - - Locating Nodes - - Managing Elements - - Managing Nodes - - Mixin - - Node - - ParentNode - - Reference - - Selectors -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -
{{APIRef("DOM")}}
- -

ParentNode ミックスインは、子を持つことができるすべての型の {{domxref("Node")}} オブジェクトに特有のメソッドやプロパティを含みます。これは、{{domxref("Element")}} と {{domxref("Document")}}、{{domxref("DocumentFragment")}} オブジェクトに実装されています。

- -

対象のノードや要素を見つけるためにCSS セレクターを使用する方法について、詳しくはセレクタを使用した DOM 要素の指定をご覧ください。

- -

プロパティ

- -
-
{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}
-
オブジェクトが持つ子の数を表す unsigned long 値を返します。
-
{{domxref("ParentNode.children")}} {{readonlyInline}}
-
この ParentNode の子であるすべての {{domxref("Element")}} 型のオブジェクトを含む実際の {{domxref("HTMLCollection")}} を返します。要素ではないノードは省きます。
-
{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}
-
この ParentNode の最初の子である {{domxref("Element")}} を返します。存在しない場合は null を返す。
-
{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}
-
この ParentNode の最後の子である {{domxref("Element")}} を返します。存在しない場合は null を返す。
-
- -

メソッド

- -
-
{{domxref("ParentNode.append()")}} {{experimental_inline}}
-
ParentNode の最後の子の後ろに、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。
-
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
-
ParentNode の最初の子の前に、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。
-
{{domxref("ParentNode.querySelector()")}}
-
現在の要素をルートとして、指定したセレクターのグループにマッチする最初の {{domxref("Element")}} を返します。
-
{{domxref("ParentNode.querySelectorAll()")}}
-
現在の要素をルートとして、指定したセレクターのグループにマッチする要素のリストを表す {{domxref("NodeList")}} を返します。
-
{{domxref("ParentNode.replaceChildren()")}}
-
ノードの既存の子ノードを、指定した新しい子ノードのセットに入れ替えます。
-
- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様書状況コメント
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}ElementTraversal インターフェイスを {{domxref("ChildNode")}} と {{domxref("ParentNode")}} に分割しました。{{domxref("ParentNode.firstElementChild")}} と {{domxref("ParentNode.lastElementChild")}}、{{domxref("ParentNode.childElementCount")}} プロパティは、後者で定義されていません。
- {{domxref("ParentNode.children")}} プロパティが追加されました。
- {{domxref("ParentNode.querySelector()")}}、{{domxref("ParentNode.querySelectorAll()")}}、{{domxref("ParentNode.append()")}}、{{domxref("ParentNode.prepend()")}} メソッドが追加されました。
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}ElementTraversal 基本インターフェイスにこのプロパティの初期定義が追加され、{{domxref("Element")}} で使われます。
- -

ブラウザー実装状況

- - - -

{{Compat("api.ParentNode")}}

- -

関連項目

- - diff --git a/files/ja/orphaned/web/api/parentnode/prepend/index.html b/files/ja/orphaned/web/api/parentnode/prepend/index.html deleted file mode 100644 index 8c6c87cede..0000000000 --- a/files/ja/orphaned/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: ParentNode.prepend() -slug: orphaned/Web/API/ParentNode/prepend -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference - - prepend -translation_of: Web/API/ParentNode/prepend -original_slug: Web/API/ParentNode/prepend ---- -

{{APIRef("DOM")}}

- -

ParentNode.prepend() メソッドは、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを {{domxref("ParentNode")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。

- -

構文

- -
ParentNode.prepend(...nodesToPrepend);
-
- -

引数

- -
-
nodesToPrepend
-
現在 ParentNode にある最初の子ノードの前に挿入する1つ以上のノード。各ノードは {{domxref("Node")}} オブジェクトまたは文字列として指定できます。文字列は新しい {{domxref("Text")}} ノードとして挿入されます。
-
- -

返値

- -

undefined.

- -

例外

- - - -

例

- -

要素の前に追加

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-var span = document.createElement("span");
-parent.append(p);
-parent.prepend(span);
-
-console.log(parent.childNodes); // NodeList [ <span>, <p> ]
-
- -

テキストの前に追加

- -
var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"
- -

要素とテキストの追加

- -
var parent = document.createElement("div");
-var p = document.createElement("p");
-parent.prepend("Some text", p);
-
-console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
- -

ParentNode.prepend() はスコープが効かない

- -

prepend() メソッドは with 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。

- -
var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined
- -

Polyfill

- -

prepend() メソッドは Internet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。

- -
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
-(function (arr) {
-  arr.forEach(function (item) {
-    if (item.hasOwnProperty('prepend')) {
-      return;
-    }
-    Object.defineProperty(item, 'prepend', {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: function prepend() {
-        var argArr = Array.prototype.slice.call(arguments),
-          docFrag = document.createDocumentFragment();
-
-        argArr.forEach(function (argItem) {
-          var isNode = argItem instanceof Node;
-          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
-        });
-
-        this.insertBefore(docFrag, this.firstChild);
-      }
-    });
-  });
-})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("api.ParentNode.prepend")}}

- -

関連情報

- - diff --git a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html b/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html deleted file mode 100644 index 01e307ed31..0000000000 --- a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: ParentNode.querySelectorAll() -slug: orphaned/Web/API/ParentNode/querySelectorAll -tags: - - API - - DOM - - Document - - Finding Elements - - Finding Nodes - - Method - - ParentNode - - Reference - - Searching Elements - - Searching Nodes - - Selectors - - querySelectorAll -translation_of: Web/API/ParentNode/querySelectorAll -original_slug: Web/API/ParentNode/querySelectorAll ---- -
{{ApiRef("DOM")}}
- -

{{domxref("ParentNode")}} ミックスインは querySelectorAll() メソッドを定義しており、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを示す {{domxref("NodeList")}} を返します。

- -

単一の結果のみが必要な場合は、代わりに {{domxref("ParentNode.querySelector", "querySelector()")}} メソッドを使用することを検討してください。

- -
-

メモ: このメソッドは {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} として実装されています。

-
- -

構文

- -
elementList = parentNode.querySelectorAll(selectors);
-
- -

引数

- -
-
selectors
-
マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SyntaxError 例外がスローされます。セレクターの仕様と要素の識別の詳細は、セレクターを使用した DOM 要素の指定を参照してください。複数のセレクターを指定する際は、カンマで区切ります。
-
- -
-

メモ: 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。

-
- -

返値

- -

生きていない {{domxref("NodeList")}} で、指定されたセレクターの1つ以上に一致する子孫ノード1つに対して1つずつの {{domxref("Element")}} を含みます。

- -
-

メモ: 指定された selectors が CSS 擬似要素を含む場合、返されるリストは常に空になります。

-
- -

例外

- -
-
SyntaxError
-
指定された selectors の構文が妥当ではない。
-
- -

例

- -

文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。

- -
var matches = document.querySelectorAll("p");
- -

次の例では、文書内にある note または alert のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。

- -
var matches = document.querySelectorAll("div.note, div.alert");
-
- -

次に、 test という ID を持つコンテナ内に位置し、直接の親要素が highlighted クラスを持つ {{HTMLElement("div")}} である、<p> 要素のリストを取得します。

- -
var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted > p");
- -

次の例では属性セレクターを使用しており、 data-src という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。

- -
var matches = document.querySelectorAll("iframe[data-src]");
- -

次の例では、ID が userlist の要素の中にあり、data-active 属性を持ち、その値が 1 であるリスト項目のリストを返すため、属性セレクターが使用されています。

- -
var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active=1]");
- -

ユーザーのメモ

- -

querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。

- -

HTML

- -

次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。

- -
<div class="outer">
-  <div class="select">
-    <div class="inner">
-    </div>
-  </div>
-</div>
- -

JavaScript

- -
var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1 です。0 ではありません!
-
- -

この例では、select class を持つ <div> の文脈で .outer .inner を選択するとき、.outer が基準となる要素（.select で検索される）の子孫ではないにもかかわらず、.inner class を持つ要素が見つけられています。querySelectorAll() はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。

- -

{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。

- -
var select = document.querySelector('.select');
-var inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Living standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}変更なし
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}初回定義
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}元の定義
- -

ブラウザーの互換性

- -

{{Compat("api.ParentNode.querySelectorAll")}}

- -

関連情報

- - diff --git a/files/ja/web/api/element/append/index.html b/files/ja/web/api/element/append/index.html new file mode 100644 index 0000000000..82feaa6f91 --- /dev/null +++ b/files/ja/web/api/element/append/index.html @@ -0,0 +1,100 @@ +--- +title: Element.append() +slug: Web/API/Element/append +tags: + - API + - DOM + - Method + - Node + - Element + - Reference +browser-compat: api.Element.append +translation_of: Web/API/Element/append +original_slug: Web/API/ParentNode/append +--- +

{{APIRef("DOM")}}

+ +

Element.append() メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを Element のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。

+ +

{{domxref("Node.appendChild()")}} との違いは次の通りです。

+ + + +

構文

+ +
+append(...nodesOrDOMStrings)
+
+ +

引数

+ +
+
nodesOrDOMStrings
+
挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
+
+ +

例外

+ + + +

例

+ +

要素の追加

+ +
let div = document.createElement("div")
+let p = document.createElement("p")
+div.append(p)
+
+console.log(div.childNodes) // NodeList [ <p> ]
+
+ +

テキストの追加

+ +
let div = document.createElement("div")
+div.append("Some text")
+
+console.log(div.textContent) // "Some text"
+ +

要素とテキストの追加

+ +
let div = document.createElement("div")
+let p = document.createElement("p")
+div.append("Some text", p)
+
+console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]
+ +

append メソッドはスコープが効かない

+ +

append() メソッドは with 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。

+ +
let div = document.createElement("div")
+
+with(div) {
+  append("foo")
+}
+// ReferenceError: append is not defined
+ + +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/element/childelementcount/index.html b/files/ja/web/api/element/childelementcount/index.html index a06357d366..57d59747ce 100644 --- a/files/ja/web/api/element/childelementcount/index.html +++ b/files/ja/web/api/element/childelementcount/index.html @@ -1,96 +1,42 @@ --- -title: ParentNode.childElementCount +title: Element.childElementCount slug: Web/API/Element/childElementCount tags: - API - DOM - - ParentNode - Property -translation_of: Web/API/ParentNode/childElementCount + - Reference +browser-compat: api.Element.childElementCount +translation_of: Web/API/Element/childElementCount original_slug: Web/API/ParentNode/childElementCount ---
{{ APIRef("DOM") }}
-

読み取り専用の ParentNode.childElementCount プロパティは、与えられた要素の子要素の数を表す unsigned long 値を返します。

+

Element.childElementCount は読み取り専用のプロパティで、この要素の子要素の数を返します。

-
-

このプロパティは、当初 {{domxref("ElementTraversal")}} 基本インターフェースで定義されていました。このインターフェースには 2 セットの異なるプロパティが含まれており、一つは子要素を持つ {{domxref("Node")}} を対象とし、もう一つはその子要素群を対象としたものでしたが、これらは 2 つの基本インターフェースである {{domxref("ParentNode")}} と {{domxref("ChildNode")}} に移されました。この際、childElementCount は {{domxref("ParentNode")}} へ移されました。これは技術的な変更であり、互換性に影響を与えるものではありません。

-
+

構文

-

構文

+
element.childElementCount;
-
var count = node.childElementCount;
-
- -
-
count
-
unsigned long 型(つまり整数型)の戻り値.
-
node
-
{{domxref("Document")}}、{{domxref("DocumentFragment")}}、 {{domxref("Element")}}を表現するオブジェクト.
-
- -

例

+

例

-
var foo = document.getElementById('foo');
-if (foo.childElementCount > 0) {
+
let sidebar = document.getElementById('sidebar');
+if (sidebar.childElementCount > 0) {
   // Do something
 }
 

 
+
仕様書

 
+{{Specifications}}
 
-
IE8, IE9/Safari向けの互換コード

-
-
このプロパティは IE9 より前のバージョンでサポートされていません。IE9とSafariでは Document と DocumentFragment においてサポートされていません。

-
-
;(function(constructor) {
-  if (constructor &&
-      constructor.prototype &&
-      constructor.prototype.childElementCount == null) {
-    Object.defineProperty(constructor.prototype, 'childElementCount', {
-      get: function() {
-        var i = 0, count = 0, node, nodes = this.childNodes;
-        while (node = nodes[i++]) {
-          if (node.nodeType === 1) count++;
-        }
-        return count;
-      }
-    });
-  }
-})(window.Node || window.Element);

-
-
仕様

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状況コメント
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}ElementTraversal インターフェースを {{domxref("ChildNode")}} と ParentNode に分割。このメソッドは後者で定義されています。

-    {{domxref("Document")}} と {{domxref("DocumentFragment")}} が新しいインターフェースを実装しました。
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}この初期定義は ElementTraversal 基本インターフェースに追加され、{{domxref("Element")}} で使用します。

-
-
ブラウザの実装状況

-
-
+
ブラウザーの互換性

 
-
{{Compat("api.ParentNode.childElementCount")}}

+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
diff --git a/files/ja/web/api/element/children/index.html b/files/ja/web/api/element/children/index.html
new file mode 100644
index 0000000000..5dd887af4f
--- /dev/null
+++ b/files/ja/web/api/element/children/index.html
@@ -0,0 +1,58 @@
+---
+title: Element.children
+slug: Web/API/Element/children
+tags:
+  - API
+  - DOM
+  - Element
+  - HTMLCollection
+  - Property
+  - children
+browser-compat: api.Element.children
+translation_of: Web/API/Element/children
+original_slug: Web/API/ParentNode/children
+---
+
{{ APIRef("DOM") }}

+
+
children は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。

+
+
Element.children は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。

+
+
構文

+
+
+// Getter
+collection = myElement.children;
+
+// No setter; read-only property
+

+
+
返値

+
+
生きた {{ domxref("HTMLCollection") }} で、 node の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。

+
+
ノードが子要素を持たない場合、 children は要素を含まず、length は 0 です。

+
+
例 

+
+
const myElement = document.getElementById('foo');
+for (let i = 0; i < myElement.children.length; i++) {
+  console.log(myElement.children[i].tagName);
+}
+

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

+
+
diff --git a/files/ja/web/api/element/prepend/index.html b/files/ja/web/api/element/prepend/index.html
new file mode 100644
index 0000000000..9a0a993e08
--- /dev/null
+++ b/files/ja/web/api/element/prepend/index.html
@@ -0,0 +1,98 @@
+---
+title: Element.prepend()
+slug: Web/API/Element/prepend
+tags:
+  - API
+  - DOM
+  - Method
+  - Node
+  - Element
+  - Reference
+  - prepend
+translation_of: Web/API/Element/prepend
+original_slug: Web/API/ParentNode/prepend
+---
+
{{APIRef("DOM")}}

+
+
Element.prepend() メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの {{domxref("Element")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。

+
+
構文

+
+
prepend(...nodesOrDOMStrings);
+

+
+
引数

+
+

+  
nodesOrDOMStrings

+  
挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。

+

+
+
返値

+
+
undefined.

+
+
例外

+
+
+
+
例

+
+
要素の前に追加

+
+
let div = document.createElement("div");
+let p = document.createElement("p");
+let span = document.createElement("span");
+div.append(p);
+div.prepend(span);
+
+console.log(div.childNodes); // NodeList [ <span>, <p> ]
+

+
+
テキストの前に追加

+
+
let div = document.createElement("div");
+div.append("Some text");
+div.prepend("Headline: ");
+
+console.log(div.textContent); // "Headline: Some text"

+
+
要素とテキストの追加

+
+
let div = document.createElement("div");
+let p = document.createElement("p");
+div.prepend("Some text", p);
+
+console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]

+
+
prepend() メソッドはスコープが効かない

+
+
prepend() メソッドは with 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。

+
+
let div = document.createElement("div");
+
+with(div) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined 

+
+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

+
+
関連情報

+
+
diff --git a/files/ja/web/api/element/queryselectorall/index.html b/files/ja/web/api/element/queryselectorall/index.html
index ec2323fa35..08dc56b7c0 100644
--- a/files/ja/web/api/element/queryselectorall/index.html
+++ b/files/ja/web/api/element/queryselectorall/index.html
@@ -1,5 +1,5 @@
 ---
-title: element.querySelectorAll
+title: Element.querySelectorAll()
 slug: Web/API/Element/querySelectorAll
 tags:
   - API
@@ -13,59 +13,57 @@ tags:
   - Selecting Elements
   - Selectors
   - querySelector
+browser-compat: api.Element.querySelectorAll
 translation_of: Web/API/Element/querySelectorAll
+original_slug: Web/API/ParentNode/querySelectorAll
 ---
 
{{APIRef("DOM")}}

 
-
{{domxref("Element")}} の querySelectorAll() メソッドは対象要素の子孫の内、与えられた CSS セレクターに一致する要素リストを示す静的な（生きていない） {{domxref("NodeList")}} を返します（起点となる要素は、たとえマッチしていても含まれません）。

+
{{domxref("Element")}} の querySelectorAll() メソッドは、静的な (生きていない) {{domxref("NodeList")}} で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。

 
-

-
注: このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。

-

-
-
構文

+
構文

 
-
elementList = parentNode.querySelectorAll(selectors);
+
elementList = parentNode.querySelectorAll(selectors);
 

 
-
引数

+
引数

 
 

  
selectors

- 
マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}} です。この文字列は妥当な CSS セレクター文字列でなければならず、そうでない場合は SyntaxError 例外がスローされます。セレクターの仕様と要素の識別の詳細は、セレクターを使用した DOM 要素の特定を参照してください。複数のセレクターを指定する際は、カンマで区切ります。

+ 
一致させるための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な CSS セレクターでなければならず、そうでない場合は SyntaxError 例外が発生します。セレクターの仕様と要素の識別の詳細は、セレクターを使用した DOM 要素の指定を参照してください。複数のセレクターを指定する際は、カンマで区切ります。

 

 
 

-
注: 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{domxref("Document.querySelector#Escaping_special_character", "特殊文字のエスケープ", "", 1)}}を参照してください。

+
メモ: 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。

 

 
-
戻り値

+
返値

 
-
指定されたセレクターのうち1つ以上にマッチする {{domxref("Element")}} オブジェクトを含んだ非ライブな {{domxref("NodeList")}} です。

+
生きていない {{domxref("NodeList")}} で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの {{domxref("Element")}} を含みます。

 
 

-
メモ: 指定した selectors にCSS 疑似要素が含まれている場合、返されるリストは常に空になります。

+
メモ: 指定された selectors が CSS 擬似要素を含む場合、返されるリストは常に空になります。

 

 
-
例外

+
例外

 
 

  
SyntaxError

- 
指定した selectors の構文が妥当ではない。

+ 
指定された selectors の構文が妥当ではない。

 

 
-
例

+
例

 
-
dataset セレクターと属性セレクター

+
データセットセレクターと属性セレクター

 
-
<section class="box" id="sect1">
+
<section class="box" id="sect1">
   <div class="funnel-chart-percent1">10.900%</div>
   <div class="funnel-chart-percent2">3700.00%</div>
   <div class="funnel-chart-percent3">0.00%</div>
 </section>
 

 
-
// dataset セレクター
+
// データセットセレクター
 const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)];
 
 // 属性セレクター
@@ -75,129 +73,95 @@ const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`
 // const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)];
 

 
-
一致のリストを入手する

+
一致するもののリストの入手

 
-
次の例では、myBox 要素の中に存在するすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を取得しています。

 
-
var matches = myBox.querySelectorAll("p");
-

+
{{domxref("NodeList")}} で "myBox" 要素の中にあるすべての {{HTMLElement("p")}} 要素を取得するには、次のようにします。

+
+
var matches = myBox.querySelectorAll("p");

 
-
次の例では、mybox 内にある note または alert のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。

+
次の例では、文書内にある note または alert のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。

 
-
var matches = myBox.querySelectorAll("div.note, div.alert");
+
var matches = myBox.querySelectorAll("div.note, div.alert");
 

 
-
次の例では、test という ID を持つコンテナー内に位置し、直接の親要素が highlighted のクラスを持つ {{domxref("div")}} である p 要素のリストを取得します。

+
次に、 "test" という ID を持つコンテナー内に位置し、直接の親要素が "highlighted" クラスを持つ {{HTMLElement("div")}} である、<p> 要素のリストを取得します。

 
-
var container = document.querySelector("#test");
+
var container = document.querySelector("#test");
 var matches = container.querySelectorAll("div.highlighted > p");

 
-
次の例では、属性セレクターを使って、文書内にある、 data-src 属性を持つ文書内の {{domxref("iframe")}} 要素のリストを返します。

+
次の例では属性セレクターを使用しており、 data-src という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。

 
-
var matches = domument.querySelectorAll("iframe[data-src]");
-

+
var matches = document.querySelectorAll("iframe[data-src]");

 
-
次の例では、属性セレクターを使って、「ID が userlist である要素内の、data-active 属性を持ち、その値が 1 である要素群」のリストを返します。

+
次の例では、ID が userlist の要素の中にあり、data-active 属性を持ち、その値が 1 であるリスト項目のリストを返すため、属性セレクターが使用されています。

 
-
var container = document.querySelector("#userlist");
+
var container = document.querySelector("#userlist");
 var matches = container.querySelectorAll("li[data-active='1']");

 
-
一致したリストへアクセスする

+
一致したものへのアクセス

 
-
一旦、一致した要素の {{domxref("NodeList")}}} が返されると、それをちょうど配列のように試すことができます。配列が空である (length プロパティが 0 である) 場合は、一致がなかったということです。

+
一致した要素の {{domxref("NodeList")}} が返されると、配列と同様に調べることができます。配列が空であれば (つまり、 length プロパティが 0 であれば)、一致するものが見つからなかったということです。

 
-
それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。

+
それ以外の場合は、標準的な配列記法でリストの内容にアクセスすることができます。次のような一般的なループ文を使用することができます。

 
-
var highlightedItems = userList.querySelectorAll(".highlighted");
+
var highlightedItems = userList.querySelectorAll(".highlighted");
 
 highlightedItems.forEach(function(userItem) {
   deleteUser(userItem);
 });

 
 

-
注: NodeList は純正な配列ではないので、slice, some, map などのArray メソッドを持っていません。Array.from(nodeList) を使うことで純正の配列に変換することができます。

+  
メモ: NodeList は、本物の配列ではありません。つまり、slice、some、map などの配列メソッドを持っていません。これを配列に変換するには、 Array.from(nodeList) のようにします。

 

 
-
特殊な例

+
ユーザーのメモ

 
-
querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。

+
querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。

 
-
HTML

+
HTML

 
 
次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。

 
-
<div class="outer">
+
<div class="outer">
   <div class="select">
     <div class="inner">
     </div>
   </div>
 </div>

 
-
JavaScript

+
JavaScript

 
-
var select = document.querySelector('.select');
+
var select = document.querySelector('.select');
 var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, not 0!
+inner.length; // 1 です。0 ではありません!
 

 
-
この例では、"select" class を持つ <div> の文脈で ".outer .inner" を選択するとき、.outer が基準となる要素（.select で検索される）の子孫ではないにもかかわらず、".inner" class を持つ要素が見つけられています。querySelectorAll() はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。

+
この例では、select class を持つ <div> の文脈で .outer .inner を選択するとき、.outer が基準となる要素（.select で検索される）の子孫ではないにもかかわらず、.inner class を持つ要素が見つけられています。querySelectorAll() はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。

 
-
{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。

+
{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。

 
-
var select = document.querySelector('.select');
+
var select = document.querySelector('.select');
 var inner = select.querySelectorAll(':scope .outer .inner');
 inner.length; // 0
 

 
-
仕様

-
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書策定状況コメント
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Living standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}変更なし
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}初期定義
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 1')}}初期定義

-
-
ブラウザー実装状況

-
-

-
{{Compat("api.Element.querySelectorAll")}}

-

+
仕様書

+
+{{Specifications}}
+
+
ブラウザーの互換性

+
+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
-- 
cgit v1.2.3-54-g00ecf