From 6b5ccdd555c3222da227d9ae9d5aa6cd0cc1caa5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 25 Feb 2022 00:43:29 +0900 Subject: Web/API/Node を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/index.html | 318 --------------------------------------- files/ja/web/api/node/index.md | 318 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 318 insertions(+), 318 deletions(-) delete mode 100644 files/ja/web/api/node/index.html create mode 100644 files/ja/web/api/node/index.md (limited to 'files/ja') diff --git a/files/ja/web/api/node/index.html b/files/ja/web/api/node/index.html deleted file mode 100644 index dc20596b32..0000000000 --- a/files/ja/web/api/node/index.html +++ /dev/null @@ -1,318 +0,0 @@ ---- -title: Node -slug: Web/API/Node -tags: - - API - - DOM - - Document - - Element - - Interface - - Node - - Reference - - Structure - - hierarchy -translation_of: Web/API/Node -browser-compat: api.Node ---- -

{{APIRef("DOM")}}

- -

{{Glossary("DOM")}} の Node インターフェイスは、他の多くの DOM API オブジェクトのベースとなる抽象的な基底クラスです。したがって、これらのオブジェクト型と類似しており、しばしば交換して使用することができます。抽象クラスであるため、単なる Node オブジェクトというものは存在しません。 Node の機能を実装しているオブジェクトはすべて、そのサブクラスの一つをベースにしています。最も注目すべきものは、 {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}} です。

- -

それに加えて、あらゆる種類の DOM ノードが Node を基底とするインターフェイスで表現されます。これには、 {{DOMxRef("Attr")}}, {{DOMxRef("CharacterData")}} - ({{DOMxRef("Text")}}, {{DOMxRef("Comment")}}, {{DOMxRef("CDATASection")}}, {{DOMxRef("ProcessingInstruction")}} がすべて既定とするもの), {{DOMxRef("DocumentType")}}, {{DOMxRef("Notation")}}, {{DOMxRef("Entity")}}, {{DOMxRef("EntityReference")}} があります。

- -

場合によっては、ベースとなる Node インターフェイスの特定の機能が子インターフェイスに適用されないことがあります。この場合、継承するノードは状況に応じて null を返したり、例外を投げたりします。例えば、子を持てないノード型に子を追加しようとすると、例外が発生します。

- -

{{InheritanceDiagram}}

- -

プロパティ

- -

以下のプロパティに加え、 Node は親である {{DOMxRef("EventTarget")}} からプロパティを継承しています。

