{{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")}} からプロパティを継承しています。
Node を持つ文書のベース URL を表す {{DOMxRef("DOMString")}} を返します。Node の子が変化すれば自動的に {{DOMxRef("NodeList")}} オブジェクトが更新されることを意味します。null を返します。null を返します。null を返します。Node の名前を持つ {{DOMxRef("DOMString")}} を返します。名前の構造は、ノードの型によって異なります。例えば、{{DOMxRef("HTMLElement")}} は {{DOMxRef("HTMLAudioElement")}} に対して 'audio' というように対応するタグの名前、{{DOMxRef("Text")}} ノードは '#text' という文字列、{{DOMxRef("Document")}} ノードは '#document' という文字列になります。unsigned short を返します。使用できる値は次の通りです。
| 名称 | 値 |
|---|---|
ELEMENT_NODE |
1 |
ATTRIBUTE_NODE {{Deprecated_Inline}} |
2 |
TEXT_NODE |
3 |
CDATA_SECTION_NODE |
4 |
ENTITY_REFERENCE_NODE {{Deprecated_Inline}} |
5 |
ENTITY_NODE {{Deprecated_Inline}} |
6 |
PROCESSING_INSTRUCTION_NODE |
7 |
COMMENT_NODE |
8 |
DOCUMENT_NODE |
9 |
DOCUMENT_TYPE_NODE |
10 |
DOCUMENT_FRAGMENT_NODE |
11 |
NOTATION_NODE {{Deprecated_Inline}} |
12 |
null を返します。null を返します。null を返します。null を返します。以下のプロパティに加えて、親である {{DOMxRef("EventTarget")}} からメソッドを継承しています。
true または false の値で返します。true、そうでない場合は false である {{jsxref("Boolean")}} を返します。null を返します。複数の接頭辞があった場合の結果は実装依存です。null を返します)。接頭辞として null を与えると、デフォルトの名前空間を返します。true または false で返します。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 を返した場合、現在の再帰レベルは中止され、関数は最後の親のレベルから実行を再開します。これは、 (特定の文字列を含むテキストノードを検索するなどして) ノードが見つかった時点でループを中止するために利用できます。
rootNodeNode オブジェクトです。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)
{{Compat}}