From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/node/appendchild/index.html | 97 ++++ files/ja/web/api/node/baseuriobject/index.html | 32 ++ files/ja/web/api/node/childnodes/index.html | 103 +++++ files/ja/web/api/node/clonenode/index.html | 129 ++++++ .../api/node/comparedocumentposition/index.html | 118 +++++ files/ja/web/api/node/contains/index.html | 110 +++++ files/ja/web/api/node/firstchild/index.html | 46 ++ files/ja/web/api/node/getrootnode/index.html | 100 ++++ files/ja/web/api/node/getuserdata/index.html | 68 +++ files/ja/web/api/node/haschildnodes/index.html | 31 ++ files/ja/web/api/node/index.html | 510 +++++++++++++++++++++ files/ja/web/api/node/insertbefore/index.html | 188 ++++++++ .../ja/web/api/node/isdefaultnamespace/index.html | 35 ++ files/ja/web/api/node/isequalnode/index.html | 90 ++++ files/ja/web/api/node/issamenode/index.html | 39 ++ files/ja/web/api/node/issupported/index.html | 44 ++ files/ja/web/api/node/lastchild/index.html | 28 ++ files/ja/web/api/node/localname/index.html | 62 +++ files/ja/web/api/node/namespaceuri/index.html | 34 ++ files/ja/web/api/node/nextsibling/index.html | 87 ++++ files/ja/web/api/node/nodename/index.html | 102 +++++ files/ja/web/api/node/nodeprincipal/index.html | 20 + files/ja/web/api/node/nodetype/index.html | 88 ++++ files/ja/web/api/node/nodevalue/index.html | 81 ++++ files/ja/web/api/node/normalize/index.html | 48 ++ files/ja/web/api/node/ownerdocument/index.html | 116 +++++ files/ja/web/api/node/parentelement/index.html | 92 ++++ files/ja/web/api/node/parentnode/index.html | 90 ++++ files/ja/web/api/node/prefix/index.html | 51 +++ files/ja/web/api/node/previoussibling/index.html | 42 ++ files/ja/web/api/node/removechild/index.html | 126 +++++ files/ja/web/api/node/replacechild/index.html | 127 +++++ files/ja/web/api/node/textcontent/index.html | 115 +++++ 33 files changed, 3049 insertions(+) create mode 100644 files/ja/web/api/node/appendchild/index.html create mode 100644 files/ja/web/api/node/baseuriobject/index.html create mode 100644 files/ja/web/api/node/childnodes/index.html create mode 100644 files/ja/web/api/node/clonenode/index.html create mode 100644 files/ja/web/api/node/comparedocumentposition/index.html create mode 100644 files/ja/web/api/node/contains/index.html create mode 100644 files/ja/web/api/node/firstchild/index.html create mode 100644 files/ja/web/api/node/getrootnode/index.html create mode 100644 files/ja/web/api/node/getuserdata/index.html create mode 100644 files/ja/web/api/node/haschildnodes/index.html create mode 100644 files/ja/web/api/node/index.html create mode 100644 files/ja/web/api/node/insertbefore/index.html create mode 100644 files/ja/web/api/node/isdefaultnamespace/index.html create mode 100644 files/ja/web/api/node/isequalnode/index.html create mode 100644 files/ja/web/api/node/issamenode/index.html create mode 100644 files/ja/web/api/node/issupported/index.html create mode 100644 files/ja/web/api/node/lastchild/index.html create mode 100644 files/ja/web/api/node/localname/index.html create mode 100644 files/ja/web/api/node/namespaceuri/index.html create mode 100644 files/ja/web/api/node/nextsibling/index.html create mode 100644 files/ja/web/api/node/nodename/index.html create mode 100644 files/ja/web/api/node/nodeprincipal/index.html create mode 100644 files/ja/web/api/node/nodetype/index.html create mode 100644 files/ja/web/api/node/nodevalue/index.html create mode 100644 files/ja/web/api/node/normalize/index.html create mode 100644 files/ja/web/api/node/ownerdocument/index.html create mode 100644 files/ja/web/api/node/parentelement/index.html create mode 100644 files/ja/web/api/node/parentnode/index.html create mode 100644 files/ja/web/api/node/prefix/index.html create mode 100644 files/ja/web/api/node/previoussibling/index.html create mode 100644 files/ja/web/api/node/removechild/index.html create mode 100644 files/ja/web/api/node/replacechild/index.html create mode 100644 files/ja/web/api/node/textcontent/index.html (limited to 'files/ja/web/api/node') diff --git a/files/ja/web/api/node/appendchild/index.html b/files/ja/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..3242491906 --- /dev/null +++ b/files/ja/web/api/node/appendchild/index.html @@ -0,0 +1,97 @@ +--- +title: Node.appendChild +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Node/appendChild +--- +
{{APIRef("DOM")}}
+ +

Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。

+ +

これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。cloneNode で作成したコピーは自動的に同期を保たないことに注意してください。

+ +

このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。

+ +

構文

+ +
var aChild = element.appendChild(aChild);
+ +

引数

+ +

aChild

+ +

親ノードに追加する子ノード(要素)

+ +

戻り値

+ +

追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。

+ +

注意

+ +

appendChild() が子要素を返すため、メソッドチェーンが期待通りに動きません。:

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

aBlock に <b></b> を与えただけでは期待通りに動きません。

+ +

例

+ +
// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
+var p = document.createElement("p");
+document.body.appendChild(p);
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}{{SpecName("DOM3 Core")}} から変更なし。
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}{{SpecName("DOM2 Core")}} から変更なし。
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}{{SpecName("DOM1")}} から変更なし。
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}初期定義。
+ +

ブラウザー実装状況

+ +

{{Compat("api.Node.appendChild")}}

+ +
+ +

関連情報

+ + diff --git a/files/ja/web/api/node/baseuriobject/index.html b/files/ja/web/api/node/baseuriobject/index.html new file mode 100644 index 0000000000..260c0b67d5 --- /dev/null +++ b/files/ja/web/api/node/baseuriobject/index.html @@ -0,0 +1,32 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +tags: + - DOM + - DOM 3 + - Gecko + - Node +translation_of: Web/API/Node +--- +
{{ApiRef}} {{Fx_minversion_header("3")}} {{Non-standard_header}}
+ +

概要

+ +

baseURIObject は、文書の基底 URL (base URL) を示す {{Interface("nsIURI")}} オブジェクトを返します。

+ +

このプロパティは、HTML 、 XUL、 SVG、 MathML 等のノード全てに存在します。但し、このプロパティの使用を試みるスクリプトが UniversalXPConnect 特権を持つ場合に限ります。

+ +

基底 URL の詳細については {{domxref("Node.baseURI")}} の頁をご覧下さい。

+ +

構文

+ +
uriObj = element.baseURIObject
+
+ +

注記

+ +

このプロパティは読取専用です。書込を試みた場合、例外がスローされます。また、このプロパティには、特権を持つコードからのみアクセス可能です。

+ +

仕様書

+ +

標準仕様書には含まれません。

diff --git a/files/ja/web/api/node/childnodes/index.html b/files/ja/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..27c39be8d3 --- /dev/null +++ b/files/ja/web/api/node/childnodes/index.html @@ -0,0 +1,103 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +tags: + - API + - DOM + - DOMリファレンス + - プロパティ + - リファレンス +translation_of: Web/API/Node/childNodes +--- +