- -
-
{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}
-
この Node を持つ文書のベース URL を表す {{DOMxRef("DOMString")}} を返します。
-
{{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}
-
このノードのすべての子孫 (要素、テキスト、コメント) を持つ、生きた {{DOMxRef("NodeList")}} を返します。 {{DOMxRef("NodeList")}} が生きているとは、Node の子が変化すれば自動的に {{DOMxRef("NodeList")}} オブジェクトが更新されることを意味します。
-
{{DOMxRef("Node.firstChild")}}{{ReadOnlyInline}}
-
ノードの直下の最初の子ノードを表す {{DOMxRef("Node")}} を返します。子が存在しなければ null を返します。
-
{{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}
-
論理値で、ノードが (直接/間接的に) コンテキストオブジェクト、例えば、通常の DOM の場合は {{DOMxRef("Document")}} オブジェクト、あるいはシャドー DOM の場合は {{DOMxRef("ShadowRoot")}} に接続されているかどうかを示します。
-
{{DOMxRef("Node.lastChild")}}{{ReadOnlyInline}}
-
ノードの直下の最後の子ノードを表す {{DOMxRef("Node")}} を返します。子が存在しなければ null を返します。
-
{{DOMxRef("Node.nextSibling")}}{{ReadOnlyInline}}
-
ツリー構造で次のノードを表す {{DOMxRef("Node")}} を返します。該当するノードがない場合は null を返します。
-
{{DOMxRef("Node.nodeName")}}{{ReadOnlyInline}}
-
Node の名前を持つ {{DOMxRef("DOMString")}} を返します。名前の構造は、ノードの型によって異なります。例えば、{{DOMxRef("HTMLElement")}} は {{DOMxRef("HTMLAudioElement")}} に対して 'audio' というように対応するタグの名前、{{DOMxRef("Text")}} ノードは '#text' という文字列、{{DOMxRef("Document")}} ノードは '#document' という文字列になります。
-
{{DOMxRef("Node.nodeType")}}{{ReadOnlyInline}}
-
ノードの型を表す unsigned short を返します。使用できる値は次の通りです。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
名称値
ELEMENT_NODE1
ATTRIBUTE_NODE {{Deprecated_Inline}}2
TEXT_NODE3
CDATA_SECTION_NODE4
ENTITY_REFERENCE_NODE {{Deprecated_Inline}}5
ENTITY_NODE {{Deprecated_Inline}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{Deprecated_Inline}}12
-
-
{{DOMxRef("Node.nodeValue")}}
-
現在のノードの値を取得または設定します。
-
{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}
-
ノードが所属する {{DOMxRef("Document")}} を返します。ノードが document 自身の場合は、null を返します。
-
{{DOMxRef("Node.parentNode")}}{{ReadOnlyInline}}
-
このノードの親の {{DOMxRef("Node")}} を返します。ノードがツリーの最上位である、あるいはツリーに加わっていないなど、親が存在しない場合は null を返します。
-
{{DOMxRef("Node.parentElement")}}{{ReadOnlyInline}}
-
このノードの親の {{DOMxRef("Element")}} を返します。ノードに親が存在しない、あるいは親が {{DOMxRef("Element")}} ではない場合は、null を返します。
-
{{DOMxRef("Node.previousSibling")}}{{ReadOnlyInline}}
-
ツリー構造で前のノードを表す {{DOMxRef("Node")}} を返します。該当するノードがない場合は null を返します。
-
{{DOMxRef("Node.textContent")}}
-
要素や要素のすべての子孫のテキストコンテンツを取得または設定します。
-
- -

メソッド

- -

以下のプロパティに加えて、親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。

- -
-
{{DOMxRef("Node.appendChild()", "Node.appendChild(childNode)")}}
-
現在のノードの最後の子として、指定した childNode 引数を追加します。
- 引数が DOM ツリー上の既存のノードを参照している場合は、ノードが現在の位置から外されて新しい位置に追加されます。
-
{{DOMxRef("Node.cloneNode()")}}
-
{{DOMxRef("Node")}} を複製します。また、すべての内容物を複製することもできます。既定で、ノードの内容物を複製します。
-
{{DOMxRef("Node.compareDocumentPosition()")}}
-
現在のノードの位置を、他のドキュメント内の別のノードと比較します。
-
{{DOMxRef("Node.contains()")}}
-
ノードが指定したノードの子孫であるか否かを true または false の値で返します。
-
{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}
-
このノードの CSS ボックスのうち、他のノードに関連するもののリストを返します。
-
{{DOMxRef("Node.getRootNode()")}}
-
コンテキストオブジェクトのルートを返します。任意で、シャドウルートが使用可能である場合にそれを含めることができます。
-
{{DOMxRef("Node.hasChildNodes()")}}
-
要素が子ノードを持っているか否かを示す {{jsxref("Boolean")}} を返します。
-
{{DOMxRef("Node.insertBefore()")}}
-
現在のノードの子として、参照先ノードの前に {{DOMxRef("Node")}} を挿入します。
-
{{DOMxRef("Node.isDefaultNamespace()")}}
-
引数として名前空間の URI を受け入れて、名前空間が指定したノードのデフォルトの名前空間であれば true、そうでない場合は false である {{jsxref("Boolean")}} を返します。
-
{{DOMxRef("Node.isEqualNode()")}}
-
2 つのノードが同じ型であり、定義されているすべてのデータポイントが一致するか否かを表す {{jsxref("Boolean")}}を返します。
-
{{DOMxRef("Node.isSameNode()")}}
-
2 つのノードが同じである (すなわち、同じオブジェクトを参照している) か否かを示す {{jsxref("Boolean")}} 値を返します。
-
{{DOMxRef("Node.lookupPrefix()")}}
-
指定した名前空間 URI の接頭辞があれば、その接頭辞を含む {{DOMxRef("DOMString")}} を返します。接頭辞がない場合は null を返します。複数の接頭辞があった場合の結果は実装依存です。
-
{{DOMxRef("Node.lookupNamespaceURI()")}}
-
接頭辞を受け入れて、指定したノードで接頭辞が関連付けられた名前空間が見つかった場合は名前空間の URI を返します (見つからない場合は null を返します)。接頭辞として null を与えると、デフォルトの名前空間を返します。
-
{{DOMxRef("Node.normalize()")}}
-
要素内のすべてのテキストノードをクリーンアップ (隣接ノードを統合、空のノードを削除) します。
-
{{DOMxRef("Node.removeChild()")}}
-
現在の要素から子ノードを削除します。現在の要素は現在のノードの子であることが必要です。
-
{{DOMxRef("Node.replaceChild()")}}
-
現在のノードの子 {{DOMxRef("Node")}} のひとつを、引数で指定した別のノードで置き換えます。
-
- -

廃止メソッド

- -
-
{{DOMxRef("Node.hasAttributes()")}} {{deprecated_inline}}
-
要素がなんらかの属性を持っているか否かを true または false で返します。
-
{{DOMxRef("Node.isSupported()")}} {{deprecated_inline}}
-
DOM 実装が特定の機能を実装しており、またその機能が指定したノードでサポートされているかを確認して、その結果を true または false で返します。
-
- -

例

- -

ノード内にあるすべての子を削除 -

- -
function removeAllChildren(element) {
-  while (element.firstChild) {
-    element.removeChild(element.firstChild)
-  }
-}
- -

単純な使用方法

- -
/* Note: or use document.body.textContent = "" */
-removeAllChildren(document.body)
- -

すべての子ノードを走査する

- -

次の関数は、ルートノードに含まれる (ルートノード自身も含めた) すべてのノードに対してコールバック関数を再帰的に呼び出します。

- -
function eachNode(rootNode, callback) {
-	if (!callback) {
-		const nodes = []
-		eachNode(rootNode, function(node) {
-			nodes.push(node)
-		})
-		return nodes
-	}
-
-	if (false === callback(rootNode)) {
-		return false
-  }
-
-	if (rootNode.hasChildNodes()) {
-		const nodes = rootNode.childNodes
-		for (let i = 0, l = nodes.length; i < l; ++i) {
-			if (false === eachNode(nodes[i], callback)) {
-				return
-            }
-        }
-	}
-}
-
- -

構文

- -
eachNode(rootNode, callback)
- -

解説

- -

rootNode の (ルート自身を含む) 各子孫ノードに対して、関数を再帰的に呼び出します。

- -

callback -が省略された場合、この関数は代わりに {{jsxref("Array")}} を返し、そこには rootNode とその中に含まれるすべてのノードが含まれます。

- -

callback が提供され、 false を返した場合、現在の再帰レベルは中止され、関数は最後の親のレベルから実行を再開します。これは、 (特定の文字列を含むテキストノードを検索するなどして) ノードが見つかった時点でループを中止するために利用できます。 -

- -

引数

- -
-
rootNode
-
再帰的に子孫の走査を行う Node オブジェクトです。
-
callback {{optional_inline}}
-
省略可能なコールバック関数で、単一の Node を引数として受け取るものです。省略された場合、 eachNode は {{jsxref("Array")}} で、 rootNode の中に含まれる (ルート自身も含む) ノードの一覧を返します。
-
- -

単純な使用

- -

以下の例は、"box" という名前の <div> 要素の中にあるそれぞれの <span> 要素の textContent プロパティを出力します。

- -
<div id="box">
-  <span>Foo</span>
-  <span>Bar</span>
-  <span>Baz</span>
-</div>
- -
const box = document.getElementById("box")
-eachNode(box, function(node) {
-  if (null != node.textContent) {
-    console.log(node.textContent)
-  }
-})
- -

上記の例は、ユーザーのコンソールに以下の文字列を結果として出力します。

- -
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
- -
-

注: ホワイトスペースは {{DOMxRef("Text")}} ノードの一部を形成し、インデントと改行は独立した Text を Element ノードの間に形成します。

-
- -

実際の使い方

- -

次の例は eachNode() 関数の現実世界での使用方法として、ウェブページ上のテキストの検索を示します。

- -

検索には grep というラッパー関数を使用しています。

- -
function grep(parentNode, pattern) {
-	const matches = []
-	let endScan = false
-
-	eachNode(parentNode, function(node){
-		if (endScan) {
-			return false
-    }
-
-		// Ignore anything which isn't a text node
-		if (node.nodeType !== Node.TEXT_NODE) {
-			return
-    }
-
-		if (typeof pattern === "string") {
-			if (-1 !== node.textContent.indexOf(pattern)) {
-				matches.push(node)
-      }
-		}
-		else if (pattern.test(node.textContent)) {
-			if (!pattern.global) {
-				endScan = true
-				matches = node
-			}
-			else {
-        matches.push(node)
-      }
-		}
-	})
-
-	return matches
-}
- -

For example, to find {{DOMxRef("Text")}} nodes that contain typos:

- -
const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]
-const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi")
-const mistakes = grep(document.body, pattern)
-console.log(mistakes)
-
- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

diff --git a/files/ja/web/api/node/index.md b/files/ja/web/api/node/index.md new file mode 100644 index 0000000000..dc20596b32 --- /dev/null +++ b/files/ja/web/api/node/index.md @@ -0,0 +1,318 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Document + - Element + - Interface + - Node + - Reference + - Structure + - hierarchy +translation_of: Web/API/Node +browser-compat: api.Node +--- +

{{APIRef("DOM")}}

+ +

{{Glossary("DOM")}} の Node インターフェイスは、他の多くの DOM API オブジェクトのベースとなる抽象的な基底クラスです。したがって、これらのオブジェクト型と類似しており、しばしば交換して使用することができます。抽象クラスであるため、単なる Node オブジェクトというものは存在しません。 Node の機能を実装しているオブジェクトはすべて、そのサブクラスの一つをベースにしています。最も注目すべきものは、 {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}} です。

