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 時点の英語版に同期 --- .../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 --------------------- 5 files changed, 634 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 (limited to 'files/ja/orphaned') 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")}}

- -

関連情報

- - -- cgit v1.2.3-54-g00ecf