{{ ApiRef() }}

+ +

Node.childNodes読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子{{domxref("Node","nodes")}}の現在の{{domxref("NodeList")}}を返します。

+ +

構文

+ +
let nodeList = elementNodeReference.childNodes;
+
+ +

例

+ +

簡単な使用方法

+ +
// 変数pargは<p>要素へのオブジェクト参照です
+
+// まず、pargが子ノードを持っているかをチェックします
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (let i = 0; i < children.length; i++) {
+    // for文を使って各ノードにchildren[i]としてアクセスします
+    // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します
+  }
+}
+ +

ノードから全ての子を削除する

+ +
// これは一例ですが、この方法でノードからすべての子ノードを削除することができます
+// let box = document.getElementById(/**/);
+
+while (box.firstChild) {
+    // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します
+    box.removeChild(box.firstChild);
+}
+ +

注記

+ +

ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえばelementNodeReference.childNodes[1].nodeName で名前を取得) を使用します。
+
+ documentオブジェクト自体には Doctype 宣言と root 要素 の2つの子があり、通常はdocumentElementと呼ばれます。 （(X)HTML文書ではこれがHTML要素です）
+
+ childNodesにはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}変更なし
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}変更なし
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}変更なし
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}初回定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.Node.childNodes")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/node/clonenode/index.html b/files/ja/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..fe3f8837a9 --- /dev/null +++ b/files/ja/web/api/node/clonenode/index.html @@ -0,0 +1,129 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +translation_of: Web/API/Node/cloneNode +--- +
{{ApiRef}}
+ +

概要

+ +

現在のノードの複製を返します。

+ +

構文

+ +
var dupNode = node.cloneNode(deep);
+
+ +
+
node
+
複製するノード
+
dupNode
+
新しく生成される node の複製
+
deep {{optional_inline}}
+
node の子孫ノードも複製する場合は true 、 node のみを複製する場合は false +
+

注記: DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 deep は省略可能な引数です。省略された場合、 deep には true が渡され、深い複製を生成します。浅い複製を生成するには、 deep を false にする必要があります。

+ +

以前のDOMの仕様を実装しているブラウザでは、 deep は必須の引数です。

+
+
+
+ +

例

+ +
var p = document.getElementById("para1");
+var p_prime = p.cloneNode(true);
+
+ +

注記

+ +

ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。addEventListener() を使用したものや、要素のプロパティに代入されたもの (例: node.onclick = fn;) は複製されません。

+ +

cloneNode によって返される複製ノードは、 {{domxref("Node.appendChild()")}} や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。

+ +

deep が false に設定されていると、どの子ノードも複製されません。 そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。

+ +

deep が true に評価できる場合、サブツリー全体 (子 {{domxref("Text")}} ノードにあるテキストを含む) もコピーされます。 {{HTMLElement("img")}} や {{HTMLElement("input")}} 要素などの空ノードの場合には deep を true と false のどちらに設定してもかまいません。

+ +
注意: cloneNode() を使用すると、ドキュメント内で要素の id が重複する可能性があります。
+ +

別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。