+ +

それに加えて、あらゆる種類の DOM ノードが Node を基底とするインターフェイスで表現されます。これには、 {{DOMxRef("Attr")}}, {{DOMxRef("CharacterData")}} + ({{DOMxRef("Text")}}, {{DOMxRef("Comment")}}, {{DOMxRef("CDATASection")}}, {{DOMxRef("ProcessingInstruction")}} がすべて既定とするもの), {{DOMxRef("DocumentType")}}, {{DOMxRef("Notation")}}, {{DOMxRef("Entity")}}, {{DOMxRef("EntityReference")}} があります。

+ +

場合によっては、ベースとなる Node インターフェイスの特定の機能が子インターフェイスに適用されないことがあります。この場合、継承するノードは状況に応じて null を返したり、例外を投げたりします。例えば、子を持てないノード型に子を追加しようとすると、例外が発生します。

+ +

{{InheritanceDiagram}}

+ +

プロパティ

+ +

以下のプロパティに加え、 Node は親である {{DOMxRef("EventTarget")}} からプロパティを継承しています。

+ +
+
{{DOMxRef("Node.baseURI")}}{{ReadOnlyInline}}
+
この Node を持つ文書のベース URL を表す {{DOMxRef("DOMString")}} を返します。
+
{{DOMxRef("Node.childNodes")}}{{ReadOnlyInline}}
+
このノードのすべての子孫 (要素、テキスト、コメント) を持つ、生きた {{DOMxRef("NodeList")}} を返します。 {{DOMxRef("NodeList")}} が生きているとは、Node の子が変化すれば自動的に {{DOMxRef("NodeList")}} オブジェクトが更新されることを意味します。
+
{{DOMxRef("Node.firstChild")}}{{ReadOnlyInline}}
+
ノードの直下の最初の子ノードを表す {{DOMxRef("Node")}} を返します。子が存在しなければ null を返します。
+
{{DOMxRef("Node.isConnected")}}{{ReadOnlyInline}}
+
論理値で、ノードが (直接/間接的に) コンテキストオブジェクト、例えば、通常の DOM の場合は {{DOMxRef("Document")}} オブジェクト、あるいはシャドー DOM の場合は {{DOMxRef("ShadowRoot")}} に接続されているかどうかを示します。
+
{{DOMxRef("Node.lastChild")}}{{ReadOnlyInline}}
+
ノードの直下の最後の子ノードを表す {{DOMxRef("Node")}} を返します。子が存在しなければ null を返します。
+
{{DOMxRef("Node.nextSibling")}}{{ReadOnlyInline}}
+
ツリー構造で次のノードを表す {{DOMxRef("Node")}} を返します。該当するノードがない場合は null を返します。
+
{{DOMxRef("Node.nodeName")}}{{ReadOnlyInline}}
+
Node の名前を持つ {{DOMxRef("DOMString")}} を返します。名前の構造は、ノードの型によって異なります。例えば、{{DOMxRef("HTMLElement")}} は {{DOMxRef("HTMLAudioElement")}} に対して 'audio' というように対応するタグの名前、{{DOMxRef("Text")}} ノードは '#text' という文字列、{{DOMxRef("Document")}} ノードは '#document' という文字列になります。
+
{{DOMxRef("Node.nodeType")}}{{ReadOnlyInline}}
+
ノードの型を表す unsigned short を返します。使用できる値は次の通りです。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称値
ELEMENT_NODE1
ATTRIBUTE_NODE {{Deprecated_Inline}}2
TEXT_NODE3
CDATA_SECTION_NODE4
ENTITY_REFERENCE_NODE {{Deprecated_Inline}}5
ENTITY_NODE {{Deprecated_Inline}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{Deprecated_Inline}}12
+
+
{{DOMxRef("Node.nodeValue")}}
+
現在のノードの値を取得または設定します。
+
{{DOMxRef("Node.ownerDocument")}}{{ReadOnlyInline}}
+
ノードが所属する {{DOMxRef("Document")}} を返します。ノードが document 自身の場合は、null を返します。
+
{{DOMxRef("Node.parentNode")}}{{ReadOnlyInline}}
+
このノードの親の {{DOMxRef("Node")}} を返します。ノードがツリーの最上位である、あるいはツリーに加わっていないなど、親が存在しない場合は null を返します。
+
{{DOMxRef("Node.parentElement")}}{{ReadOnlyInline}}
+
このノードの親の {{DOMxRef("Element")}} を返します。ノードに親が存在しない、あるいは親が {{DOMxRef("Element")}} ではない場合は、null を返します。
+
{{DOMxRef("Node.previousSibling")}}{{ReadOnlyInline}}
+
ツリー構造で前のノードを表す {{DOMxRef("Node")}} を返します。該当するノードがない場合は null を返します。
+
{{DOMxRef("Node.textContent")}}
+
要素や要素のすべての子孫のテキストコンテンツを取得または設定します。
+
+ +

