Node

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

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

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

プロパティ

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

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

メソッド

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

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

廃止メソッド

Node.hasAttributes()
要素がなんらかの属性を持っているか否かを true または false で返します。
Node.isSupported()
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 が省略された場合、この関数は代わりに Array を返し、そこには rootNode とその中に含まれるすべてのノードが含まれます。

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

引数

rootNode
再帰的に子孫の走査を行う Node オブジェクトです。
callback 省略可
省略可能なコールバック関数で、単一の Node を引数として受け取るものです。省略された場合、 eachNodeArray で、 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"

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

実際の使い方

次の例は 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 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)

仕様書

Specification
DOM Standard (DOM)
# interface-node

ブラウザーの互換性

BCD tables only load in the browser