+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep 引数の省略Yes
+ (初期値は false)		{{CompatGeckoDesktop("13.0")}}{{CompatUnknown}}{{CompatUnknown}}Yes
+ (初期値は false)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep 引数の省略{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

仕様書

+ + diff --git a/files/ja/web/api/node/comparedocumentposition/index.html b/files/ja/web/api/node/comparedocumentposition/index.html new file mode 100644 index 0000000000..5865081c84 --- /dev/null +++ b/files/ja/web/api/node/comparedocumentposition/index.html @@ -0,0 +1,118 @@ +--- +title: Node.compareDocumentPosition +slug: Web/API/Node/compareDocumentPosition +tags: + - DOM + - DOM Element Methods + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/compareDocumentPosition +--- +
{{ApiRef}}
+ +

概要

+ +

そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。

+ +

構文

+ +
node.compareDocumentPosition( otherNode )
+
+ +

パラメーター

+ +
+
node
+
比較元ノード
+
otherNode
+
node と比較する別ノード
+
+ +

返り値

+ +

呼び出し元の node と {{domxref("Document")}} 内の otherNode の関係を表すビットの整数値。複数の条件に適応する場合、1つ以上のビットがセットされることがあります。compareDocumentPosition() を呼び出した node と比較して、otherNode が 文書のより前にあり、かつ node を含んでいるならば、DOCUMENT_POSITION_CONTAINS と DOCUMENT_POSITION_PRECEDING のビットがセットされ、結果は0x0Aもしくは10進数の10になります。

+ +

注記

+ +

戻り値は以下の値を持つビットマスクの何れかとなります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称値
DOCUMENT_POSITION_DISCONNECTED1
DOCUMENT_POSITION_PRECEDING2
DOCUMENT_POSITION_FOLLOWING4
DOCUMENT_POSITION_CONTAINS8
DOCUMENT_POSITION_CONTAINED_BY16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC32
+ +

例

+ +
var head = document.getElementsByTagName('head').item(0);
+
+if ( head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING ) {
+  console.log("head 要素は body 要素より前に記述されています。");
+} else {
+  console.log("head 要素は body 要素の前に配置しなくてはなりません。");
+}
+
+ +
+

注記: compareDocumentPosition の戻り値はビットマスクです。よって、有意な結果を得るには ビット演算子の "&" を用いなくてはならない点に注意して下さい。

+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
DOM Level 3Recommendation
DOM StandardLiving standard
+ +

関連情報

+ + diff --git a/files/ja/web/api/node/contains/index.html b/files/ja/web/api/node/contains/index.html new file mode 100644 index 0000000000..194cdbb2eb --- /dev/null +++ b/files/ja/web/api/node/contains/index.html @@ -0,0 +1,110 @@ +--- +title: Node.contains +slug: Web/API/Node/contains +tags: + - API + - DOM + - Method + - Node +translation_of: Web/API/Node/contains +--- +
{{APIRef("DOM")}}
+ +

Node.contains メソッドは指定ノードの子孫ノードに特定の子ノード（※自身も含む）が含まれるかどうかを示す真偽値を返します。

+ +

構文

+ +
node.contains( otherNode )
+
+ +

例

+ +

この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。contains は包括的かつ決定的であるため、body がそれ自身を含むかどうかは isInPage の意図ではないため明示的に false を返します。

+ +
function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}{{Spec2("DOM WHATWG")}}Initial definition
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}5.0[1]{{CompatVersionUnknown}}3.0[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer は elements の contains() のみサポートしています。

+ +

[2] Safari 2.x には正しく contains() が実装されていません。

+ +

関連情報

+ + diff --git a/files/ja/web/api/node/firstchild/index.html b/files/ja/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..5a57be3ae9 --- /dev/null +++ b/files/ja/web/api/node/firstchild/index.html @@ -0,0 +1,46 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/firstChild +--- +
+ {{ApiRef}}
+

概要

+

ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。

+

構文

+
var childNode = node.firstChild;
+
+ +

例

+

次の例では firstChild の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。

+
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+

上記の例では alert は'#text'を表示します。なぜなら開始タグ <p> の末端と <span> の間にある空白を調整するためにテキストノードが挿入されているからです。どんな 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。

+

その他の #text ノードは閉じタグ </span> と </p> の間に挿入されていみます。

+

もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。

+
<p id="para-01"><span>First span</span></p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+

今度は alert は 'SPAN' を表示するでしょう。

+

仕様書

+ diff --git a/files/ja/web/api/node/getrootnode/index.html b/files/ja/web/api/node/getrootnode/index.html new file mode 100644 index 0000000000..cde6d1053d --- /dev/null +++ b/files/ja/web/api/node/getrootnode/index.html @@ -0,0 +1,100 @@ +--- +title: Node.getRootNode() +slug: Web/API/Node/getRootNode +tags: + - API + - DOM + - Method + - Node + - Reference + - getRootNode + - メソッド +translation_of: Web/API/Node/getRootNode +--- +
{{APIRef("DOM")}}
+ +

getRootNode() は {{domxref("Node")}} インターフェイスのメソッドで、そのコンテキストのオブジェクトのルート、利用できる場合はオプションでシャドウルートを含んだものを返します。

+ +

構文

+ +
var root = node.getRootNode(options);
+ +

引数

+ +
+
options {{optional_inline}}
+
ルートノードを取得するためのオプションを設定するオブジェクトです。利用可能なオプションは次の通りです。 +
    +
  • composed: {{jsxref('Boolean')}} 値で、シャドウルートを返すか (false、既定値)、またはシャドウルートを越えたルートノードを返すか (true) を示します。
    • +
+
+
+ +

返値

+ +

{{domxref('Node')}} を継承したオブジェクトです。これはどこで getRootNode() を呼び出したかによって異なる形になります。例えば、

+ + + +

例

+ +

最初に、 HTML/document ノードの参照を返す単純な例です。

+ +
rootNode = node.getRootNode();
+ +

この例はもっと複雑で、通常のルートを返す場合と、シャドウルートを含むルートの違いを示します。 (ソースコード全体を見てください。)

+ +
<!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html -->
+<div class="js-parent">
+  <div class="js-child"></div>
+</div>
+<div class="js-shadowHost"></div>
+<script>
+  // Chrome 54+，Opera 41+ で動作
+
+  var parent = document.querySelector('.js-parent'),
+      child = document.querySelector('.js-child'),
+      shadowHost = document.querySelector('.js-shadowHost');
+
+  console.log(parent.getRootNode().nodeName); // #document
+  console.log(child.getRootNode().nodeName); // #document
+
+  // ShadowRoot の生成
+  var shadowRoot = shadowHost.attachShadow({mode:'open'});
+  shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>'
+      + '<div class="js-shadowChild">content</div>';
+  var shadowChild = shadowRoot.querySelector('.js-shadowChild');
+
+  // 合成の既定値は false
+  console.log(shadowChild.getRootNode() === shadowRoot); // true
+  console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true
+  console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document
+</script>
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Node.getRootNode")}}

diff --git a/files/ja/web/api/node/getuserdata/index.html b/files/ja/web/api/node/getuserdata/index.html new file mode 100644 index 0000000000..47fe7bfe05 --- /dev/null +++ b/files/ja/web/api/node/getuserdata/index.html @@ -0,0 +1,68 @@ +--- +title: Node.getUserData() +slug: Web/API/Node/getUserData +tags: + - API + - DOM + - Method + - Node + - Obsolete + - Reference + - メソッド +translation_of: Web/API/Node/getUserData +--- +
{{APIRef("DOM")}}{{obsolete_header}}
+ +

Node.getUserData() メソッドは、以前 {{domxref("Node.setUserData()")}} によってノードに設定されたすべてのユーザーデータを {{domxref("DOMUserData")}} 形式で返します。

+ +
+

Node.setUserData および {{domxref("Node.getUserData")}} メソッドはウェブコンテンツから利用できなくなりました。 {{domxref("Element.dataset")}} または WeakMap を代わりに利用することができます。

+
+ +

構文

+ +
userData = someNode.getUserData(userKey);
+ +

引数

+ + + +

例

+ +
var d = document.setUserData('key', 15, null);
+console.log(document.getUserData('key')); // 15
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}{{Spec2('DOM3 Core')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Node.getUserData")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/node/haschildnodes/index.html b/files/ja/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..b4ed1654d3 --- /dev/null +++ b/files/ja/web/api/node/haschildnodes/index.html @@ -0,0 +1,31 @@ +--- +title: Node.hasChildNodes +slug: Web/API/Node/hasChildNodes +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/hasChildNodes +--- +
+ {{ApiRef}}
+

概要

+

hasChildNodes は指定したノードが子ノードを持つか否かを示す真偽値を返します。

+

構文

+
node.hasChildNodes()
+

例

+

"foo" を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。

+
var foo = document.getElementById("foo");
+
+if ( foo.hasChildNodes() ) {
+  foo.removeChild( foo.childNodes[0] );
+}
+

仕様書

+ +

関連情報

+ diff --git a/files/ja/web/api/node/index.html b/files/ja/web/api/node/index.html new file mode 100644 index 0000000000..db5a645811 --- /dev/null +++ b/files/ja/web/api/node/index.html @@ -0,0 +1,510 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - DOM Reference + - Interface + - Node + - Reference +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

Node はいくつもの DOM API オブジェクトタイプが継承しているインターフェイスで、それらのさまざまなタイプを同じように扱える (同じメソッドのセットを継承する、または同じ方法でテストできる) ようにします。

+ +

以下のインターフェイスはすべて、Node からメソッドやプロパティを継承しています: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Attr")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

これらのインターフェイスは、そのメソッドやプロパティが妥当でないときは null を返すことがあります。例外を投げることもあります - 例えば、子が存在できないノードタイプに子を追加するとき。

+ +

{{InheritanceDiagram}}

+ +

プロパティ

+ +

親である {{domxref("EventTarget")}} からプロパティを継承します。[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
ベース URL を表す {{domxref("DOMString")}} を返します。ベース URL の概念は、言語によって変わります。HTML ではプロトコル、ドメイン名、ディレクトリー構造に対応しており、最後の '/' までのすべてになります。
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline}} {{Fx_minversion_inline("3")}}
+
(ウェブコンテンツでは使用できません) 要素のベース URI を表す、読み取り専用の {{Interface("nsIURI")}} オブジェクトを返します。
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
このノードのすべての子孫を含む、生きている {{domxref("NodeList")}} を返します。{{domxref("NodeList")}} が生きているとは、Node の子が変化すれば自動的に {{domxref("NodeList")}} オブジェクトが更新されることを意味します。
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
ノードの直下の最初の子ノードを表す {{domxref("Node")}} を返します。子が存在しなければ null を返します。
+
{{domxref("Node.isConnected")}} {{readonlyInline}}
+
ノードが(直接/関節的に)コンテキストオブジェクトに接続されているかを示す論理値。例えば通常の DOM の場合は {{domxref("Document")}} オブジェクト、あるいはシャドーDOM の場合は {{domxref("ShadowRoot")}}。
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
ノードの直下の最後の子ノードを表す {{domxref("Node")}} を返します。子が存在しなければ null を返します。
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
ツリー構造で次のノードを表す {{domxref("Node")}} を返します。該当するノードがない場合は null を返します。
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Node の名前を持つ {{domxref("DOMString")}} を返します。名前の構造は、ノードの型によって異なります。例えば、{{domxref("HTMLElement")}} は {{domxref("HTMLAudioElement")}} に対して 'audio' というように対応するタグの名前、{{domxref("Text")}} ノードは '#text' という文字列、{{domxref("Document")}} ノードは '#document' という文字列になります。
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline}}{{Fx_minversion_inline("3")}}
+
ノードのプリンシパルを表す {{Interface("nsIPrincipal")}} を返します。
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
ノードの型を表す unsigned short を返します。使用できる値: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称値
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline}}4
ENTITY_REFERENCE_NODE {{deprecated_inline}}5
ENTITY_NODE {{deprecated_inline}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline}}12
+
+
{{domxref("Node.nodeValue")}}
+
カレントノードの値を取得または設定します。
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
ノードが所属する {{domxref("Document")}} を返します。ノードが document 自身の場合は、null を返します。
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
このノードの親の {{domxref("Node")}} を返します。ノードがツリーの最上位である、あるいはツリーに加わっていないなど、親が存在しない場合は null を返します。
+
{{domxref("Node.parentElement")}} {{readonlyInline}}
+
このノードの親の {{domxref("Element")}} を返します。ノードに親が存在しない、あるいは親が {{domxref("Element")}} ではない場合は、null を返します。
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
ツリー構造で前のノードを表す {{domxref("Node")}} を返します。該当するノードがない場合は null を返します。
+
{{domxref("Node.textContent")}}
+
要素や要素のすべての子孫のテキストコンテンツを取得または設定します。
+
+ +