メソッド

+ +

以下のプロパティに加えて、親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。

+ +
+
{{DOMxRef("Node.appendChild()", "Node.appendChild(childNode)")}}
+
現在のノードの最後の子として、指定した childNode 引数を追加します。
+ 引数が DOM ツリー上の既存のノードを参照している場合は、ノードが現在の位置から外されて新しい位置に追加されます。
+
{{DOMxRef("Node.cloneNode()")}}
+
{{DOMxRef("Node")}} を複製します。また、すべての内容物を複製することもできます。既定で、ノードの内容物を複製します。
+
{{DOMxRef("Node.compareDocumentPosition()")}}
+
現在のノードの位置を、他のドキュメント内の別のノードと比較します。
+
{{DOMxRef("Node.contains()")}}
+
ノードが指定したノードの子孫であるか否かを true または false の値で返します。
+
{{domxref("Node.getBoxQuads()")}} {{experimental_inline}}
+
このノードの CSS ボックスのうち、他のノードに関連するもののリストを返します。
+
{{DOMxRef("Node.getRootNode()")}}
+
コンテキストオブジェクトのルートを返します。任意で、シャドウルートが使用可能である場合にそれを含めることができます。
+
{{DOMxRef("Node.hasChildNodes()")}}
+
要素が子ノードを持っているか否かを示す {{jsxref("Boolean")}} を返します。
+
{{DOMxRef("Node.insertBefore()")}}
+
現在のノードの子として、参照先ノードの前に {{DOMxRef("Node")}} を挿入します。
+
{{DOMxRef("Node.isDefaultNamespace()")}}
+
引数として名前空間の URI を受け入れて、名前空間が指定したノードのデフォルトの名前空間であれば true、そうでない場合は false である {{jsxref("Boolean")}} を返します。
+
{{DOMxRef("Node.isEqualNode()")}}
+
2 つのノードが同じ型であり、定義されているすべてのデータポイントが一致するか否かを表す {{jsxref("Boolean")}}を返します。
+
{{DOMxRef("Node.isSameNode()")}}
+
2 つのノードが同じである (すなわち、同じオブジェクトを参照している) か否かを示す {{jsxref("Boolean")}} 値を返します。
+
{{DOMxRef("Node.lookupPrefix()")}}
+
指定した名前空間 URI の接頭辞があれば、その接頭辞を含む {{DOMxRef("DOMString")}} を返します。接頭辞がない場合は null を返します。複数の接頭辞があった場合の結果は実装依存です。
+
{{DOMxRef("Node.lookupNamespaceURI()")}}
+
接頭辞を受け入れて、指定したノードで接頭辞が関連付けられた名前空間が見つかった場合は名前空間の URI を返します (見つからない場合は null を返します)。接頭辞として null を与えると、デフォルトの名前空間を返します。
+
{{DOMxRef("Node.normalize()")}}
+
要素内のすべてのテキストノードをクリーンアップ (隣接ノードを統合、空のノードを削除) します。
+
{{DOMxRef("Node.removeChild()")}}
+
現在の要素から子ノードを削除します。現在の要素は現在のノードの子であることが必要です。
+
{{DOMxRef("Node.replaceChild()")}}
+
現在のノードの子 {{DOMxRef("Node")}} のひとつを、引数で指定した別のノードで置き換えます。
+
+ +

