path: root/files/ja/web/api/node/index.html

---
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
---
<p>{{APIRef("DOM")}}</p>

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

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

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

<p>{{InheritanceDiagram}}</p>

<h2 id="Properties">プロパティ</h2>

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

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

<h2 id="Methods">メソッド</h2>

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

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

<h3 id="Obsolete_methods">廃止メソッド</h3>

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

<h2 id="Examples">例</h2>

<h3 id="Remove_all_children_nested_within_a_node">ノード内にあるすべての子を削除
</h3>

<pre class="brush: js">function removeAllChildren(element) {
  while (element.firstChild) {
    element.removeChild(element.firstChild)
  }
}</pre>

<h4 id="Sample_usage">単純な使用方法</h4>

<pre class="brush: js">/* Note: or use document.body.textContent = "" */
removeAllChildren(document.body)</pre>

<h3 id="Recurse_through_child_nodes">すべての子ノードを走査する</h3>

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

<pre class="brush: js">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 &lt; l; ++i) {
			if (false === eachNode(nodes[i], callback)) {
				return
            }
        }
	}
}
</pre>

<h4 id="Syntax">構文</h4>

<pre
  class="brush: js">eachNode(<var>rootNode</var>, <var>callback</var>)</pre>

<h4 id="Description">解説</h4>

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

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

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

<h4 id="Parameters">引数</h4>

<dl>
  <dt><code><var>rootNode</var></code></dt>
  <dd>再帰的に子孫の走査を行う <code>Node</code> オブジェクトです。</dd>
  <dt><code><var>callback</var></code> {{optional_inline}}</dt>
  <dd>省略可能なコールバック<a
      href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function">関数</a>で、単一の <code>Node</code> を引数として受け取るものです。省略された場合、 <code>eachNode</code> は {{jsxref("Array")}} で、 <code><var>rootNode</var></code> の中に含まれる (ルート自身も含む) ノードの一覧を返します。</dd>
</dl>

<h4 id="Sample_usage_2">単純な使用</h4>

<p>以下の例は、<code>"box"</code> という名前の <code>&lt;div&gt;</code> 要素の中にあるそれぞれの <code>&lt;span&gt;</code> 要素の <a href="/ja/docs/Web/API/Node/textContent"><code>textContent</code></a> プロパティを出力します。</p>

<pre class="brush: html">&lt;div id="box"&gt;
  &lt;span&gt;Foo&lt;/span&gt;
  &lt;span&gt;Bar&lt;/span&gt;
  &lt;span&gt;Baz&lt;/span&gt;
&lt;/div&gt;</pre>

<pre class="brush: js">const box = document.getElementById("box")
eachNode(box, function(node) {
  if (null != node.textContent) {
    console.log(node.textContent)
  }
})</pre>

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

<pre class="brush: js">"\n\t", "Foo", "\n\t", "Bar", "\n\t", "Baz"</pre>

<div class="notecard note">
  <p><strong>注:</strong> ホワイトスペースは {{DOMxRef("Text")}} ノードの一部を形成し、インデントと改行は独立した <code>Text</code> を <code>Element</code> ノードの間に形成します。</p>
</div>

<h4 id="Realistic_usage">実際の使い方</h4>

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

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

<pre class="brush: js">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
}</pre>

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

<pre class="brush: js">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)
</pre>

<h2 id="Specifications">仕様書</h2>

{{Specifications}}

<h2 id="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat}}</p>