Node - ノード

公開日: 2017/02/23

Nodeは、要素(Element)やテキスト(Text)、コメント(Comment)などを表すオブジェクトです。

概要

名前

Node

継承

EventTarget
Node

実装

実装するインターフェイスはありません。

IDL

[Exposed=Window]
interface Node : EventTarget {
  const unsigned short ELEMENT_NODE = 1;
  const unsigned short ATTRIBUTE_NODE = 2;
  const unsigned short TEXT_NODE = 3;
  const unsigned short CDATA_SECTION_NODE = 4;
  const unsigned short ENTITY_REFERENCE_NODE = 5; // historical
  const unsigned short ENTITY_NODE = 6; // historical
  const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
  const unsigned short COMMENT_NODE = 8;
  const unsigned short DOCUMENT_NODE = 9;
  const unsigned short DOCUMENT_TYPE_NODE = 10;
  const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
  const unsigned short NOTATION_NODE = 12; // historical
  readonly attribute unsigned short nodeType;
  readonly attribute DOMString nodeName;

  readonly attribute USVString baseURI;

  readonly attribute boolean isConnected;
  readonly attribute Document? ownerDocument;
  Node getRootNode(optional GetRootNodeOptions options);
  readonly attribute Node? parentNode;
  readonly attribute Element? parentElement;
  boolean hasChildNodes();
  [SameObject] readonly attribute NodeList childNodes;
  readonly attribute Node? firstChild;
  readonly attribute Node? lastChild;
  readonly attribute Node? previousSibling;
  readonly attribute Node? nextSibling;

  [CEReactions] attribute DOMString? nodeValue;
  [CEReactions] attribute DOMString? textContent;
  [CEReactions] void normalize();

  [CEReactions, NewObject] Node cloneNode(optional boolean deep = false);
  boolean isEqualNode(Node? otherNode);
  boolean isSameNode(Node? otherNode); // historical alias of ===

  const unsigned short DOCUMENT_POSITION_DISCONNECTED = 0x01;
  const unsigned short DOCUMENT_POSITION_PRECEDING = 0x02;
  const unsigned short DOCUMENT_POSITION_FOLLOWING = 0x04;
  const unsigned short DOCUMENT_POSITION_CONTAINS = 0x08;
  const unsigned short DOCUMENT_POSITION_CONTAINED_BY = 0x10;
  const unsigned short DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 0x20;
  unsigned short compareDocumentPosition(Node other);
  boolean contains(Node? other);

  DOMString? lookupPrefix(DOMString? namespace);
  DOMString? lookupNamespaceURI(DOMString? prefix);
  boolean isDefaultNamespace(DOMString? namespace);

  [CEReactions] Node insertBefore(Node node, Node? child);
  [CEReactions] Node appendChild(Node node);
  [CEReactions] Node replaceChild(Node node, Node child);
  [CEReactions] Node removeChild(Node child);
};

dictionary GetRootNodeOptions {
  boolean composed = false;
};

仕様書

https://dom.spec.whatwg.org/#node

説明

Nodeは、Nodeそのものではなく、これを継承するオブジェクトを通して利用する機会が多い、基本的なインターフェイスです。例えば、Nodeは要素(Element)に継承されます。つまり、要素(Element)はNodeの全てのメソッド、プロパティ、定数を備えているということです。

HTML

<!-- 何らかの要素 -->
<p id="hoge">SYNCER</p>

JavaScript

// 要素(Element)を取得
var element = document.getElementById( "hoge" ) ;

// ElementはNodeを継承するので、Nodeのプロパティやメソッドを利用できる
element.textContent = "SYNCER is great." ;	// Nodeのプロパティを使用
element.appendChild( otherElement ) ;	// Nodeのメソッドを使用

プロパティ

Node.baseURI

Chrome: ●
Firefox: ●
Edge: ●
IE: ×
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードが所属するドキュメントの基準のURIを返します。

Node.childNodes

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

全ての子ノードを返します。

Node.firstChild

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

最初の子ノードを返します。

Node.isConnected