廃止メソッド

+ +
+
{{DOMxRef("Node.hasAttributes()")}} {{deprecated_inline}}
+
要素がなんらかの属性を持っているか否かを true または false で返します。
+
{{DOMxRef("Node.isSupported()")}} {{deprecated_inline}}
+
DOM 実装が特定の機能を実装しており、またその機能が指定したノードでサポートされているかを確認して、その結果を true または false で返します。
+
+ +

例

+ +

ノード内にあるすべての子を削除 +

+ +
function removeAllChildren(element) {
+  while (element.firstChild) {
+    element.removeChild(element.firstChild)
+  }
+}
+ +

単純な使用方法

+ +
/* Note: or use document.body.textContent = "" */
+removeAllChildren(document.body)
+ +

すべての子ノードを走査する

+ +

次の関数は、ルートノードに含まれる (ルートノード自身も含めた) すべてのノードに対してコールバック関数を再帰的に呼び出します。

+ +
function eachNode(rootNode, callback) {
+	if (!callback) {
+		const nodes = []
+		eachNode(rootNode, function(node) {
+			nodes.push(node)
+		})
+		return nodes
+	}
+
+	if (false === callback(rootNode)) {
+		return false
+  }
+
+	if (rootNode.hasChildNodes()) {
+		const nodes = rootNode.childNodes
+		for (let i = 0, l = nodes.length; i < l; ++i) {
+			if (false === eachNode(nodes[i], callback)) {
+				return
+            }
+        }
+	}
+}
+
+ +

