From 068058eea2550a1b3da98a3a5af70bc9172d2be2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 26 Feb 2022 00:16:32 +0900 Subject: 2021/11/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/parentelement/index.md | 49 ++++----- files/ja/web/api/node/parentnode/index.md | 80 +++++++-------- files/ja/web/api/node/previoussibling/index.md | 81 ++++++++++----- files/ja/web/api/node/textcontent/index.md | 132 ++++++++++--------------- 4 files changed, 167 insertions(+), 175 deletions(-) (limited to 'files/ja/web/api') diff --git a/files/ja/web/api/node/parentelement/index.md b/files/ja/web/api/node/parentelement/index.md index e121601c07..8aa85b65f5 100644 --- a/files/ja/web/api/node/parentelement/index.md +++ b/files/ja/web/api/node/parentelement/index.md @@ -2,45 +2,36 @@ title: Node.parentElement slug: Web/API/Node/parentElement tags: - - DOM - - Element - - Node - - Property - - parent + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.parentElement translation_of: Web/API/Node/parentElement --- -
-
{{APIRef("DOM")}}
-
+{{APIRef("DOM")}} -

Node.parentElementのread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、null が返ります。

+**`parentElement`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、この DOM ノードの親である要素 ({{DOMxRef("Element")}}) を返します。このノードに親ノードがないか、親が DOM の {{DOMxRef("Element")}} でない場合は `null` を返します。 -

構文

+## 値 -
parentElement = node.parentElement
+現在のノードの親ノードである {{domxref("Element")}} を返します。そのようなものがない場合は `null` を返します。 -

parentElementは現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトかnullです。

+## 例 -

例

+```js +if (node.parentElement) { + node.parentElement.style.color = "red"; +} +``` -
if (node.parentElement) {
-  node.parentElement.style.color = "red";
-}
+## 仕様書 -

仕様

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

ブラウザ実装状況

+{{Compat}} -

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

+## 関連情報 -

一部のブラウザーでは、parentElementプロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。

- -

関連情報

- - +- {{domxref("Node.parentNode")}} diff --git a/files/ja/web/api/node/parentnode/index.md b/files/ja/web/api/node/parentnode/index.md index 33ea858b0c..d50c111b37 100644 --- a/files/ja/web/api/node/parentnode/index.md +++ b/files/ja/web/api/node/parentnode/index.md @@ -2,46 +2,46 @@ title: Node.parentNode slug: Web/API/Node/parentNode tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.parentNode translation_of: Web/API/Node/parentNode --- -
- {{ApiRef}}
-

概要

-

指定されたノードの DOM ツリー内の親ノードを返します。

-

構文

-
parentNode = node.parentNode
-
- -

例