Chrome: ● 51+
Firefox: ● 49+
Edge: ×
IE: ×
Safari: ● 10+
Opera: ● 38+
iOS: ● 10.0+
Android: ×

ノードがドキュメントツリーに配置されている場合にtrue、されていない場合にfalseを返します。

Node.lastChild

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

最後の子ノードを返します。

Node.nextSibling

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身の直後にあるノードを返します。

Node.nodeName

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの名前を文字列で返します。

Node.nodeType

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類を表す整数を返します。整数は、定数に対応しています。

Node.nodeValue

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの値を返します。

Node.ownerDocument

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードが所属するドキュメントを返します。

Node.parentElement

Chrome: ●
Firefox: ● 9+
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

親の要素を返します。

Node.parentNode

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

親のノードを返します。

Node.previousSibling

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身の直前にあるノードを返します。

Node.textContent

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身が含む全てのテキストを繋ぎ合わせて返します。

メソッド

EventTargetのメソッドを利用できます。

Node.appendChild()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

末尾の子ノードとして、新しいノードを追加します。

Node.cloneNode()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードを複製します。

Node.compareDocumentPosition()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身と対象のノードの位置関係を確認します。

Node.contains()

Chrome: ●
Firefox: ● 9+
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

対象のノードが、自身の子孫であるか否かを確認します。

Node.getRootNode()

Chrome: ● 54+
Firefox: ×
Edge: ×
IE: ×
Safari: ×
Opera: ● 41+
iOS: ×
Android: ×

ノードが所属するルートのノードを返します。主にShadow DOMで利用します。

Node.hasChildNodes()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードが子ノードを持っているか否かを確認します。

Node.insertBefore()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

対象の子ノードの直前に、新しいノードを挿入します。

Node.isDefaultNamespace()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

名前空間がデフォルトか否かを確認します。

Node.isEqualNode()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

自身と対象のノードの内容が同じか否かを確認します。

Node.isSameNode()

Chrome: ●
Firefox: ● 48+
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

対象のノードが自分自身か否かを確認します。代わりに厳密な比較演算子(===)を利用して下さい。

Node.lookupNamespaceURI()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

接頭辞を指定して、名前空間のURIを取得します。

Node.lookupPrefix()

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

名前空間を指定して、接頭辞を取得します。

Node.normalize()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

子ノードを整理します。連続した別々のテキストノードを1つにまとめ、空のテキストノードを削除します。

Node.removeChild()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

対象の子ノードを削除します。

Node.replaceChild()

Chrome: ●
Firefox: ●
Edge: ●
IE: ●
Safari: ●
Opera: ●
iOS: ●
Android: ●

対象の子ノードと、新しいノードを置換します。

定数

Node.ATTRIBUTE_NODE = 2

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。2は属性を示します。

Node.CDATA_SECTION_NODE = 4

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。4はCDATAセクションを示します。

Node.COMMENT_NODE = 8

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。8はコメントを示します。

Node.DOCUMENT_FRAGMENT_NODE = 11

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。11はドキュメントフラグメントを示します。

Node.DOCUMENT_NODE = 9

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。9はドキュメントを示します。

Node.DOCUMENT_POSITION_CONTAINED_BY = 0x10

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの位置関係。0x10は、相手が自分の子孫であることを示します。

Node.DOCUMENT_POSITION_CONTAINS = 0x08

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの位置関係。0x08は、相手が自分の祖先であることを示します。

Node.DOCUMENT_POSITION_DISCONNECTED = 0x01

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの位置関係。0x01は、自分と相手が同じツリーにないことを示します。

Node.DOCUMENT_POSITION_FOLLOWING = 0x04

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの位置関係。0x04は、相手が自分より後方にあることを示します。

Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 0x20

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの位置関係。0x20は、位置関係が定まっていないことを示します。

Node.DOCUMENT_POSITION_PRECEDING = 0x02

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの位置関係。0x02は、相手が自分より前方にあることを示します。

Node.DOCUMENT_TYPE_NODE = 10

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。10は文書型宣言を示します。

Node.ELEMENT_NODE = 1

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。1は要素を示します。

Node.ENTITY_NODE = 6

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。6はエンティティを示します。

