Node
DOM の Node インターフェイスは、他の多くの DOM API オブジェクトのベースとなる抽象的な基底クラスです。したがって、これらのオブジェクト型と類似しており、しばしば交換して使用することができます。抽象クラスであるため、単なる Node オブジェクトというものは存在しません。 Node の機能を実装しているオブジェクトはすべて、何れかのサブクラスに基づいています。最も注目すべきものは、 Document, Element, DocumentFragment です。
それに加えて、あらゆる種類の DOM ノードが Node を基底とするインターフェイスで表現されます。これには、 Attr, CharacterData (Text, Comment, CDATASection, ProcessingInstruction がすべて基底とするもの), DocumentType があります。
場合によっては、ベースとなる Node インターフェイスの特定の機能が子インターフェイスに適用されないことがあります。この場合、継承するノードは状況に応じて null を返したり、例外を投げたりします。例えば、子を持てないノード型に子を追加しようとすると、例外が発生します。
インスタンスプロパティ
以下のプロパティに加え、 Node は親である EventTarget からプロパティを継承しています。
Node.baseURI読取専用-
この
Nodeを持つ文書のベース URL を表す文字列を返します。 Node.childNodes読取専用-
このノードのすべての子孫(要素、テキスト、コメント)を持つ、生きた
NodeListを返します。NodeListが生きているとは、Nodeの子が変化すれば自動的にNodeListオブジェクトが更新されることを意味します。 Node.firstChild読取専用-
ノードの直下の最初の子ノードを表す
Nodeを返します。子が存在しなければnullを返します。 Node.isConnected読取専用-
論理値で、ノードが(直接/間接的に)コンテキストオブジェクト、例えば、通常の DOM の場合は
Documentオブジェクト、あるいはシャドウ DOM の場合はShadowRootに接続されているかどうかを示します。 Node.lastChild読取専用-
ノードの直下の最後の子ノードを表す
Nodeを返します。子が存在しなければnullを返します。 Node.nextSibling読取専用-
ツリー構造で次のノードを表す
Nodeを返します。該当するノードがない場合はnullを返します。 Node.nodeName読取専用-
Nodeの名前を持つ文字列を返します。名前の構造は、ノードの型によって異なります。例えば、HTMLElementはHTMLAudioElementに対して'audio'というように対応するタグの名前、Textノードは'#text'という文字列、Documentノードは'#document'という文字列になります。 Node.nodeType読取専用-
ノードの型を表す
unsigned shortを返します。使用できる値は次の通りです。名前 値 ELEMENT_NODE1ATTRIBUTE_NODE2TEXT_NODE3CDATA_SECTION_NODE4PROCESSING_INSTRUCTION_NODE7COMMENT_NODE8DOCUMENT_NODE9DOCUMENT_TYPE_NODE10DOCUMENT_FRAGMENT_NODE11 Node.nodeValue-
現在のノードの値を取得または設定します。
Node.ownerDocument読取専用-
ノードが所属する文書を
Documentで返します。ノードが文書自身の場合は、nullを返します。 Node.parentNode読取専用-
このノードの親の
Nodeを返します。ノードがツリーの最上位である、あるいはツリーに加わっていないなど、親が存在しない場合はnullを返します。 Node.parentElement読取専用-
このノードの親の要素を
Elementで返します。ノードに親が存在しない、あるいは親がElementではない場合は、nullを返します。 Node.previousSibling読取専用-
ツリー構造で前のノードを表す
Nodeを返します。該当するノードがない場合はnullを返します。 Node.textContent-
要素や要素のすべての子孫のテキストコンテンツを取得または設定します。
インスタンスメソッド
以下のメソッドに加えて、親である EventTarget からメソッドを継承しています。
Node.appendChild()-
指定された
childNode引数を、現在のノードの最後の子として追加します。 引数が DOM ツリー上の既存のノードを参照している場合は、ノードが現在の位置から外されて新しい位置に追加されます。 Node.cloneNode()-
Nodeを複製します。また、すべての内容物を複製することもできます。既定で、ノードの内容物を複製します。 Node.compareDocumentPosition()-
現在のノードの位置を、他の文書内の別のノードと比較します。
Node.contains()-
ノードが指定したノードの子孫であるか否かを
trueまたはfalseの値で返します。 Node.getRootNode()-
コンテキストオブジェクトのルートを返します。任意で、シャドウルートが使用可能である場合にそれを含めることができます。
Node.hasChildNodes()-
要素が子ノードを持っているか否かを示す論理値を返します。
Node.insertBefore()-
現在のノードの子として、参照先ノードの前に
Nodeを挿入します。 Node.isDefaultNamespace()-
引数として名前空間の URI を受け入れて、名前空間が指定したノードの既定の名前空間であれば
true、そうでない場合はfalseである論理値を返します。 Node.isEqualNode()-
2 つのノードが同じ型であり、定義されているすべてのデータポイントが一致するか否かを表す 論理値を返します。
Node.isSameNode()-
2 つのノードが同じである(すなわち、同じオブジェクトを参照している)か否かを示す論理値を返します。
Node.lookupPrefix()-
指定した名前空間 URI の接頭辞があれば、その接頭辞を含む文字列を返します。接頭辞がない場合は
nullを返します。複数の接頭辞があった場合の結果は実装依存です。 Node.lookupNamespaceURI()-
接頭辞を受け入れて、指定したノードで接頭辞が関連付けられた名前空間が見つかった場合は名前空間の URI を返します (見つからない場合は
nullを返します)。接頭辞としてnullを与えると、既定の名前空間を返します。 Node.normalize()-
要素内のすべてのテキストノードをクリーンアップ(隣接ノードを統合し、空のノードを削除)します。
Node.removeChild()-
現在の要素から子ノードを削除します。そのノードは現在のノードの子であることが必要です。
Node.replaceChild()-
現在のノードの子
Nodeのひとつを、引数で指定した別のノードで置き換えます。
例
ノード内にあるすべての子を削除
この関数は、ある要素の最初の子を、一つも残らなくなるまで削除します。
js
function removeAllChildren(element) {
while (element.firstChild) {
element.removeChild(element.firstChild);
}
}
この関数の使用は単一の呼び出しです。こちらでは、文書の本文を空にします。
js
removeAllChildren(document.body);
他の方法として、 textContent に空文字列を設定すること (document.body.textContent = "") も可能です。
すべての子ノードの走査
次の関数は、ルートノードに含まれる(ルートノード自身も含めた)すべてのノードに対してコールバック関数を再帰的に呼び出します。
js
function eachNode(rootNode, callback) {
if (!callback) {
const nodes = [];
eachNode(rootNode, (node) => {
nodes.push(node);
});
return nodes;
}
if (callback(rootNode) === false) {
return false;
}
if (rootNode.hasChildNodes()) {
for (const node of rootNode.childNodes) {
if (eachNode(node, callback) === false) {
return;
}
}
}
}
この関数は、 rootNode のそれぞれの子孫ノードに対して(ルート自身も含め)再帰的に関数を呼び出します。
callback が省略された場合、この関数は代わりに Array を返し、そこには rootNode とその中に含まれるすべてのノードが含まれます。
callback が提供され、 false を返した場合、現在の再帰レベルは中止され、関数は最後の親のレベルから実行を再開します。これは、(特定の文字列を含むテキストノードを検索するなどして)ノードが見つかった時点でループを中止するために利用できます。
この関数には 2 つの引数があります。
rootNode-
再帰的に子孫の走査を行う
Nodeオブジェクトです。 callback省略可-
省略可能なコールバック関数で、単一の
Nodeを引数として受け取るものです。省略された場合、eachNodeはArrayで、rootNodeの中に含まれる (ルート自身も含む) ノードの一覧を返します。
次の例は eachNode() 関数の現実世界での使用方法として、ウェブページ上のテキストの検索を示します。
検索には grep というラッパー関数を使用しています。
js
function grep(parentNode, pattern) {
let matches = [];
let endScan = false;
eachNode(parentNode, (node) => {
if (endScan) {
return false;
}
// Ignore anything which isn't a text node
if (node.nodeType !== Node.TEXT_NODE) {
return;
}
if (typeof pattern === "string" && node.textContent.includes(pattern)) {
matches.push(node);
} else if (pattern.test(node.textContent)) {
if (!pattern.global) {
endScan = true;
matches = node;
} else {
matches.push(node);
}
}
});
return matches;
}
仕様書
| Specification |
|---|
| DOM Standard # interface-node |
ブラウザーの互換性
BCD tables only load in the browser