構文

+ +
eachNode(rootNode, callback)
+ +

解説

+ +

rootNode の (ルート自身を含む) 各子孫ノードに対して、関数を再帰的に呼び出します。

+ +

callback +が省略された場合、この関数は代わりに {{jsxref("Array")}} を返し、そこには rootNode とその中に含まれるすべてのノードが含まれます。

+ +

callback が提供され、 false を返した場合、現在の再帰レベルは中止され、関数は最後の親のレベルから実行を再開します。これは、 (特定の文字列を含むテキストノードを検索するなどして) ノードが見つかった時点でループを中止するために利用できます。 +

+ +

引数

+ +
+
rootNode
+
再帰的に子孫の走査を行う Node オブジェクトです。
+
callback {{optional_inline}}
+
省略可能なコールバック関数で、単一の Node を引数として受け取るものです。省略された場合、 eachNode は {{jsxref("Array")}} で、 rootNode の中に含まれる (ルート自身も含む) ノードの一覧を返します。
+
+ +

単純な使用

+ +

以下の例は、"box" という名前の <div> 要素の中にあるそれぞれの <span> 要素の textContent プロパティを出力します。

+ +
<div id="box">
+  <span>Foo</span>
+  <span>Bar</span>
+  <span>Baz</span>
+</div>
+ +
const box = document.getElementById("box")
+eachNode(box, function(node) {
+  if (null != node.textContent) {
+    console.log(node.textContent)
+  }
+})
+ +