非推奨プロパティ

+ +
+
{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}
+
ツリーの最上位ノードを表す {{domxref("Node")}} オブジェクトを返します。自身がツリーの最上位ノードである場合はカレントノードを返します。これは {{domxref("Node.getRootNode()")}} に置き換えられました。
+
+ +

廃止プロパティ

+ +
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
要素の修飾名のローカル部分を表す {{domxref("DOMString")}} を返します。 +
+

注記: Firefox 3.5 および以前のバージョンでは、このプロパティで HTML 要素のローカル名が大文字でした (XHTML 要素を除く)。以降のバージョンではこのようになりませんので、このプロパティでは HTML および XHTML の両方が小文字になります。{{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
ノードの名前空間の URI。名前空間がない場合は null になります。 +
+

注記: Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで https://www.w3.org/1999/xhtml/ 名前空間内に存在します。{{gecko_minversion_inline("1.9.2")}}

+
+
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
ノードの名前空間の接頭辞を表す {{domxref("DOMString")}} を返します。接頭辞が指定されていない場合は null を返します。
+
+ +

メソッド

+ +

親である {{domxref("EventTarget")}} からメソッドを継承します。[1]

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

廃止メソッド

+ +
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
x
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
ユーザーが、ノードから {{domxref("DOMUserData")}} を取得できます。
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
要素がなんらかの属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
DOM 実装が特定の機能を実装しており、またその機能が指定したノードでサポートされているかを確認して、その結果を表す {{jsxref("Boolean")}} を返します。
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
ユーザーが、ノードに {{domxref("DOMUserData")}} を追加または削除できます。
+
+ +

例

+ +

すべての子ノードを走査する

+ +

次の関数はすべての子ノードを再帰的にループして、それらに対してコールバック関数を呼び出します。（また、親ノード自身に対しても同様に呼び出されます。

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

構文

+ +
DOMComb(parentNode, callbackFunction);
+ +

説明

+ +

parentNode のすべての子ノードと parentNode 自身を再帰的にループして、それらを this オブジェクトとして callbackFunction を実行します。

+ +

引数

+ +
+
parentNode
+
親ノード (Node Object)
+
callbackFunction
+
コールバック関数 (Function)
+
+ +

用例

+ +

次の例はボディの中のテキストの内容を console.log に送るものです:

+ +
function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};
+ +

ノードに内包されているすべての子ノードを削除する

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

使用例

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}以下のプロパティを削除: attributes、namespaceURI、prefix、localName。
+ 以下のメソッドを削除: isSupported()、hasAttributes()、getFeature()、setUserData()、getUserData()。
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}{{domxref("Document")}} で insertBefore()、replaceChild()、removeChild()、appendChild() メソッドを呼び出すと、もうひとつの種類のエラー (NOT_SUPPORTED_ERR) を返します。
+ normalize() メソッドを、適切な {{domxref("DOMConfiguration")}} フラグが設定されていれば {{domxref("Text")}} ノードも正規化できるように変更。
+ 以下のメソッドを追加: compareDocumentPosition()、isSameNode()、lookupPrefix()、isDefaultNamespace()、lookupNamespaceURI()、isEqualNode()、getFeature()、setUserData()、getUserData()。
+ 以下のプロパティを追加: baseURI、textContent。
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}ownerDocument プロパティを、{{domxref("DocumentFragment")}} が null も返すように若干変更。
+ 以下のプロパティを追加: namespaceURI、prefix、localName。
+ 以下のメソッドを追加: normalize()、isSupported()、hasAttributes()。
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}初期定義
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.Node")}}

+ +

