Node

インスタンスプロパティ

以下のプロパティに加え、 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_NODE	1
ATTRIBUTE_NODE	2
TEXT_NODE	3
CDATA_SECTION_NODE	4
PROCESSING_INSTRUCTION_NODE	7
COMMENT_NODE	8
DOCUMENT_NODE	9
DOCUMENT_TYPE_NODE	10
DOCUMENT_FRAGMENT_NODE	11

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 のひとつを、引数で指定した別のノードで置き換えます。

イベント

selectstart

ユーザーがこのノード内で新しく選択を開始した時発火します。

例

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

この関数は、ある要素の最初の子を、一つも残らなくなるまで削除します。

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

この関数の使用は単一の呼び出しです。こちらでは、文書の本文を空にします。

removeAllChildren(document.body);

他の方法として、 textContent に空文字列を設定すること (document.body.textContent = "") も可能です。

すべての子ノードの走査

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

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 というラッパー関数を使用しています。

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;
}

仕様書

ブラウザーの互換性