Node.ENTITY_REFERENCE_NODE = 5

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。5はエンティティリファレンスを示します。

Node.NOTATION_NODE = 12

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。12はノーテーションを示します。

Node.PROCESSING_INSTRUCTION_NODE = 7

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。7は処理命令を示します。

Node.TEXT_NODE = 3

Chrome: ●
Firefox: ●
Edge: ●
IE: ● 9+
Safari: ●
Opera: ●
iOS: ●
Android: ●

ノードの種類。3はテキストを示します。

サポート状況

Nodeのサポート状況です。

ブラウザ	サポート状況	ブラウザ	サポート状況
Chrome	Supported	Firefox	Supported
Edge	Supported	Internet Explorer	Supported
Safari	Supported	Opera	Supported
iOS Safari	Supported	Android	Supported

Chrome

バージョン	サポート状況	公開時期	シェア
57	Supported	2017年3月頃	0.1%
56	Supported	2017年1月頃	12.02%
55	Supported	2016年12月頃	12.36%
54	Supported	2016年10月頃	0.44%
53	Supported	2016年9月頃	0.25%
52	Supported	2016年7月頃	0.27%
51	Supported	2016年6月頃	0.4%
50	Supported	2016年4月頃	0.32%
49	Supported	2016年3月頃	0.47%
48	Supported	2016年1月頃	0.02%
47	Supported	2015年12月頃	0.06%
46	Supported	2015年10月頃	0.56%
45	Supported	2015年9月頃	0.01%
44	Supported	2015年7月頃	0.83%
43	Supported	2015年5月頃	0.05%
42	Supported	2015年4月頃	0.05%
41	Supported	2015年3月頃	0.01%
40	Supported	2015年1月頃	0.59%
39	Supported	2014年11月頃	0.02%
38	Supported	2014年10月頃	0.08%
37	Supported	2014年8月頃	0.01%
36	Supported	2014年7月頃	0.01%
35	Supported	2014年5月頃	0.01%
34	Supported	2014年4月頃	0.14%
33	Supported	2014年2月頃	0.01%
32	Supported	2014年1月頃	0%
31	Supported	2013年11月頃	0.01%
30	Supported	2013年10月頃	0.03%
29	Supported	2013年8月頃	0%
28	Supported	2013年6月頃	0.03%
27	Supported	2013年5月頃	0.01%
26	Supported	2013年3月頃	0%
25	Supported	2013年2月頃	0%
24	Supported	2013年1月頃	0%
23	Supported	2012年11月頃	0%
22	Supported	2012年9月頃	0%
21	Supported	2012年7月頃	0%
20	Supported	2012年6月頃	0%
19	Supported	2012年5月頃	0%
18	Supported	2012年3月頃	0.01%
17	Supported	2012年2月頃	0.01%
16	Supported	2011年12月頃	0%
15	Supported	2011年10月頃	0%
14	Supported	2011年9月頃	0%

Firefox

バージョン	サポート状況	公開時期	シェア
52	Supported	2017年3月頃	0.12%
51	Supported	2017年1月頃	1.7%
50	Supported	2016年11月頃	0.78%
49	Supported	2016年9月頃	0.02%
48	Supported	2016年8月頃	0.07%
47	Supported	2016年6月頃	0.03%
46	Supported	2016年4月頃	0.01%
45	Supported	2016年3月頃	0.1%
44	Supported	2016年1月頃	0.01%
43	Supported	2015年12月頃	0.02%
42	Supported	2015年11月頃	0.01%
41	Supported	2015年9月頃	0%
40	Supported	2015年8月頃	0.02%
39	Supported	2015年7月頃	0.01%
38	Supported	2015年5月頃	0.02%
37	Supported	2015年3月頃	0%
36	Supported	2015年2月頃	0.01%
35	Supported	2015年1月頃	0%
34	Supported	2014年12月頃	0.01%
33	Supported	2014年10月頃	0%
32	Supported	2014年9月頃	0%
31	Supported	2014年7月頃	0.01%
30	Supported	2014年6月頃	0%
29	Supported	2014年4月頃	0%
28	Supported	2014年3月頃	0.01%
27	Supported	2014年2月頃	0%
26	Supported	2013年12月頃	0%
25	Supported	2013年10月頃	0%
24	Supported	2013年9月頃	0%
23	Supported	2013年8月頃	0%
22	Supported	2013年6月頃	0%
21	Supported	2013年5月頃	0%
20	Supported	2013年4月頃	0%
19	Supported	2013年2月頃	0%
18	Supported	2013年1月頃	0%
17	Supported	2012年11月頃	0%
16	Supported	2012年10月頃	0%
15	Supported	2012年8月頃	0%
14	Supported	2012年7月頃	0%
13	Supported	2012年6月頃	0%
12	Supported	2012年4月頃	0%
11	Supported	2012年3月頃	0%
10	Supported	2012年1月頃	0%
9	Supported	2011年12月頃	0%
8	Supported	2011年11月頃	0%
7	Supported	2011年9月頃	0%
6	Supported	2011年8月頃	0%
5	Supported	2011年6月頃	0%
4	Supported	2011年3月頃	0%

