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/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 ++++++++------------- 5 files changed, 333 insertions(+), 167 deletions(-) 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/ja/web/api/element') 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