上記の例は、ユーザーのコンソールに以下の文字列を結果として出力します。

+ +
"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"
+ +
+

注: ホワイトスペースは {{DOMxRef("Text")}} ノードの一部を形成し、インデントと改行は独立した Text を Element ノードの間に形成します。

+
+ +

実際の使い方

+ +

次の例は eachNode() 関数の現実世界での使用方法として、ウェブページ上のテキストの検索を示します。

+ +

検索には grep というラッパー関数を使用しています。

+ +
function grep(parentNode, pattern) {
+	const matches = []
+	let endScan = false
+
+	eachNode(parentNode, function(node){
+		if (endScan) {
+			return false
+    }
+
+		// Ignore anything which isn't a text node
+		if (node.nodeType !== Node.TEXT_NODE) {
+			return
+    }
+
+		if (typeof pattern === "string") {
+			if (-1 !== node.textContent.indexOf(pattern)) {
+				matches.push(node)
+      }
+		}
+		else if (pattern.test(node.textContent)) {
+			if (!pattern.global) {
+				endScan = true
+				matches = node
+			}
+			else {
+        matches.push(node)
+      }
+		}
+	})
+
+	return matches
+}
+ +

For example, to find {{DOMxRef("Text")}} nodes that contain typos:

+ +
const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"]
+const pattern = new RegExp("\\b(" + typos.join("|") + ")\\b", "gi")
+const mistakes = grep(document.body, pattern)
+console.log(mistakes)
+
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

-- cgit v1.2.3-54-g00ecf