Edge

バージョン	サポート状況	公開時期	シェア
14	Supported	2016年2月頃	1.05%
13	Supported	2015年9月頃	0.08%

Internet Explorer

バージョン	サポート状況	公開時期	シェア
11	Supported	2013年10月頃	4.99%
10	Supported	2012年8月頃	0.09%
9	Supported	2011年3月頃	0.18%
8	Supported	2009年3月頃	0.04%
7	Supported	2006年10月頃	0.01%
6	Supported	2001年8月頃	0%

Safari

バージョン	サポート状況	公開時期	シェア
10	Supported	2016年10月頃	0%
9.1	Supported	2015年9月頃	0%
8.0	Supported	2014年10月頃	0%
7.1	Supported	2013年10月頃	0%
6.0	Supported	2012年7月頃	0%
5.1	Supported	2011年7月頃	0%
4	Supported	2009年6月頃	0%

Opera

バージョン	サポート状況	公開時期	シェア
43	Supported	2017年2月頃	0.06%
42	Supported	2016年12月頃	0.09%
41	Supported	2016年10月頃	0.01%
40	Supported	2016年9月頃	0%
39	Supported	2016年8月頃	0%
38	Supported	2016年6月頃	0%
37	Supported	2016年5月頃	0.01%
36	Supported	2016年3月頃	0.01%
35	Supported	2016年2月頃	0%
34	Supported	2015年12月頃	0%
33	Supported	2015年10月頃	0%
32	Supported	2015年9月頃	0%
31	Supported	2015年8月頃	0%
30	Supported	2015年6月頃	0%
29	Supported	2015年4月頃	0%
28	Supported	2015年3月頃	0%
27	Supported	2015年1月頃	0%
26	Supported	2014年12月頃	0%
25	Supported	2014年10月頃	0%
24	Supported	2014年9月頃	0%
23	Supported	2014年7月頃	0%
22	Supported	2014年6月頃	0%
21	Supported	2014年5月頃	0.01%
20	Supported	2014年3月頃	0%
19	Supported	2014年1月頃	0%
18	Supported	2013年11月頃	0%
17	Supported	2013年10月頃	0%
16	Supported	2013年8月頃	0%
15	Supported	2013年7月頃	0%
12	Supported	2012年6月頃	0.02%
11.6	Supported	2011年12月頃	0%
11.1	Supported	2011年4月頃	0%

iOS Safari

バージョン	サポート状況	公開時期	シェア
10.0	Supported	2016年9月頃	39.65%
9.1	Supported	2015年9月頃	5.39%
8.3	Supported	2014年9月頃	1.03%
7.0	Supported	2013年9月頃	0.24%
6.0	Supported	2012年9月頃	0.05%
5.1	Supported	2011年10月頃	0.03%

Android

バージョン	サポート状況	公開時期	シェア
4.4	Supported	2013年10月頃	0%
4.3	Supported	2013年7月頃	0%
4.2	Supported	2013年3月頃	0.03%
4.1	Supported	2012年12月頃	0%
4.0	Supported	2012年6月頃	1.61%
2.3	Supported	2011年10月頃	0%