-
if (node.parentNode) {
-  // ツリー上に既に存在しない場合を除き、
-  // ツリーからノードを削除します。
+{{APIRef("DOM")}}
+
+**`parentNode`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、 DOM ツリー内の特定のノードの親ノードを返します。
+
+`Document` および `DocumentFragment` [ノード](/ja/docs/Web/API/Node/nodeType)には親が付くことはないので、 `parentNode` は常に `null` になります。
+ノードが生成されてからツリーに割り当てられていない場合も `null` を返します。
+
+## 値
+
+現在のノードの親に当たる {{domxref("Node")}} です。要素の親になるのは `Element` ノード、 `Document` ノード、 `DocumentFragment` ノードの何れかです。
+
+## 例
+
+```js
+if (node.parentNode) {
+  // ノードがツリーの中にある場合は、ツリーから取り除く
   node.parentNode.removeChild(node);
-}
-

注記

-

parentNode は、以下のノードタイプについては null を返します : Attr 、Document 、DocumentFragment 、Entity 、Notation

-

また、ノードが作成された直後でまだツリーに加えられていない場合も null を返します。

-

ブラウザ実装状況

- -

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

- -

仕様書

- -

関連情報

- +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{Domxref("Node.firstChild")}} +- {{Domxref("Node.lastChild")}} +- {{Domxref("Node.childNodes")}} +- {{Domxref("Node.nextSibling")}} +- {{Domxref("Node.parentElement")}} +- {{Domxref("Node.previousSibling")}} +- {{Domxref("Node.removeChild")}} diff --git a/files/ja/web/api/node/previoussibling/index.md b/files/ja/web/api/node/previoussibling/index.md index 5506f5fd86..cec77e3af9 100644 --- a/files/ja/web/api/node/previoussibling/index.md +++ b/files/ja/web/api/node/previoussibling/index.md @@ -2,41 +2,74 @@ title: Node.previousSibling slug: Web/API/Node/previousSibling tags: - - DOM - - Gecko - - Node + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.previousSibling translation_of: Web/API/Node/previousSibling --- -
{{ApiRef}}
+{{APIRef("DOM")}} -

概要

+**`previousSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親ノードの {{domxref("Node.childNodes", "childNodes")}} リスト内で、直前にある ノードを返します。指定されたノードがリストの先頭にあった倍は `null` を返します。 -

指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。

+> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。 +> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。 +> +> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。 +> +> [`previousElementSibling`](/ja/docs/Web/API/Element/previousElementSibling) を使用すると、（テキストノードやその他の要素以外のノードを飛ばして）次の要素を取得することができます。 +> +> 子ノードのリストで反対方向に移動する場合は、 [Node.nextSibling](/ja/docs/Web/API/Node/nextSibling) を使用してください。 -

構文

+## 値 -
previousNode = node.previousSibling;
-
+現在のノードの直前のノードを表す {{domxref("Node")}} です。 +存在しない場合は `null` です。 -

例

+## 例 -
// <a><b1 id="b1"/><b2 id="b2"/></a>
+次の例では、要素にテキストノードがある場合とない場合の `previousSibling` の動作を示しています。
 
-alert( document.getElementById("b1").previousSibling ); // null
-alert( document.getElementById("b2").previousSibling.id ); // "b1"
-
+### 最初の例 -

注記

+この例では、一連の `img` 要素が互いに隣り合っており、その間にホワイトスペースがありません。 -

Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば Node.firstChild や Node.previousSibling で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。

-

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

+```html + +``` -

childNode リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。

+```js +document.getElementById("b1").previousSibling; // +document.getElementById("b2").previousSibling.id; // "b1" +``` -

仕様書

+### 2 番目の例 - +この例では、 `img` 要素の間にホワイトスペースのテキストノード（改行）があります。 + +```html + + + +``` + +```js +document.getElementById("b1").previousSibling; // #text +document.getElementById("b1").previousSibling.previousSibling; // +document.getElementById("b2").previousSibling.previousSibling; // +document.getElementById("b2").previousSibling; // #text +document.getElementById("b2").previousSibling.id; // undefined +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.nextSibling")}} +- {{domxref("Element.previousElementSibling")}} diff --git a/files/ja/web/api/node/textcontent/index.md b/files/ja/web/api/node/textcontent/index.md index 3f90221d9f..1777a5cd21 100644 --- a/files/ja/web/api/node/textcontent/index.md +++ b/files/ja/web/api/node/textcontent/index.md @@ -2,112 +2,80 @@ title: Node.textContent slug: Web/API/Node/textContent tags: - - API - - DOM - - Node - - Property - - Reference - プロパティ + - リファレンス +browser-compat: api.Node.textContent translation_of: Web/API/Node/textContent --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

textContent は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。

+**`textContent`** は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。 -
-

メモ: textContent と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは重要な点が異なります。

-
+> **Note:** `textContent` と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、 2 つのプロパティは[重要な点が異なります](#innertext_との違い)。 -

構文

+## 値 -
let text = someNode.textContent
-someOtherNode.textContent = string
-
+文字列または {{jsxref("null")}} です。値は場面によります。 -

値

+- ノードが {{domxref("document")}} または {{glossary("doctype")}} である場合、 `textContent` は {{jsxref("null")}} を返します。 -

文字列または {{jsxref("null")}}

+ > **Note:** 文書全体の*すべての*テキストと [CDATA データ](/ja/docs/Web/API/CDATASection)を取得するには、 `document.documentElement.textContent` を使用する方法があります。 -

説明

+- ノードが [CDATA セクション](/ja/docs/Web/API/CDATASection)、コメント、[処理命令ノード](/ja/docs/Web/API/ProcessingInstruction)、 [テキストノード](/ja/docs/Web/API/Text)の場合、 `textContent` はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。 +- 他のノード型の場合、`textContent` は、コメントと処理命令ノードを除く、すべての子ノードの `textContent` 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。） -

textContent の値は状況によります。

+> **Warning:** ノードの `textContent` を設定すると、そのノードの*すべて*の子が取り除かれて、指定された値を持つ単一のテキストノードに置き換わります。 - +`Node.textContent` と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。 -

ノードの textContent を設定すると、そのノードのすべての子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。

+- `textContent` は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、*すべて*の要素の中身を取得します。一方、 `innerText` は「人間が読める」要素のみを示します。 +- `textContent` はノード内のすべての要素を返します。一方、 `innerText` はスタイルを反映し、「非表示」の要素のテキストは返しません。 -

innerText との違い

+ - もっと言えば、 `innerText` は CSS のスタイルを考慮するので、 `innerText` の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。) -

Node.textContent と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。

+- `textContent` とは異なり、 `innerText` を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを*完全に破棄します*。他の要素または同じ要素にノードをもう一度挿入することは不可能です。 - +### innerHTML との違い -

innerHTML との違い

+{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 `innerHTML` を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 `textContent` は値が HTML として解析されないので性能が良くなります。 -

{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 innerHTML を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 textContent は値が HTML として解析されないので性能が良くなります。

+さらに、`textContent` を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。 -

さらに、textContent を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。

+## 例 -

例

+以下のような HTML の断片があります。 -

以下のような HTML の断片があります。

+```html +
This is some text!
+``` -
<div id="divA">This is <span>some</span> text!</div>
+... `textContent` を使用して、要素のテキストの内容を取得することができます。 -

... textContent を使用して、要素のテキストの内容を取得することができます。

+```js +let text = document.getElementById('divA').textContent; +// 変数 text の値は 'This is some text!' となります。 +``` -
let text = document.getElementById('divA').textContent;
-// 変数 text の値は 'This is some text!' となります。
+... また、要素のテキストを設定します。 -

... また、要素のテキストを設定します。

- -
document.getElementById('divA').textContent = 'This text is different!';
+```js
+document.getElementById('divA').textContent = 'This text is different!';
 // divA の HTML は次のようになります。
-// <div id="divA">This text is different!</div>
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +//
This text is different!
+``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("HTMLElement.innerText")}} +- {{domxref("Element.innerHTML")}} +- [More on differences between `innerText` and `textContent`](http://perfectionkills.com/the-poor-misunderstood-innerText/) (ブログ投稿) -- cgit v1.2.3-54-g00ecf