{{CompatibilityTable}}

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]
getFeature(){{obsolete_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}}{{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getUserData()、setUserData()、hasAttributes() {{deprecated_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}}{{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSameNode(){{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatGeckoDesktop("10")}} で削除
+ {{CompatGeckoDesktop("48")}} で再追加		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSupported() {{obsolete_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
attributes{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}}{{CompatGeckoDesktop("22.0")}}[2]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
rootNode(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(48)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
getRootNode() の追加と rootNode の非推奨化{{CompatChrome(54.0)}}{{CompatUnknown}}{{CompatGeckoDesktop(53)}}{{CompatUnknown}}{{CompatOpera(41)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileAndroid 版 Chrome
基本サポート{{CompatUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]
getFeature(){{obsolete_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}
+ {{CompatNo}}{{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getUserData()、setUserData()、hasAttributes() {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
isSameNode(){{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatGeckoDesktop("10")}} で削除
+ {{CompatGeckoDesktop("48")}} で再追加		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
isSupported() {{obsolete_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
attributes{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
rootNode(){{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(48)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
getRootNode() の追加と rootNode の非推奨化{{CompatNo}}{{CompatChrome(54.0)}}{{CompatUnknown}}{{CompatGeckoMobile(53)}}{{CompatUnknown}}{{CompatOperaMobile(41)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
+
+ +

[1] WebKit と古いバージョンの Blink は、誤って Node が {{domxref("EventTarget")}} から継承していません。

+ +

[2] Gecko 22.0 {{geckoRelease("22.0")}} で、attributes プロパティを {{domxref("Element")}} に移動しました。

+ +

[3] DOM4 標準に従って、プロパティを {{domxref("Element")}} および {{domxref("Attr")}} API に移動しました。

diff --git a/files/ja/web/api/node/insertbefore/index.html b/files/ja/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..d34ad9e05c --- /dev/null +++ b/files/ja/web/api/node/insertbefore/index.html @@ -0,0 +1,188 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +tags: + - API + - DOM + - Element + - Method + - Node + - Reference + - メソッド +translation_of: Web/API/Node/insertBefore +--- +
{{APIRef("DOM")}}
+ +

Node.insertBefore() メソッドは、ノードを参照ノードの前に、指定された親ノードの子として挿入します。

+ +

指定されたノードが既に文書中に存在した場合、 insertBefore() はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)

+ +

これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。

+ +
+

メモ: {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 cloneNode() で作成された複製は自動的には同期されません。

+
+ +

指定された子が {{domxref("DocumentFragment")}} である場合、 DocumentFragment の内容全体が指定された親ノードの子リストに移動されます。

+ +

構文

+ +
let insertedNode = parentNode.insertBefore(newNode, referenceNode)
+
+ +
+
insertedNode
+
挿入されたノード (newNode と同じ) です。
+
parentNode
+
新しく挿入されるノードの親です。
+
newNode
+
挿入されるノードです。
+
referenceNode
+
newNode がこのノードの直前に挿入されます。このノードが null である場合は、 newNode は parentNode の子ノードの末尾に挿入されます。
+
+ +
+

メモ: referenceNode は省略可能な引数ではありません。明示的に {{domxref("Node")}} または null を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって異なる動作をすることがあります。

+
+ +

返値

+ +

追加された子ノードを返します (ただし newNode が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。

+ +

例

+ +

例 1

+ +
<div id="parentElement">
+   <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// 挿入する新しいノードを作成する
+let newNode = document.createElement("span")
+
+// 親ノードの参照を取得する
+let parentDiv = document.getElementById("childElement").parentNode
+
+// テストケース [ 1 ] 開始: 既存の childElement (すべて正しく動作)
+let sp2 = document.getElementById("childElement")
+parentDiv.insertBefore(newNode, sp2)
+// テストケース [ 1 ] 終了
+
+// テストケース [ 2 ] 開始: childElement が undefined 型の場合
+let sp2 = undefined // "childElement" の ID を持つノードが存在しない
+parentDiv.insertBefore(newNode, sp2) // Node 型に暗黙に動的型変換
+// テストケース [ 2 ] 終了
+
+// テストケース [ 3 ] 開始: childElement が "undefined" (文字列) の場合
+let sp2 = "undefined" // "childElement" の ID を持つノードが存在しない
+parentDiv.insertBefore(newNode, sp2) // Generates "Type Error: Invalid Argument"
+// テストケース [ 3 ] 終了
+</script>
+
+ +

例 2

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// 新しい只の <span> 要素を作成
+let sp1 = document.createElement("span")
+
+// 参照要素を取得
+let sp2 = document.getElementById("childElement")
+// 親要素を取得
+let parentDiv = sp2.parentNode
+
+// 新しい要素を sp2 の手前に挿入
+parentDiv.insertBefore(sp1, sp2)
+</script>
+
+ +
+

メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。

+
+ +

前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling)
+ +

sp2 に次の兄弟がない場合、これは最後の子ノードです。 — sp2.nextSibling は null を返し、 sp1 は子ノードリストの末尾 (sp2 の直後) に挿入されます。

+ +

例 3

+ +

要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。

+ +
// 親ノードを取得
+let parentElement = document.getElementById('parentElement')
+// 親の最初の子を取得
+let theFirstChild = parentElement.firstChild
+
+// 新しい要素を取得
+let newElement = document.createElement("div")
+
+// 最初の子の前に新しい要素を挿入
+parentElement.insertBefore(newElement, theFirstChild)
+
+ +

要素に最初の子がない場合、 firstChild は null になります。その場合も、要素は親の最後の子の後に追加されます。

+ +

親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は唯一の要素になります。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}挿入アルゴリズムのエラーを修正
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}より詳細にアルゴリズムを記述
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}目立った変更はなし
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}目立った変更はなし
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}導入
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Node.insertBefore")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/node/isdefaultnamespace/index.html b/files/ja/web/api/node/isdefaultnamespace/index.html new file mode 100644 index 0000000000..fff65ffae3 --- /dev/null +++ b/files/ja/web/api/node/isdefaultnamespace/index.html @@ -0,0 +1,35 @@ +--- +title: Node.isDefaultNamespace +slug: Web/API/Node/isDefaultNamespace +tags: + - DOM + - Gecko DOM Reference + - Namespaces + - Node +translation_of: Web/API/Node/isDefaultNamespace +--- +
+ {{ApiRef}}
+

概要

+

isDefaultNamespace は、引数としてネームスペース URI を受け取り、ネームスペースが指定されたノードのデフォルトのネームスペースである場合に true を返します。そうでない場合は false を返します。

+

構文

+
result = node.isDefaultNamespace(namespaceURI)
+
+ +

例

+
var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0];
+
+alert(el.isDefaultNamespace(XULNS)); // true
+

仕様書

+ +

関連情報

+ diff --git a/files/ja/web/api/node/isequalnode/index.html b/files/ja/web/api/node/isequalnode/index.html new file mode 100644 index 0000000000..3eced87fe0 --- /dev/null +++ b/files/ja/web/api/node/isequalnode/index.html @@ -0,0 +1,90 @@ +--- +title: Node.isEqualNode +slug: Web/API/Node/isEqualNode +translation_of: Web/API/Node/isEqualNode +--- +
{{ApiRef}}
+ +

概要

+ +

Node.isEqualNode()は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性（要素であればIDや子要素の数など）、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。

+ +

構文

+ +
var isEqualNode = node.isEqualNode(otherNode);
+
+ + + +

例

+ +

3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、isEqualNode() を使ってJavaScriptでノードを比較した結果は以下のようになります。

+ +

HTML

+ +
<div>最初の要素です。</div>
+<div>2番目の要素です。</div>
+<div>最初の要素です。</div>
+
+<p id="output"></p>
+ + + +

JavaScript

+ +
let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "<br/>";
+output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "<br/>";
+output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "<br/>";
+ +

Results

+ +

{{ EmbedLiveSample('Example', 480) }}

+ +

+

仕様

+ + + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザー互換性

+ + + +

{{Compat("api.Node.isEqualNode")}}

+ +

参考

+ + diff --git a/files/ja/web/api/node/issamenode/index.html b/files/ja/web/api/node/issamenode/index.html new file mode 100644 index 0000000000..f94668cfd5 --- /dev/null +++ b/files/ja/web/api/node/issamenode/index.html @@ -0,0 +1,39 @@ +--- +title: Node.isSameNode +slug: Web/API/Node/isSameNode +tags: + - DOM + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/isSameNode +--- +
+ {{ApiRef}}{{Obsolete_header}}
+

概要

+

ふたつのノードが同一ノードの場合は true を、異なる場合は false を返します。

+
+ 注記: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。
+ 
// 当メソッド
+node1.isSameNode(node2)
+
+// 代替策
+node1 === node2
+node1 == node2
+
+
+
+

構文

+
isSameNode = node.isSameNode(org);
+
+ +

仕様書

+ +

関連情報

+ diff --git a/files/ja/web/api/node/issupported/index.html b/files/ja/web/api/node/issupported/index.html new file mode 100644 index 0000000000..3b25dc254b --- /dev/null +++ b/files/ja/web/api/node/issupported/index.html @@ -0,0 +1,44 @@ +--- +title: Node.isSupported +slug: Web/API/Node/isSupported +tags: + - DOM + - DOM Element Methods + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/isSupported +--- +
+ {{ApiRef}}{{obsolete_header("22")}}
+

概要

+

指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。

+

構文

+
element.isSupported(feature, version)
+
+
+ feature
+
+ テストする機能の名前。DOMImplementation の hasFeature メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の Conformance セクション にリストがあります。
+
+ version
+
+ テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は 2.0 になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は true を返します。
+
+

例

+
<div id="doc">
+</div>
+
+<script>
+ // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します
+ var main = document.getElementById('doc');
+ var output = main.isSupported('HTML', '2.0');
+</script>
+
+

仕様

+ +

Gecko に関する注記

+ diff --git a/files/ja/web/api/node/lastchild/index.html b/files/ja/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..e7f5626f3c --- /dev/null +++ b/files/ja/web/api/node/lastchild/index.html @@ -0,0 +1,28 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/lastChild +--- +
+ {{ApiRef}}
+

概要

+

lastChild はノードの子要素の内、最後のものを返します。

+

構文

+
var last_child = element.lastChild
+
+

説明

+

lastChild として返されるのはノードです。その親が要素であるならば、子ノードは一般的に Element ノード、Text ノード、Comment ノード となります。子要素を持たない場合は null が返されます。

+

例

+
var tr = document.getElementById("row1");  // table 要素の特定の行を取得
+var corner_td = tr.lastChild;  // 特定の行の内、最後のセルを取得
+
+

仕様書

+ diff --git a/files/ja/web/api/node/localname/index.html b/files/ja/web/api/node/localname/index.html new file mode 100644 index 0000000000..01ba8fbba6 --- /dev/null +++ b/files/ja/web/api/node/localname/index.html @@ -0,0 +1,62 @@ +--- +title: Node.localName +slug: Web/API/Node/localName +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node + - 要更新 +translation_of: Web/API/Node/localName +--- +

{{ ApiRef() }}

+

概要

+

このノードの修飾名のローカル部分を返します。

+

構文

+
name = element.localName
+
+ +

例

+

(text/xml や application/xhtml+xml のような XML コンテンツタイプで提供されなくてはなりません。)

+
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script type="application/javascript"><![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "<svg:circle> has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]></script>
+</head>
+<body onload="test()">
+  <svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+  <textarea id="text" rows="4" cols="55"/>
+</body>
+</html>
+
+

注記

+

ノードのローカル名はノードの修飾名のコロン(:)の後ろの部分です。修飾名は特定の XML 文書の名前空間の一部として XML の中で特に使われます。例えば、修飾名 ecomm:partners の中で partners がローカル名で ecomm が接頭辞です。

+
<ecomm:business id="soda_shop" type="brick_n_mortar">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+
+

Needs to be reworded; right now it's wrong. -Nickolay The prefix&mdash;in this case, "ecomm"&mdash;defines the namespace in which the local name can be used.

+

 {{ gecko_minversion_note("1.9.2", "Firefox 3.5 およびそれ以前では、このプロパティは HTML DOM 中の HTML 要素については大文字のローカル名を返します（XML DOM 中の XHTML 要素については小文字のローカル名を返します）。 Firefox 3.6 以降のバージョンでは、 HTML 5 との互換性のため、内部的な DOM ストレージにおける大文字/小文字で返します。つまり、 HTML DOM と XML DOM の両方において、 HTML 要素は小文字のローカル名となります。 tagName プロパティは、 HTML DOM 中の HTML 要素についても今まで通り大文字のローカル名を返します。") }}

+

ELEMENT_NODE と ATTRIBUTE_NODE 以外の種類全てに属すノードでは、常に localName は null です。

+

参照

+

element.namespaceURI

+

仕様

+

DOM Level 2 Core: Node.localName

diff --git a/files/ja/web/api/node/namespaceuri/index.html b/files/ja/web/api/node/namespaceuri/index.html new file mode 100644 index 0000000000..e074636d50 --- /dev/null +++ b/files/ja/web/api/node/namespaceuri/index.html @@ -0,0 +1,34 @@ +--- +title: Node.namespaceURI +slug: Web/API/Node/namespaceURI +tags: + - DOM + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Node/namespaceURI +--- +

{{ ApiRef() }}

+

概要

+

ノードの名前空間 URI か、もし指定されていなければ null(読み込み専用)。

+

構文

+
namespace =node.namespaceURI
+
+ +

例

+

この断片では、ノードの localName と namespaceURI が試験されます。もし、namespaceURI が XUL の名前空間を返し、localName が "browser" を返せば、そのノードは XUL の <browser/> と理解されます。

+
if (node.localName == "browser" &&
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // これは XUL browser です。
+}
+
+

注記

+

これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。

+

ELEMENT_NODE と ATTRIBUTE_NODE 以外の種類全てに属すノードと, document.createElement のような DOM Level 1 のメソッドで作られたノードでは、常に namespaceURI は null です。

+

DOM Level 2 の document.createElementNS メソッドを使うことで、特定の namespaceURI を持った要素を作ることができます。

+

Namespaces in XML によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。

+

仕様

+

DOM Level 2 Core: namespaceURI

+

DOM Level 2 Core: XML Namespaces

diff --git a/files/ja/web/api/node/nextsibling/index.html b/files/ja/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..1ff4c13cef --- /dev/null +++ b/files/ja/web/api/node/nextsibling/index.html @@ -0,0 +1,87 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +tags: + - DOM + - Gecko + - Node + - 要更新 +translation_of: Web/API/Node/nextSibling +--- +
+
+
{{APIRef("DOM")}}
+
+ +

Node.nextSibling という読み取り専用プロパティは指定したノードの親の{{domxref("Node.childNodes","子ノード")}}リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は null を返します。

+
+ +

構文

+ +
nextNode = node.nextSibling
+
+ +

注記

+ +
+

Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば Node.firstChild や Node.previousSibling で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。

+

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

+ +
 
+ +
{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。
+
+ +

例

+ +
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Siblings of div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+</script>
+
+/**************************************************
+  The following is written to the console as it loads:
+
+     Siblings of div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+ +

上の例で、#text ノードがタグ間のマークアップ内に (つまり、 要素の閉じタグと次の開始タグの間) 空白がある DOM に挿入されているのが見られます。 document.write 文で挿入された要素の間には空白が作成されません。

+ +

DOM にテキストノードが入りうるのは DOM が nextSibling を使って横断される時に許可されます。注記のセクションのリソースを見てください。

+ +

仕様

+ + + +

ブラウザ実装状況

+ + + +

{{Compat("api.Node.nextSibling")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/node/nodename/index.html b/files/ja/web/api/node/nodename/index.html new file mode 100644 index 0000000000..65daeb1074 --- /dev/null +++ b/files/ja/web/api/node/nodename/index.html @@ -0,0 +1,102 @@ +--- +title: Node.nodeName +slug: Web/API/Node/nodeName +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/nodeName +--- +
+ {{APIRef}}
+
+  
+
+ 概要
+

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

+

構文

+
str = node.nodeName;
+
+ +

注記

+

以下の異なる種類のノードの戻り値があります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfacenodeName
AttrAttr.name と同じ
CDATASection"#cdata-section"
Comment"#comment"
Document"#document"
DocumentFragment"#document-fragment"
DocumentTypeDocumentType.name と同じ
ElementElement.tagName と同じ
Entity実体名
EntityReference実体参照名
Notation記法名
ProcessingInstructionProcessingInstruction.target と同じ
Text"#text"
+

例

+

次のマークアップ文書が与えられているとします。

+
<div id="d1">hello world</div>
+<input type="text" id="t"/>
+
+

そして、以下のスクリプトがあると考えてください。

+
var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+
+text_field.value = div1.nodeName;
+
+

XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。

+

注意: tagName プロパティが使用された場合、nodeName は tagName と同じ値になります。tagName が未定義 (undefined) の時 nodeName はテキストノードである #text を返します。

+

仕様

+ diff --git a/files/ja/web/api/node/nodeprincipal/index.html b/files/ja/web/api/node/nodeprincipal/index.html new file mode 100644 index 0000000000..3b5144c88a --- /dev/null +++ b/files/ja/web/api/node/nodeprincipal/index.html @@ -0,0 +1,20 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node +--- +
+ {{ApiRef}}{{Fx_minversion_header("3")}}{{Non-standard_header}}
+

概要

+

nodePrincipal は、ノードの現在のセキュリティ・コンテキストを表す {{interface("nsIPrincipal")}} オブジェクトを返します

+

{{note("このプロパティは、HTML 、XUL 、SVG 、MathML などの全てのノードに存在しますが、スクリプトが使用を試みた場合にのみ、 UniversalXPConnect 特権を持ちます。")}}

+

構文

+
principalObj = element.nodePrincipal
+

注記

+

このプロパティは読取専用です。書込みを試みた場合、例外がスローされます。また、このプロパティには特権コードからのみアクセス可能です。

+

仕様書

+

仕様書はありません。

diff --git a/files/ja/web/api/node/nodetype/index.html b/files/ja/web/api/node/nodetype/index.html new file mode 100644 index 0000000000..135f0f95c7 --- /dev/null +++ b/files/ja/web/api/node/nodetype/index.html @@ -0,0 +1,88 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/nodeType +--- +
+ {{ApiRef}}
+

概要

+

ノードの種類を表す整数のコードを返します。

+

構文

+
var type = node.nodeType;
+
+

type は以下の内の何れかの unsigned short 型の値となります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名称値
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline}}4
ENTITY_REFERENCE_NODE {{deprecated_inline}}5
ENTITY_NODE {{deprecated_inline}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline}}12
+

例

+

次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。

+
var node = document.documentElement.firstChild;
+
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("※社内コーディングルールに沿ったコメントを記述して下さい。");
+
+

仕様書

+ diff --git a/files/ja/web/api/node/nodevalue/index.html b/files/ja/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..2cfbbf795f --- /dev/null +++ b/files/ja/web/api/node/nodevalue/index.html @@ -0,0 +1,81 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/nodeValue +--- +
+ {{ApiRef}}
+

概要

+

ノードの値を取得または設定します。

+

構文

+
value = node.nodeValue
+

node.nodeValue が存在する場合、 value はノードの値を含む文字列です。

+

注記

+

document 自身は、 nodeValue は nullを返します。text

+

ノード、 comment ノード、CDATA ノードでは、 nodeValue はノードの中身を返します。 attribute ノードは属性値を返します。

+

 

+

以下の表は、 様々なノードの戻り値を表しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attrattribute の値
CDATASectionCDATA Sectionの中身
コメントcommentの中身
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionターゲットを除く全体の内容
Textthe text nodeの中身
+

nodeValue が null と定義されている場合、値を設定しても効果はありません。

+

仕様書

+ diff --git a/files/ja/web/api/node/normalize/index.html b/files/ja/web/api/node/normalize/index.html new file mode 100644 index 0000000000..83026ac378 --- /dev/null +++ b/files/ja/web/api/node/normalize/index.html @@ -0,0 +1,48 @@ +--- +title: Node.normalize +slug: Web/API/Node/normalize +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/normalize +--- +
{{ApiRef}}
+ +

概要

+ +

指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。

+ +

構文

+ +
element.normalize();
+
+ +

例

+ +
var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Part 1 ") );
+wrapper.appendChild( document.createTextNode("Part 2 ") );
+
+// wrapper.childNodes[0].textContent === "Part 1 "
+// wrapper.childNodes[1].textContent === "Part 2 "
+// この時点で、wrapper の 子ノード数は 2 です。 wrapper.childNodes.length === 2
+
+wrapper.normalize(); // 正規化
+
+// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1
+// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2"
+
+ +

仕様書

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/node/ownerdocument/index.html b/files/ja/web/api/node/ownerdocument/index.html new file mode 100644 index 0000000000..4277e09247 --- /dev/null +++ b/files/ja/web/api/node/ownerdocument/index.html @@ -0,0 +1,116 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/ownerDocument +--- +
{{ApiRef}}
+ +

概要

+ +

ownerDocument プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。

+ +

構文

+ +
document = element.ownerDocument
+
+ + + +

例

+ +
var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得
+var html = doc.documentElement; // owner のドキュメント要素を取得
+
+alert(html); // [object HTMLHtmlElement]
+
+ +

注記

+ +

このプロパティによって返される document オブジェクトは、実際の HTML 文書中ですべての子ノードの属するメインオブジェクトです。document ノード自身に対しこのプロパティを用いた場合、戻り値は null となります。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}{{Spec2("DOM4")}} 
{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM3 Core")}}No change
{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Starting in Gecko 9.0 {{geckoRelease("9.0")}}, the ownerDocument of doctype nodes (that is, nodes for which {{domxref("Node.nodeType")}} is Node.DOCUMENT_TYPE_NODE or 10) is no longer null. Instead, the ownerDocument is the document on which document.implementation.createDocumentType() was called.

+ +

[2] http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx

diff --git a/files/ja/web/api/node/parentelement/index.html b/files/ja/web/api/node/parentelement/index.html new file mode 100644 index 0000000000..a5b9e2a3b4 --- /dev/null +++ b/files/ja/web/api/node/parentelement/index.html @@ -0,0 +1,92 @@ +--- +title: Node.parentElement +slug: Web/API/Node/parentElement +tags: + - DOM + - Element + - Node + - Property + - parent +translation_of: Web/API/Node/parentElement +--- +
+
{{APIRef("DOM")}}
+
+ +

Node.parentElementのread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、null が返ります。

+ +

構文

+ +
parentElement = node.parentElement
+ +

parentElementは現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトかnullです。

+ +

例

+ +
if (node.parentElement) {
+  node.parentElement.style.color = "red";
+}
+ +

ブラウザ実装状況

+ +

一部のブラウザーでは、parentElementプロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatVersionUnknown}} ({{domxref("Element")}} にのみ実装){{CompatVersionUnknown}} ({{domxref("Element")}} にのみ実装){{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

仕様

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/node/parentnode/index.html b/files/ja/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..7eefdd05d2 --- /dev/null +++ b/files/ja/web/api/node/parentnode/index.html @@ -0,0 +1,90 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/parentNode +--- +
+ {{ApiRef}}
+

概要

+

指定されたノードの DOM ツリー内の親ノードを返します。

+

構文

+
parentNode = node.parentNode
+
+ +

例

+
if (node.parentNode) {
+  // ツリー上に既に存在しない場合を除き、
+  // ツリーからノードを削除します。
+  node.parentNode.removeChild(node);
+}
+

注記

+

parentNode は、以下のノードタイプについては null を返します : Attr 、Document 、DocumentFragment 、Entity 、Notation

+

また、ノードが作成された直後でまだツリーに加えられていない場合も null を返します。

+

ブラウザ実装状況

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
機能Firefox (Gecko)ChromeInternet ExplorerOperaSafari
基本サポート{{CompatGeckoDesktop(1.0)}}0.2{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

仕様書

+ +

関連情報

+ diff --git a/files/ja/web/api/node/prefix/index.html b/files/ja/web/api/node/prefix/index.html new file mode 100644 index 0000000000..40db95ab12 --- /dev/null +++ b/files/ja/web/api/node/prefix/index.html @@ -0,0 +1,51 @@ +--- +title: Node.prefix +slug: Web/API/Node/prefix +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/prefix +--- +
{{ApiRef}}
+ +

概要

+ +

prefix は、特定のノードの名前空間の 接頭辞 (prefix) を返します。接頭辞がなければ null を返します。

+ +

構文

+ +
string = element.prefix
+
+ +

例

+ +

次の例は "x" をアラート表示します。

+ +
<x:div onclick="alert(this.prefix)"/>
+
+ +

注記

+ +

これは、名前空間を解するパーサを使っている場合（つまり、文書が XML mime 型の場合など）にのみ機能します。HTML 文書では機能しません。

+ +

仕様書

+ + + +

ブラウザ実装状況

+ + + +

{{Compat("api.Node.prefix")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/node/previoussibling/index.html b/files/ja/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..5506f5fd86 --- /dev/null +++ b/files/ja/web/api/node/previoussibling/index.html @@ -0,0 +1,42 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/previousSibling +--- +
{{ApiRef}}
+ +

概要

+ +

指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。

+ +

構文

+ +
previousNode = node.previousSibling;
+
+ +

例

+ +
// <a><b1 id="b1"/><b2 id="b2"/></a>
+
+alert( document.getElementById("b1").previousSibling ); // null
+alert( document.getElementById("b2").previousSibling.id ); // "b1"
+
+ +

注記

+ +

Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば Node.firstChild や Node.previousSibling で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。

+

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

+ +

childNode リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。

+ +

仕様書

+ + diff --git a/files/ja/web/api/node/removechild/index.html b/files/ja/web/api/node/removechild/index.html new file mode 100644 index 0000000000..23b19b52ab --- /dev/null +++ b/files/ja/web/api/node/removechild/index.html @@ -0,0 +1,126 @@ +--- +title: Node.removeChild +slug: Web/API/Node/removeChild +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/removeChild +--- +

Node.removeChild() メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。

+ +

構文

+ +
var oldChild = node.removeChild(child);
+または
+node.removeChild(child);
+
+ + + +

取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 oldChild オブジェクト参照を通じて、後でコード中で再利用することができます。

+ +

しかし、第二の構文では oldChild の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから 自動的に削除されます。

+ +

child が実際には element ノードの子ではない場合、このメソッドは例外を発生します。これは child が呼び出し時には実際に element の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。

+ +

このメソッドでは、2つの異なる方法で例外が発生します。

+ +
    +
  1. +

    child が実際に element の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。

    + +

    Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

    +
    2. +
  2. +

    child がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。
    +
    + Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

    +
    3. +
+ +

例

+ +
<!-- 対象とする HTML のコード -->
+<div id="top" > </div>
+
+<script type="text/javascript">
+      var top = document.getElementById("top");
+      var nested = document.getElementById("nested");
+
+      var garbage = top.removeChild(nested);    //Test Case 2: the method throws the exception (2)
+
+</script>
+
+<!--Sample HTML code-->
+<div id="top">
+ <div id="nested"></div>
+</div>
+
+<script type="text/javascript">
+      var top = document.getElementById("top");
+      var nested = document.getElementById("nested");
+
+      var garbage = top.removeChild(nested); // This first call remove correctly the node
+
+      // ......
+      garbage = top.removeChild(nested);   // Test Case 1: the method in the second call here, throws the exception (1)
+
+</script>
+
+
+ +
<!--Sample HTML code-->
+
+<div id="top">
+  <div id="nested"></div>
+</div>
+
+ +
// 親ノードから指定した子要素を除去
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+
+ +
// 親要素が不明、不定の場合の方法
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+
+ +
// 要素の全ての子を除去
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+
+ +

仕様書

+ + + +

ブラウザーの対応

+ + + +

{{Compat("api.Node.removeChild")}}

+ +

関連情報

+ + + +
{{APIRef("DOM")}}
diff --git a/files/ja/web/api/node/replacechild/index.html b/files/ja/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..49eda105e9 --- /dev/null +++ b/files/ja/web/api/node/replacechild/index.html @@ -0,0 +1,127 @@ +--- +title: Node.replaceChild +slug: Web/API/Node/replaceChild +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Node/replaceChild +--- +
{{ApiRef("DOM")}}
+ +

Node.replaceChild() メソッドは指定ノードの子ノードを別のノードに置き換えます。

+ +

構文

+ +
replacedNode = parentNode.replaceChild(newChild, oldChild);
+
+ + + +

例

+ +
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// ID も属性も内容も持たない空要素を生成
+var sp1 = document.createElement("span");
+
+// 生成したノードに id 属性 'newSpan' を付与
+sp1.setAttribute("id", "newSpan");
+
+// テキストノードを生成
+var sp1_content = document.createTextNode("新しい span 要素");
+
+// 生成したテキストノードを先の空要素の子ノードとして配置
+sp1.appendChild(sp1_content);
+
+// 置換に先んじ、参照を代入
+var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
+var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
+
+// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
+parentDiv.replaceChild(sp1, sp2);
+
+
+// 上記コード実行後のノードは以下の様になります:
+// <div>
+//   <span id="newSpan">新しい span 要素</span>
+// </div>
+
+ +

仕様書

+ + + +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
基本サポート{{CompatChrome(1.0)}}{{CompatGeckoDesktop(1)}}    IE6 (Maybe Earlier){{CompatVersionUnknown}}{{CompatOpera(1.0)}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能Android WebviewFirefox Mobile (Gecko)IE MobileEdge MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}IE6 (Maybe Earlier){{CompatVersionUnknown}}{{CompatOperaMobile(1.0)}}{{CompatVersionUnknown}}{{CompatChrome(1.0)}}
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/node/textcontent/index.html b/files/ja/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..97f73b9bbf --- /dev/null +++ b/files/ja/web/api/node/textcontent/index.html @@ -0,0 +1,115 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Node + - Property + - Reference + - プロパティ +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

textContent は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。

+ +
+

メモ: textContent と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは重要な点が異なります。

+
+ +

構文

+ +
let text = someNode.textContent
+someOtherNode.textContent = string
+
+ +

値

+ +

文字列または {{jsxref("null")}}

+ +

説明

+ +

textContent の値は状況によります。

+ + + +

ノードの textContent を設定すると、そのノードのすべての子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。

+ +

innerText との違い

+ +

Node.textContent と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。

+ + + +

innerHTML との違い

+ +

{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 innerHTML を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 textContent は値が HTML として解析されないので性能が良くなります。

+ +

さらに、textContent を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。

+ +

例

+ +

以下のような HTML の断片があります。

+ +
<div id="divA">This is <span>some</span> text!</div>
+ +

... textContent を使用して、要素のテキストの内容を取得することができます。

+ +
let text = document.getElementById('divA').textContent;
+// 変数 text の値は 'This is some text!' となります。
+ +

... また、要素のテキストを設定します。

+ +
document.getElementById('divA').textContent = 'This text is different!';
+// divA の HTML は次のようになります。
+// <div id="divA">This text is different!</div>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Node.textContent")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf