From 7b582dd1d008c1daee40ac27dd2f72b067438652 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 25 Feb 2022 00:44:22 +0900 Subject: Web/API/Node 以下のプロパティの文書を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/childnodes/index.html | 101 -------------------- files/ja/web/api/node/childnodes/index.md | 101 ++++++++++++++++++++ files/ja/web/api/node/firstchild/index.html | 46 --------- files/ja/web/api/node/firstchild/index.md | 46 +++++++++ files/ja/web/api/node/lastchild/index.html | 28 ------ files/ja/web/api/node/lastchild/index.md | 28 ++++++ files/ja/web/api/node/nextsibling/index.html | 87 ----------------- files/ja/web/api/node/nextsibling/index.md | 87 +++++++++++++++++ files/ja/web/api/node/nodename/index.html | 102 -------------------- files/ja/web/api/node/nodename/index.md | 102 ++++++++++++++++++++ files/ja/web/api/node/nodetype/index.html | 88 ------------------ files/ja/web/api/node/nodetype/index.md | 88 ++++++++++++++++++ files/ja/web/api/node/nodevalue/index.html | 81 ---------------- files/ja/web/api/node/nodevalue/index.md | 81 ++++++++++++++++ files/ja/web/api/node/ownerdocument/index.html | 66 ------------- files/ja/web/api/node/ownerdocument/index.md | 66 +++++++++++++ files/ja/web/api/node/parentelement/index.html | 46 --------- files/ja/web/api/node/parentelement/index.md | 46 +++++++++ files/ja/web/api/node/parentnode/index.html | 47 ---------- files/ja/web/api/node/parentnode/index.md | 47 ++++++++++ files/ja/web/api/node/previoussibling/index.html | 42 --------- files/ja/web/api/node/previoussibling/index.md | 42 +++++++++ files/ja/web/api/node/textcontent/index.html | 113 ----------------------- files/ja/web/api/node/textcontent/index.md | 113 +++++++++++++++++++++++ 24 files changed, 847 insertions(+), 847 deletions(-) delete mode 100644 files/ja/web/api/node/childnodes/index.html create mode 100644 files/ja/web/api/node/childnodes/index.md delete mode 100644 files/ja/web/api/node/firstchild/index.html create mode 100644 files/ja/web/api/node/firstchild/index.md delete mode 100644 files/ja/web/api/node/lastchild/index.html create mode 100644 files/ja/web/api/node/lastchild/index.md delete mode 100644 files/ja/web/api/node/nextsibling/index.html create mode 100644 files/ja/web/api/node/nextsibling/index.md delete mode 100644 files/ja/web/api/node/nodename/index.html create mode 100644 files/ja/web/api/node/nodename/index.md delete mode 100644 files/ja/web/api/node/nodetype/index.html create mode 100644 files/ja/web/api/node/nodetype/index.md delete mode 100644 files/ja/web/api/node/nodevalue/index.html create mode 100644 files/ja/web/api/node/nodevalue/index.md delete mode 100644 files/ja/web/api/node/ownerdocument/index.html create mode 100644 files/ja/web/api/node/ownerdocument/index.md delete mode 100644 files/ja/web/api/node/parentelement/index.html create mode 100644 files/ja/web/api/node/parentelement/index.md delete mode 100644 files/ja/web/api/node/parentnode/index.html create mode 100644 files/ja/web/api/node/parentnode/index.md delete mode 100644 files/ja/web/api/node/previoussibling/index.html create mode 100644 files/ja/web/api/node/previoussibling/index.md delete mode 100644 files/ja/web/api/node/textcontent/index.html create mode 100644 files/ja/web/api/node/textcontent/index.md (limited to 'files/ja/web/api/node') diff --git a/files/ja/web/api/node/childnodes/index.html b/files/ja/web/api/node/childnodes/index.html deleted file mode 100644 index 82a90460c6..0000000000 --- a/files/ja/web/api/node/childnodes/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Node.childNodes -slug: Web/API/Node/childNodes -tags: - - API - - DOM - - DOMリファレンス - - プロパティ - - リファレンス -translation_of: Web/API/Node/childNodes ---- -

- -

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')}}	初回定義

- -

ブラウザの互換性

- -

構文

+ +

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')}}	初回定義

+ +

ブラウザの互換性

+ +

概要

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

構文

var childNode = node.firstChild;
-

childNode : node の最初の子ノードがあればその参照、無い場合は null

例

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

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

もしこの空白がソースから取り除かれれば、#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/firstchild/index.md b/files/ja/web/api/node/firstchild/index.md new file mode 100644 index 0000000000..5a57be3ae9 --- /dev/null +++ b/files/ja/web/api/node/firstchild/index.md @@ -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}}

概要

構文

var childNode = node.firstChild;
+

childNode : node の最初の子ノードがあればその参照、無い場合は null

例

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

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

もしこの空白がソースから取り除かれれば、#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/lastchild/index.html b/files/ja/web/api/node/lastchild/index.html deleted file mode 100644 index e7f5626f3c..0000000000 --- a/files/ja/web/api/node/lastchild/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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;  // 特定の行の内、最後のセルを取得
-

仕様書

{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}
{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}

diff --git a/files/ja/web/api/node/lastchild/index.md b/files/ja/web/api/node/lastchild/index.md new file mode 100644 index 0000000000..e7f5626f3c --- /dev/null +++ b/files/ja/web/api/node/lastchild/index.md @@ -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
+

説明

例

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

仕様書

{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}
{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}

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

- -

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 を使って横断される時に許可されます。注記のセクションのリソースを見てください。

- -

仕様

- -

ブラウザ実装状況

- - - -

- -

構文

+ +

nextNode = node.nextSibling
+

+ +

注記

+ +

より多くの情報を得るには『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
+
+**************************************************/

+ +

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

+ +

仕様

+ +

ブラウザ実装状況

+ + + +

+ +

構文

str = node.nodeName;
-

str には指定した要素の名前が文字列の形式で入ります。
nodeName は読み取り専用の属性です。

注記

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Interface	nodeName
Attr	`Attr.name` と同じ
CDATASection	"#cdata-section"
Comment	"#comment"
Document	"#document"
DocumentFragment	"#document-fragment"
DocumentType	`DocumentType.name` と同じ
Element	`Element.tagName` と同じ
Entity	実体名
EntityReference	実体参照名
Notation	記法名
ProcessingInstruction	`ProcessingInstruction.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/nodename/index.md b/files/ja/web/api/node/nodename/index.md new file mode 100644 index 0000000000..65daeb1074 --- /dev/null +++ b/files/ja/web/api/node/nodename/index.md @@ -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;
+

str には指定した要素の名前が文字列の形式で入ります。
nodeName は読み取り専用の属性です。

注記

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Interface	nodeName
Attr	`Attr.name` と同じ
CDATASection	"#cdata-section"
Comment	"#comment"
Document	"#document"
DocumentFragment	"#document-fragment"
DocumentType	`DocumentType.name` と同じ
Element	`Element.tagName` と同じ
Entity	実体名
EntityReference	実体参照名
Notation	記法名
ProcessingInstruction	`ProcessingInstruction.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" が入ります。

仕様

diff --git a/files/ja/web/api/node/nodetype/index.html b/files/ja/web/api/node/nodetype/index.html deleted file mode 100644 index 135f0f95c7..0000000000 --- a/files/ja/web/api/node/nodetype/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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_NODE`	1
`ATTRIBUTE_NODE` {{deprecated_inline}}	2
`TEXT_NODE`	3
`CDATA_SECTION_NODE` {{deprecated_inline}}	4
`ENTITY_REFERENCE_NODE` {{deprecated_inline}}	5
`ENTITY_NODE` {{deprecated_inline}}	6
`PROCESSING_INSTRUCTION_NODE`	7
`COMMENT_NODE`	8
`DOCUMENT_NODE`	9
`DOCUMENT_TYPE_NODE`	10
`DOCUMENT_FRAGMENT_NODE`	11
`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/nodetype/index.md b/files/ja/web/api/node/nodetype/index.md new file mode 100644 index 0000000000..135f0f95c7 --- /dev/null +++ b/files/ja/web/api/node/nodetype/index.md @@ -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_NODE`	1
`ATTRIBUTE_NODE` {{deprecated_inline}}	2
`TEXT_NODE`	3
`CDATA_SECTION_NODE` {{deprecated_inline}}	4
`ENTITY_REFERENCE_NODE` {{deprecated_inline}}	5
`ENTITY_NODE` {{deprecated_inline}}	6
`PROCESSING_INSTRUCTION_NODE`	7
`COMMENT_NODE`	8
`DOCUMENT_NODE`	9
`DOCUMENT_TYPE_NODE`	10
`DOCUMENT_FRAGMENT_NODE`	11
`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 deleted file mode 100644 index 2cfbbf795f..0000000000 --- a/files/ja/web/api/node/nodevalue/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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 ノードは属性値を返します。

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attr	attribute の値
CDATASection	CDATA Sectionの中身
コメント	commentの中身
Document	null
DocumentFragment	null
DocumentType	null
Element	null
NamedNodeMap	null
EntityReference	null
Notation	null
ProcessingInstruction	ターゲットを除く全体の内容
Text	the text nodeの中身

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

仕様書

DOM Level 2 Core: Node.nodeValue

diff --git a/files/ja/web/api/node/nodevalue/index.md b/files/ja/web/api/node/nodevalue/index.md new file mode 100644 index 0000000000..2cfbbf795f --- /dev/null +++ b/files/ja/web/api/node/nodevalue/index.md @@ -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 ノードは属性値を返します。

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Attr	attribute の値
CDATASection	CDATA Sectionの中身
コメント	commentの中身
Document	null
DocumentFragment	null
DocumentType	null
Element	null
NamedNodeMap	null
EntityReference	null
Notation	null
ProcessingInstruction	ターゲットを除く全体の内容
Text	the text nodeの中身

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

仕様書

DOM Level 2 Core: Node.nodeValue

diff --git a/files/ja/web/api/node/ownerdocument/index.html b/files/ja/web/api/node/ownerdocument/index.html deleted file mode 100644 index f6eef4f570..0000000000 --- a/files/ja/web/api/node/ownerdocument/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Node.ownerDocument -slug: Web/API/Node/ownerDocument -tags: - - DOM - - Gecko - - Node -translation_of: Web/API/Node/ownerDocument ---- -

- -

概要

- -

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

- -

構文

- -

document = element.ownerDocument
-

- -

document : 指定要素の祖先である {{domxref("document")}} オブジェクト

- -

例

- -

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

- -

注記

- -

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

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - -

Specification	Status	Comment
{{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

- -

ブラウザ実装状況

- -

diff --git a/files/ja/web/api/node/ownerdocument/index.md b/files/ja/web/api/node/ownerdocument/index.md new file mode 100644 index 0000000000..f6eef4f570 --- /dev/null +++ b/files/ja/web/api/node/ownerdocument/index.md @@ -0,0 +1,66 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/ownerDocument +--- +

+ +

概要

+ +

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

+ +

構文

+ +

document = element.ownerDocument
+

+ +

document : 指定要素の祖先である {{domxref("document")}} オブジェクト

+ +

例

+ +

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

+ +

注記

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + +

Specification	Status	Comment
{{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

+ +

ブラウザ実装状況

+ +

diff --git a/files/ja/web/api/node/parentelement/index.html b/files/ja/web/api/node/parentelement/index.html deleted file mode 100644 index e121601c07..0000000000 --- a/files/ja/web/api/node/parentelement/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Node.parentElement -slug: Web/API/Node/parentElement -tags: - - DOM - - Element - - Node - - Property - - parent -translation_of: Web/API/Node/parentElement ---- -

- -

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

- -

仕様

- -

{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}

- -

ブラウザ実装状況

- -

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

- -

構文

+ +

parentElement = node.parentElement

+ +

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

+ +

例

+ +

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

+ +

仕様

+ +

{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}

+ +

ブラウザ実装状況

+ +

概要

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

構文

parentNode = node.parentNode
-

parentNode : 指定ノードの親ノード。要素の親ノードは、Element ノード、Document ノード、または DocumentFragment になります。

例

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

注記

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

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

ブラウザ実装状況

- -

仕様書

概要

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

構文

parentNode = node.parentNode
+

parentNode : 指定ノードの親ノード。要素の親ノードは、Element ノード、Document ノード、または DocumentFragment になります。

例

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

注記

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

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

ブラウザ実装状況

+ +

仕様書

概要

- -

指定のノードの親ノードの 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"
-

- -

注記

- -

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

- -

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

- -

仕様書

- -

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

+ +

概要

+ +

構文

+ +

previousNode = node.previousSibling;
+

+ +

例

+ +

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

+ +

注記

+ +

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

+ +

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

+ +

仕様書

+ +

diff --git a/files/ja/web/api/node/textcontent/index.html b/files/ja/web/api/node/textcontent/index.html deleted file mode 100644 index 3f90221d9f..0000000000 --- a/files/ja/web/api/node/textcontent/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Node.textContent -slug: Web/API/Node/textContent -tags: - - API - - DOM - - Node - - Property - - Reference - - プロパティ -translation_of: Web/API/Node/textContent ---- -

- -

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

- -

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

- -

構文

- -

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

- -

値

- -

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

- -

説明

- -

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

- -

ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 textContent は {{jsxref("null")}} を返します。 - -
メモ: 文書全体のすべてのテキストと CDATA データを取得するには、 document.documentElement.textContent を使用する方法があります。
-
ノードが CDATA セクション、コメント、処理命令ノード、テキストノードの場合、 textContent はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。
他のノードタイプの場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)

- -

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

- -

innerText との違い

- -

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

- -

textContent は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、すべての要素の内容を取得します。一方、 innerText は「人間が読める」要素のみを示します。
textContent はノード内のすべての要素を返します。一方、 innerText はスタイルを反映し、「非表示」の要素のテキストを返しません。 -
- もっと言えば、 innerText は CSS のスタイルを考慮するので、 innerText の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)
-
textContent とは異なり、 innerText を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します。他の要素または同じ要素にノードをもう一度挿入することは不可能です。

- -

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')}}

- -

ブラウザーの互換性

- -

構文

+ +

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

+ +

値

+ +

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

+ +

説明

+ +

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

+ +

ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 textContent は {{jsxref("null")}} を返します。 + +
メモ: 文書全体のすべてのテキストと CDATA データを取得するには、 document.documentElement.textContent を使用する方法があります。
+
ノードが CDATA セクション、コメント、処理命令ノード、テキストノードの場合、 textContent はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。
他のノードタイプの場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)

+ +

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

+ +

innerText との違い

+ +

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

+ +

textContent は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、すべての要素の内容を取得します。一方、 innerText は「人間が読める」要素のみを示します。
textContent はノード内のすべての要素を返します。一方、 innerText はスタイルを反映し、「非表示」の要素のテキストを返しません。 +
- もっと言えば、 innerText は CSS のスタイルを考慮するので、 innerText の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)
+
textContent とは異なり、 innerText を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します。他の要素または同じ要素にノードをもう一度挿入することは不可能です。

+ +

innerHTML との違い

+ +

さらに、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')}}

+ +

ブラウザーの互換性

+ +

構文

str = node.nodeName;
-

str には指定した要素の名前が文字列の形式で入ります。
nodeName は読み取り専用の属性です。

注記

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Interface	nodeName
Attr	`Attr.name` と同じ
CDATASection	"#cdata-section"
Comment	"#comment"
Document	"#document"
DocumentFragment	"#document-fragment"
DocumentType	`DocumentType.name` と同じ
Element	`Element.tagName` と同じ
Entity	実体名
EntityReference	実体参照名
Notation	記法名
ProcessingInstruction	`ProcessingInstruction.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" が入ります。

仕様

+{{APIRef("DOM")}} + +**`nodeName`** は {{domxref("Node")}} の読み取り専用プロパティで、現在のノードの名前を文字列で返します。 + +## 値 + +文字列です。ノードの種類によって、次のような値になります。 + +- {{domxref("Attr")}} + - : {{domxref("Attr.name")}} の値で、この属性の*修飾名*です。 +- {{domxref("CDATASection")}} + - : `"#cdata-section"` という文字列です。 +- {{domxref("Comment")}} + - : `"#comment"` という文字列です。 +- {{domxref("Document")}} + - : `"#document"` という文字列です。 +- {{domxref("DocumentFragment")}} + - : `"#document-fragment"` という文字列です。 +- {{domxref("DocumentType")}} + - : {{domxref("DocumentType.name")}} の値です。 +- {{domxref("Element")}} + - : {{domxref("Element.tagName")}} の値です。これは HTML 要素であればその要素のタグの*大文字の*名前であり、 XML 要素（SVG や MathML の要素）であればその要素のタグの*小文字の*名前です。 +- {{domxref("ProcessingInstruction")}} + - : {{domxref("ProcessingInstruction.target")}} の値です。 +- {{domxref("Text")}} + - : `"#text"` という文字列です。 + +## 例 + +この例では、様々なノードのノード名を表示します。 + +```html +こちらは HTML です。 +

Hello world

+ +テキストテキスト +テキスト
+ +

+まだ出力されていません。 +``` + +また、スクリプトは以下の通りです。 + +```js +let node = document.getElementsByTagName("body")[0].firstChild; +let result = "ノード名:
"; +while (node) { + result += node.nodeName + "
"; + node = node.nextSibling +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "450")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.tagName")}} +- {{domxref("Attr.name")}} +- {{domxref("DocumentType.name")}} +- {{domxref("ProcessingInstruction.target")}} -- cgit v1.2.3-54-g00ecf From ed6203f957a5616efa135b87368715645b251444 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 26 Feb 2022 00:16:32 +0900 Subject: 2021/11/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/childnodes/index.md | 159 +++++++++++---------------- files/ja/web/api/node/firstchild/index.md | 103 ++++++++++------- files/ja/web/api/node/lastchild/index.md | 55 +++++---- files/ja/web/api/node/nextsibling/index.md | 107 ++++++++---------- files/ja/web/api/node/nodetype/index.md | 150 ++++++++++++------------- files/ja/web/api/node/nodevalue/index.md | 136 ++++++++++------------- files/ja/web/api/node/ownerdocument/index.md | 68 ++++-------- 7 files changed, 353 insertions(+), 425 deletions(-) (limited to 'files/ja/web/api/node') diff --git a/files/ja/web/api/node/childnodes/index.md b/files/ja/web/api/node/childnodes/index.md index 82a90460c6..0e07d3ecb3 100644 --- a/files/ja/web/api/node/childnodes/index.md +++ b/files/ja/web/api/node/childnodes/index.md @@ -2,100 +2,73 @@ title: Node.childNodes slug: Web/API/Node/childNodes tags: - - API - - DOM - - DOMリファレンス - プロパティ - リファレンス + - 読み取り専用 +browser-compat: api.Node.childNodes translation_of: Web/API/Node/childNodes --- -

- -

構文

- -

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

- -

注記

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

仕様	ステータス	コメント
{{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')}}	初回定義

- -

ブラウザの互換性

- -

概要

構文

var childNode = node.firstChild;
-

childNode : node の最初の子ノードがあればその参照、無い場合は null

例

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

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

もしこの空白がソースから取り除かれれば、#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' を表示するでしょう。

仕様書

+{{APIRef("DOM")}} + +**`firstChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は `null` を返します。 + +このノードが {{domxref("Document")}} であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。 + +> **Note:** このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。 +> {{domxref("Text")}} または {{domxref("Comment")}} ノードになることがあります。 +> 他の要素の子である最初の {{domxref("Element")}} を取得したい場合は、 {{domxref("Element.firstElementChild")}} を使用することを検討してください。 + +## 値 + +{{domxref("Node")}}、または存在しなければ `null`。 + +## 例 + +次の例では `firstChild` の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかを示しています。 + +```html +

+ 最初の span +

+ + +``` + +上記の例では[コンソール](/ja/docs/Web/API/console)に '#text' と表示されます。開始タグ `

` の末尾と `` タグとの間にある空白を調整するためにテキストノードが挿入されているためです。**あらゆる**[ホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)は、単一の空白から複数のスペース、改行、タブに至るまで、 1 つの `#text` ノードを生成します。 + +`#text` ノードはもう 1 つ、閉じタグ `` と `

` の間に挿入されます。 + +ホワイトスペースをソースから取り除くと、 #text ノードは挿入されず、 span 要素がその段落の最初の子になります。 + +```html +

最初の span

+ + +``` + +コンソールには 'SPAN' と表示されるようになります。 + +`node.firstChild` が `#text` や `#comment` ノードを返す問題を回避するには、 {{domxref("Element.firstElementChild")}} を使用すると最初の要素ノードのみを返すことができます。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.firstElementChild")}} +- {{domxref("Node.lastChild")}} diff --git a/files/ja/web/api/node/lastchild/index.md b/files/ja/web/api/node/lastchild/index.md index e7f5626f3c..9e9d386274 100644 --- a/files/ja/web/api/node/lastchild/index.md +++ b/files/ja/web/api/node/lastchild/index.md @@ -2,27 +2,38 @@ title: Node.lastChild slug: Web/API/Node/lastChild tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.lastChild translation_of: Web/API/Node/lastChild --- -

- {{ApiRef}}

概要

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

構文

var last_child = element.lastChild
-

説明

例

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

仕様書

{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}
{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}

+{{APIRef("DOM")}} + +**`lastChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最後の子ノードを返します。 +親ノードが要素であった場合、子ノードはふつう、要素ノード、テキストノード、コメントノードの何れかです。 +子要素がない場合は `null` を返します。 + +## Value + +このノードの最後の子である {{domxref("Node")}}、または子ノードがなければ `null` です。 + +## 例 + +```js +const tr = document.getElementById("row1"); +const corner_td = tr.lastChild; +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.firstChild")}} +- {{domxref("Element.lastElementChild")}} diff --git a/files/ja/web/api/node/nextsibling/index.md b/files/ja/web/api/node/nextsibling/index.md index 1ff4c13cef..f310d8e456 100644 --- a/files/ja/web/api/node/nextsibling/index.md +++ b/files/ja/web/api/node/nextsibling/index.md @@ -2,86 +2,65 @@ title: Node.nextSibling slug: Web/API/Node/nextSibling tags: - - DOM - - Gecko - - Node - - 要更新 + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.nextSibling translation_of: Web/API/Node/nextSibling --- -

+{{APIRef("DOM")}} -

+**`nextSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親の {{domxref("Node.childNodes","childNodes")}} の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は `null` を返します。 -

構文

+> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に {{domxref("Text")}} ノードを挿入します。 +> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や [`Node.previousSibling`](/ja/docs/Web/API/Node/previousSibling) を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。 +> +> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。 +> +> {{domxref("Element.nextElementSibling")}} を使用すると、ホワイトスペースのノードや要素間のテキスト、コメントなどを飛ばして次の要素を取得することができます。 +> +> 子ノードのリストで反対方向に移動する場合は、 [Node.previousSibling](/ja/docs/Web/API/Node/previousSibling) を使用してください。 -

nextNode = node.nextSibling
-

+## 値 -

注記

+現在のノードの次の兄弟ノードを表す {{domxref("Node")}}、または存在しない場合は `null` です。 -

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

+## 例 -

+```html +

こちらは div-1 です。

こちらは div-2 です。

+
+計算結果がありません。 +``` -

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

+```js +let el = document.getElementById('div-1').nextSibling, +i = 1; -

例

+let result = "div-1 の兄弟要素:
"; -

<div id="div-01">Here is div-01</div>
-<div id="div-02">Here is div-02</div>
+while (el) {
+  result += i + '. ' + el.nodeName+"
";
+  el = el.nextSibling;
+  i++;
+}
 
-<script type="text/javascript">
-var el = document.getElementById('div-01').nextSibling,
-    i = 1;
+const output = document.getElementsByTagName("output")[0];
+output.innerHTML = result;
+```
 
-console.log('Siblings of div-01:');
+{{ EmbedLiveSample("Example", "100%", 500)}}
 
-while (el) {
-  console.log(i + '. ' + el.nodeName);
-  el = el.nextSibling;
-  i++;
-}
+## 仕様書
 
-</script>
+{{Specifications}}
 
-/**************************************************
-  The following is written to the console as it loads:
+## ブラウザーの互換性
 
-     Siblings of div-01
+{{Compat}}
 
-      1. #text
-      2. DIV
-      3. #text
-      4. SCRIPT
+## 関連情報
 
-**************************************************/

- -

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

- -

仕様

- -

ブラウザ実装状況

- - - -

- -

概要

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

構文

var type = node.nodeType;
-

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称	値
`ELEMENT_NODE`	1
`ATTRIBUTE_NODE` {{deprecated_inline}}	2
`TEXT_NODE`	3
`CDATA_SECTION_NODE` {{deprecated_inline}}	4
`ENTITY_REFERENCE_NODE` {{deprecated_inline}}	5
`ENTITY_NODE` {{deprecated_inline}}	6
`PROCESSING_INSTRUCTION_NODE`	7
`COMMENT_NODE`	8
`DOCUMENT_NODE`	9
`DOCUMENT_TYPE_NODE`	10
`DOCUMENT_FRAGMENT_NODE`	11
`NOTATION_NODE` {{deprecated_inline}}	12

例

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

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

仕様書

+{{APIRef("DOM")}} + +**`nodeType`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティであり、整数値でこのノードがなんであるかを識別します。これは様々なノードの種類、例えば {{domxref("Element", "elements")}}, {{domxref("Text", "text")}}, {{domxref("Comment", "comments")}} を見分けます。 + +## 値 + +整数値で、このノードの種類を識別します。可能な値は次の通りです。 + +- `Node.ELEMENT_NODE` (`1`) + - : {{HTMLElement("p")}} や {{HTMLElement("div")}} などの {{domxref("Element")}} ノードです。 +- `Node.ATTRIBUTE_NODE` (`2`) + - : {{domxref("Element")}} の {{domxref("Attr", "Attribute")}} ノードです。 +- `Node.TEXT_NODE` (`3`) + - : {{domxref("Element")}} や {{domxref("Attr")}} の中に存在する {{domxref("Text")}} です。 +- `Node.CDATA_SECTION_NODE`(`4`) + - : `` のような {{domxref("CDATASection")}} です。 +- `Node.PROCESSING_INSTRUCTION_NODE` (`7`) + - : `` のような XML 文書の {{domxref("ProcessingInstruction")}} です。 +- `Node.COMMENT_NODE` (`8`) + - : `` のような {{domxref("Comment")}} ノードです。 +- `Node.DOCUMENT_NODE` (`9`) + - : {{domxref("Document")}} ノードです。 +- `Node.DOCUMENT_TYPE_NODE` (`10`) + - : `` のような {{domxref("DocumentType")}} ノードです。 +- `Node.DOCUMENT_FRAGMENT_NODE` (`11`) + - : A {{domxref("DocumentFragment")}} node. + +`Node.ENTITY_REFERENCE_NODE` (`5`), `Node.ENTITY_NODE` (`6`), `Node.NOTATION_NODE` (`12`) は非推奨になっており、使用されなくなっています。 + +## 例 + +## 様々な種類のノード + +```js +document.nodeType === Node.DOCUMENT_NODE; // true +document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE; // true + +document.createDocumentFragment().nodeType === Node.DOCUMENT_FRAGMENT_NODE; // true + +const p = document.createElement("p"); +p.textContent = "昔々…"; + +p.nodeType === Node.ELEMENT_NODE; // true +p.firstChild.nodeType === Node.TEXT_NODE; // true +``` + +### コメント + +次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。 + +```js +const node = document.documentElement.firstChild; +if (node.nodeType !== Node.COMMENT_NODE) { + console.warn("コメントを入れてください。"); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/nodevalue/index.md b/files/ja/web/api/node/nodevalue/index.md index 2cfbbf795f..2d254b0a33 100644 --- a/files/ja/web/api/node/nodevalue/index.md +++ b/files/ja/web/api/node/nodevalue/index.md @@ -2,80 +2,66 @@ title: Node.nodeValue slug: Web/API/Node/nodeValue tags: - - DOM - - Gecko - - Gecko DOM Reference - - Node + - プロパティ + - リファレンス +browser-compat: api.Node.nodeValue translation_of: Web/API/Node/nodeValue --- -

- {{ApiRef}}

概要

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

構文

value = node.nodeValue

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

注記

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

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

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Attr	attribute の値
CDATASection	CDATA Sectionの中身
コメント	commentの中身
Document	null
DocumentFragment	null
DocumentType	null
Element	null
NamedNodeMap	null
EntityReference	null
Notation	null
ProcessingInstruction	ターゲットを除く全体の内容
Text	the text nodeの中身

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

仕様書

DOM Level 2 Core: Node.nodeValue

+{{APIRef("DOM")}} + +**`nodeValue`** は {{domxref("Node")}} インターフェイスのプロパティで、現在のノードの値を返したり設定したりします。 + +## Value + +もしあれば、現在のノードの値を含む文字列です。 +文書自身においては、 `nodeValue` は `null` を返します。 +テキスト、コメント、 CDATA ノードでは、 `nodeValue` はノードの内容を返します。 +属性ノードにおいては、属性の値が返します。 + +以下の表はノードの種類別の返値を表しています。 + +| ノード | nodeValue の値 | +| ------------------------------------ | ----------------------------------- | +| {{domxref("CDATASection")}} | CDATA セクションの中身 | +| {{domxref("Comment")}} | コメントの中身 | +| {{domxref("Document")}} | `null` | +| {{domxref("DocumentFragment")}} | `null` | +| {{domxref("DocumentType")}} | `null` | +| {{domxref("Element")}} | `null` | +| {{domxref("NamedNodeMap")}} | `null` | +| {{domxref("ProcessingInstruction")}} | 対象を除く内容物全体 | +| {{domxref("Text")}} | テキストノードの中身 | + +> **Note:** `nodeValue` が `null` になると定義されている場合は、設定しても効果がありません。 + +## 例 + +```html +

Hello world

+ +結果が出ていません。 +``` + +また、以下のスクリプトを参照してください。 + +```js +let node = document.getElementsByTagName("body")[0].firstChild; +let result = "
ノード名:
"; +while (node) { + result += node.nodeName + "の値: " + node.nodeValue + "
"; + node = node.nextSibling +} + +const output = document.getElementById("result"); +output.innerHTML = result; +``` + +{{ EmbedLiveSample("Example", "100%", "250")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} diff --git a/files/ja/web/api/node/ownerdocument/index.md b/files/ja/web/api/node/ownerdocument/index.md index f6eef4f570..75cf471b02 100644 --- a/files/ja/web/api/node/ownerdocument/index.md +++ b/files/ja/web/api/node/ownerdocument/index.md @@ -2,65 +2,35 @@ title: Node.ownerDocument slug: Web/API/Node/ownerDocument tags: - - DOM - - Gecko - - Node + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.ownerDocument translation_of: Web/API/Node/ownerDocument --- -

+{{APIRef("DOM")}} -

概要

+**`ownerDocument`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最上位の文書オブジェクトを返します。 -

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

+## 値 -

構文

+すべての子ノードが作成された最上位の {{domxref("Document")}} オブジェクトです。 -

document = element.ownerDocument
-

+このプロパティが文書自身のノードで使用された場合、値は `null` になります。 -

document : 指定要素の祖先である {{domxref("document")}} オブジェクト

+## 例 -

例

+```js +// 指定された "p" から、文書オブジェクトの子である最上位の HTML を取得します。 -

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

+## 仕様書 -

注記

+{{Specifications}} -

+## ブラウザーの互換性 -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - -

Specification	Status	Comment
{{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

- -

ブラウザ実装状況

- -

+{{Compat}} -- cgit v1.2.3-54-g00ecf From 068058eea2550a1b3da98a3a5af70bc9172d2be2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 26 Feb 2022 00:16:32 +0900 Subject: 2021/11/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/node/parentelement/index.md | 49 ++++----- files/ja/web/api/node/parentnode/index.md | 80 +++++++-------- files/ja/web/api/node/previoussibling/index.md | 81 ++++++++++----- files/ja/web/api/node/textcontent/index.md | 132 ++++++++++--------------- 4 files changed, 167 insertions(+), 175 deletions(-) (limited to 'files/ja/web/api/node') diff --git a/files/ja/web/api/node/parentelement/index.md b/files/ja/web/api/node/parentelement/index.md index e121601c07..8aa85b65f5 100644 --- a/files/ja/web/api/node/parentelement/index.md +++ b/files/ja/web/api/node/parentelement/index.md @@ -2,45 +2,36 @@ title: Node.parentElement slug: Web/API/Node/parentElement tags: - - DOM - - Element - - Node - - Property - - parent + - プロパティ + - リファレンス + - 読み取り専用 +browser-compat: api.Node.parentElement translation_of: Web/API/Node/parentElement --- -

+{{APIRef("DOM")}} -

+**`parentElement`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、この DOM ノードの親である要素 ({{DOMxRef("Element")}}) を返します。このノードに親ノードがないか、親が DOM の {{DOMxRef("Element")}} でない場合は `null` を返します。 -

構文

+## 値 -

parentElement = node.parentElement

+現在のノードの親ノードである {{domxref("Element")}} を返します。そのようなものがない場合は `null` を返します。 -

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

+## 例 -

例

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

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

+## 仕様書 -

仕様

+{{Specifications}} -

{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}

+## ブラウザーの互換性 -

ブラウザ実装状況

+{{Compat}} -

+## 関連情報 -

- -

概要

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

構文

parentNode = node.parentNode
-

parentNode : 指定ノードの親ノード。要素の親ノードは、Element ノード、Document ノード、または DocumentFragment になります。

例

if (node.parentNode) {
-  // ツリー上に既に存在しない場合を除き、
-  // ツリーからノードを削除します。
+{{APIRef("DOM")}}
+
+**`parentNode`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、 DOM ツリー内の特定のノードの親ノードを返します。
+
+`Document` および `DocumentFragment` [ノード](/ja/docs/Web/API/Node/nodeType)には親が付くことはないので、 `parentNode` は常に `null` になります。
+ノードが生成されてからツリーに割り当てられていない場合も `null` を返します。
+
+## 値
+
+現在のノードの親に当たる {{domxref("Node")}} です。要素の親になるのは `Element` ノード、 `Document` ノード、 `DocumentFragment` ノードの何れかです。
+
+## 例
+
+```js
+if (node.parentNode) {
+  // ノードがツリーの中にある場合は、ツリーから取り除く
   node.parentNode.removeChild(node);
-}

注記

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

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

ブラウザ実装状況

- -

仕様書

概要

+**`previousSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親ノードの {{domxref("Node.childNodes", "childNodes")}} リスト内で、直前にあるノードを返します。指定されたノードがリストの先頭にあった倍は `null` を返します。 -

+> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書にテキストノードを挿入します。 +> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や `Node.previousSibling` を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。 +> +> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。 +> +> [`previousElementSibling`](/ja/docs/Web/API/Element/previousElementSibling) を使用すると、（テキストノードやその他の要素以外のノードを飛ばして）次の要素を取得することができます。 +> +> 子ノードのリストで反対方向に移動する場合は、 [Node.nextSibling](/ja/docs/Web/API/Node/nextSibling) を使用してください。 -

構文

+## 値 -

previousNode = node.previousSibling;
-

+現在のノードの直前のノードを表す {{domxref("Node")}} です。 +存在しない場合は `null` です。 -

例

+## 例 -

// <a><b1 id="b1"/><b2 id="b2"/></a>
+次の例では、要素にテキストノードがある場合とない場合の `previousSibling` の動作を示しています。
 
-alert( document.getElementById("b1").previousSibling ); // null
-alert( document.getElementById("b2").previousSibling.id ); // "b1"
-

+### 最初の例 -

注記

+この例では、一連の `img` 要素が互いに隣り合っており、その間にホワイトスペースがありません。 -

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

+```html + +``` -

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

+```js +document.getElementById("b1").previousSibling; // +document.getElementById("b2").previousSibling.id; // "b1" +``` -

仕様書

+### 2 番目の例 -

+この例では、 `img` 要素の間にホワイトスペースのテキストノード（改行）があります。 + +```html + + + +``` + +```js +document.getElementById("b1").previousSibling; // #text +document.getElementById("b1").previousSibling.previousSibling; // +document.getElementById("b2").previousSibling.previousSibling; // +document.getElementById("b2").previousSibling; // #text +document.getElementById("b2").previousSibling.id; // undefined +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.nextSibling")}} +- {{domxref("Element.previousElementSibling")}} diff --git a/files/ja/web/api/node/textcontent/index.md b/files/ja/web/api/node/textcontent/index.md index 3f90221d9f..1777a5cd21 100644 --- a/files/ja/web/api/node/textcontent/index.md +++ b/files/ja/web/api/node/textcontent/index.md @@ -2,112 +2,80 @@ title: Node.textContent slug: Web/API/Node/textContent tags: - - API - - DOM - - Node - - Property - - Reference - プロパティ + - リファレンス +browser-compat: api.Node.textContent translation_of: Web/API/Node/textContent --- -

+{{APIRef("DOM")}} -

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

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

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

+> **Note:** `textContent` と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、 2 つのプロパティは[重要な点が異なります](#innertext_との違い)。 -

構文

+## 値 -

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

+文字列または {{jsxref("null")}} です。値は場面によります。 -

値

+- ノードが {{domxref("document")}} または {{glossary("doctype")}} である場合、 `textContent` は {{jsxref("null")}} を返します。 -

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

+ > **Note:** 文書全体の*すべての*テキストと [CDATA データ](/ja/docs/Web/API/CDATASection)を取得するには、 `document.documentElement.textContent` を使用する方法があります。 -

説明

+- ノードが [CDATA セクション](/ja/docs/Web/API/CDATASection)、コメント、[処理命令ノード](/ja/docs/Web/API/ProcessingInstruction)、 [テキストノード](/ja/docs/Web/API/Text)の場合、 `textContent` はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。 +- 他のノード型の場合、`textContent` は、コメントと処理命令ノードを除く、すべての子ノードの `textContent` 属性値を連結したものを返します。（ノードが子を持たない場合、これは空文字列になります。） -

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

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

ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 textContent は {{jsxref("null")}} を返します。 +### innerText との違い -
メモ: 文書全体のすべてのテキストと CDATA データを取得するには、 document.documentElement.textContent を使用する方法があります。
-
ノードが CDATA セクション、コメント、処理命令ノード、テキストノードの場合、 textContent はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。
他のノードタイプの場合、textContent は、コメントと処理命令ノードを除く、すべての子ノードの textContent 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)

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

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

+- `textContent` は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、*すべて*の要素の中身を取得します。一方、 `innerText` は「人間が読める」要素のみを示します。 +- `textContent` はノード内のすべての要素を返します。一方、 `innerText` はスタイルを反映し、「非表示」の要素のテキストは返しません。 -

innerText との違い

+ - もっと言えば、 `innerText` は CSS のスタイルを考慮するので、 `innerText` の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。) -

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

+- `textContent` とは異なり、 `innerText` を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを*完全に破棄します*。他の要素または同じ要素にノードをもう一度挿入することは不可能です。 -

textContent は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、すべての要素の内容を取得します。一方、 innerText は「人間が読める」要素のみを示します。
textContent はノード内のすべての要素を返します。一方、 innerText はスタイルを反映し、「非表示」の要素のテキストを返しません。 -
- もっと言えば、 innerText は CSS のスタイルを考慮するので、 innerText の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)
-
textContent とは異なり、 innerText を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを完全に破棄します。他の要素または同じ要素にノードをもう一度挿入することは不可能です。

+### innerHTML との違い -

innerHTML との違い

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

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

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

+## 例 -

例

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

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

+```html +

This is some text!

+``` -

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

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

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

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

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

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

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

- -

document.getElementById('divA').textContent = 'This text is different!';
+```js
+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')}}

- -

ブラウザーの互換性

- -

構文

- -

var aChild = element.appendChild(aChild);

- -

引数

- -

aChild

- -

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

- -

戻り値

- -

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

- -

注意

- -

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

- -

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

- -

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

- -

例

- -

// 新しい段落要素を作成し、ドキュメントの 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')}}	初期定義。

- -

ブラウザー実装状況

- -

構文

+ +

var aChild = element.appendChild(aChild);

+ +

引数

+ +

aChild

+ +

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

+ +

戻り値

+ +

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

+ +

注意

+ +

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

+ +

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

+ +

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

+ +

例

+ +

// 新しい段落要素を作成し、ドキュメントの 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')}}	初期定義。

+ +

ブラウザー実装状況

+ +

概要

- -

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

- -

構文

- -

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()")}} を使用してください。

- -

ブラウザ実装状況

- -

仕様書

- -

{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}
{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}
DOM4: cloneNode (草案)

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

+ +

概要

+ +

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

+ +

構文

+ +

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);
+

+ +

注記

+ +

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

+ +

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

+ +

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

+ +

ブラウザ実装状況

+ +

仕様書

+ +

{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}
{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}
DOM4: cloneNode (草案)

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

- -

概要

- -

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

- -

構文

- -

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_DISCONNECTED`	1
`DOCUMENT_POSITION_PRECEDING`	2
`DOCUMENT_POSITION_FOLLOWING`	4
`DOCUMENT_POSITION_CONTAINS`	8
`DOCUMENT_POSITION_CONTAINED_BY`	16
`DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`	32

- -

例

- -

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 3	Recommendation
DOM Standard	Living standard

- -

概要

+ +

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

+ +

構文

+ +

node.compareDocumentPosition( otherNode )
+

+ +

パラメーター

+ +

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

+ +

返り値

+ +

注記

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

名称	値
`DOCUMENT_POSITION_DISCONNECTED`	1
`DOCUMENT_POSITION_PRECEDING`	2
`DOCUMENT_POSITION_FOLLOWING`	4
`DOCUMENT_POSITION_CONTAINS`	8
`DOCUMENT_POSITION_CONTAINED_BY`	16
`DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`	32

+ +

例

+ +

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 要素の前に配置しなくてはなりません。");
+}
+

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +

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

+ +

構文

- -

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

- -

ブラウザ実装状況

- -

構文

+ +

node.contains( otherNode )
+

+ +

例

+ +

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

+ +

ブラウザ実装状況

+ +

概要

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

構文

node.hasChildNodes()

例

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

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

仕様書

hasChildNodes

概要

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

構文

node.hasChildNodes()

例

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

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

仕様書

hasChildNodes

構文

- -

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')}}	導入

- -

ブラウザーの互換性

- -

構文

+ +

let insertedNode = parentNode.insertBefore(newNode, referenceNode)
+

+ +

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

+ +

返値

+ +

追加された子ノードを返します (ただし 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)

+ +

例 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')}}	導入

+ +

ブラウザーの互換性

+ +

概要

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

構文

result = node.isDefaultNamespace(namespaceURI)
-

result : 戻り値は真偽値 (true / false) となる
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

仕様書

概要

構文

result = node.isDefaultNamespace(namespaceURI)
+

result : 戻り値は真偽値 (true / false) となる
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

仕様書

概要

- -

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

- -

構文

- -

var isEqualNode = node.isEqualNode(otherNode);
-

- -

otherNode : 同値性を比較する対象の {{domxref("Node")}}

- -

例

- -

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

- -

HTML

- -

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

- -

CSS

- -

#output {
-  width: 440px;
-  border: 2px solid black;
-  border-radius: 5px;
-  padding: 10px;
-  margin-top: 20px;
-  display: block;
-}

- -

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

- -

仕様

- - - - - - - - - - - - - - - - - -

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

- -

ブラウザー互換性

- - - -

- -

参考

- -

{{domxref("Node.isSameNode()")}}

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

+ +

概要

+ +

構文

+ +

var isEqualNode = node.isEqualNode(otherNode);
+

+ +

otherNode : 同値性を比較する対象の {{domxref("Node")}}

+ +

例

+ +

HTML

+ +

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

+ +

CSS

+ +

#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}

+ +

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

+ +

仕様

+ + + + + + + + + + + + + + + + + +

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

+ +

ブラウザー互換性

+ + + +

+ +

参考

+ +

{{domxref("Node.isSameNode()")}}

diff --git a/files/ja/web/api/node/issamenode/index.html b/files/ja/web/api/node/issamenode/index.html deleted file mode 100644 index f94668cfd5..0000000000 --- a/files/ja/web/api/node/issamenode/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -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);
-

arg : 比較ノード

仕様書

{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}
{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています

概要

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

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

// 当メソッド
+node1.isSameNode(node2)
+
+// 代替策
+node1 === node2
+node1 == node2
+
+

構文

isSameNode = node.isSameNode(org);
+

arg : 比較ノード

仕様書

{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}
{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています

概要

指定された機能が 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>
-

仕様

DOM Level 2 Core: isSupported

Gecko に関する注記

Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に true を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。

diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md new file mode 100644 index 0000000000..3b25dc254b --- /dev/null +++ b/files/ja/web/api/node/issupported/index.md @@ -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>
+

仕様

DOM Level 2 Core: isSupported

Gecko に関する注記

Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に true を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。

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

- -

概要

- -

指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (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"
-

- -

仕様書

- -

DOM Level 2 Core: Node.normalize

- -

概要

+ +

指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (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"
+

+ +

仕様書

+ +

DOM Level 2 Core: Node.normalize

+ +

構文

- -

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

- -

child は DOM から取り除く、子ノードです。
node は child の親ノードです。
oldChild は取り除かれた子ノードへの参照を保持します。 oldChild === child です。

- -

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

- -

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

- -

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

- -

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

- -

-
child が実際に element の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。
- -
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
-
-
child がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。
-
- Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
-

- -

例

- -

<!-- 対象とする 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);
-}
-

- -

仕様書

- -

ブラウザーの対応

- -

構文

+ +

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

+ +

child は DOM から取り除く、子ノードです。
node は child の親ノードです。
oldChild は取り除かれた子ノードへの参照を保持します。 oldChild === child です。

+ +

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

+ +

+
child が実際に element の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。
+ +
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
+
+
child がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。
+
+ Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
+

+ +

例

+ +

<!-- 対象とする 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);
+}
+

+ +

仕様書

+ +

ブラウザーの対応

+ +

構文

- -

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

- -

newChild : oldChild を置き換える新しいノード（既存のノードは先に取り除かれます）
oldChild : 置き換えられる既存ノード
replacedNode : 置き換えられたノード（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>
-

- -

仕様書

- -

ブラウザ実装状況

- -

構文

+ +

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

+ +

newChild : oldChild を置き換える新しいノード（既存のノードは先に取り除かれます）
oldChild : 置き換えられる既存ノード
replacedNode : 置き換えられたノード（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>
+

+ +

仕様書

+ +

ブラウザ実装状況

+ +

構文

+> **Note:** このメソッドとは異なり、 {{domxref("Element.append()")}} メソッドは複数の引数や文字列の追加に対応しています。ノードが要素であった場合は、こちらを使用することができます。 -

var aChild = element.appendChild(aChild);

+`appendChild()` は子要素を返すので、メソッドチェーンは動作しません。 -

引数

+```js +let aBlock = document.createElement('block').appendChild( document.createElement('b') ); +``` -

aChild

+`aBlock` に `` を追加するだけですが、 `block` に対して複数の `appendChild` を連鎖させるなど、それ以外の操作を連鎖せることはできません。 -

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

+## 構文 -

戻り値

+```js +appendChild(aChild); +``` -

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

+### 引数 -

注意

+- `aChild` + - : 指定された親ノードに追加するノード（ふつうは要素）。 -

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

+### 返値 -

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

+{{domxref("Node")}} で追加された子ノード (`aChild`) を返します。 +ただし、 `aChild` が {{domxref("DocumentFragment")}} であった場合は、空の {{domxref("DocumentFragment")}} を返します。 -

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

+### 例外 -

例

+- `HierarchyRequestError` {{domxref("DOMException")}} + - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。 + - `aChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。 + - `aChild` を挿入すると循環参照になる場合。すなわち `aChild` がこのノードの祖先である場合。 + - `aChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。 + - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。 + - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。 + - このノードの親が {{domxref("Document")}} で `aChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。 + -`aChild` を挿入すると {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。 -

// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。
-var p = document.createElement("p");
+## 例
+
+```js
+// 新しい段落要素を作成し、文書の body の末尾に追加します。
+let 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')}}	初期定義。

- -

ブラウザー実装状況

- -

概要

+**`cloneNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、このメソッドが呼び出されたノードの複製を返します。 +引数でノードに含まれるサブツリーを一緒に複製するかどうかを制御できます。 -

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

+ノードを複製すると、固有（インライン）のリスナーを含む、ノードのすべての属性とその値が複製されます。 [`addEventListener()`](/ja/docs/Web/API/EventTarget/addEventListener) を使って追加されたイベントリスナーや、要素のプロパティに代入されたイベントリスナー（例: `node.onclick = someFunction`）は複製されません。さらに、 {{HTMLElement("canvas")}} 要素では、描画された画像は複製されません。 -

構文

+> **Warning:** `cloneNode()` を使用すると、文書内で要素の ID が重複する可能性があります。 +> +> 元のノードに `id` 属性があり、複製を同じ文書に配置する場合は、複製の ID が重複しないように変更してください。 +> +> また、 `name` 属性も重複した名前を使わない場面では、変更する必要があるかもしれません。 -

var dupNode = node.cloneNode(deep);
-

+**異なる**文書にノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。 -

node: 複製するノード
dupNode: 新しく生成される node の複製
deep {{optional_inline}}: node の子孫ノードも複製する場合は true 、 node のみを複製する場合は false -
-
注記: DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 deep は省略可能な引数です。省略された場合、 deep には true が渡され、深い複製を生成します。浅い複製を生成するには、 deep を false にする必要があります。
+## 構文 -
以前のDOMの仕様を実装しているブラウザでは、 deep は必須の引数です。
-
-

+```js +cloneNode(); +cloneNode(deep); +``` -

例

+### 引数 -

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

+- `deep` {{optional_inline}} -

注記

+ - : `true` の場合、ノードとそのサブツリーは、子ノードの {{domxref("Text")}} にあるテキストも含め複製されます。 -

+ `false` の場合、このノードのみが複製されます。 + サブツリーは、そのノードに含まれているテキストも含め、複製されません。 -

+ なお、 `deep` は {{HTMLElement("img")}} や {{HTMLElement("input")}} のような空要素には効果がありません。 -

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

+### 返値 -

+複製された {{domxref("Node")}} を返します。 +複製されたノードには、文書に所属する他のノードに {{domxref("Node.appendChild()")}} などを使用して追加されるまで、親ノードがなく、文書にも所属していません。 -

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

+## 例 -

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

+```js +let p = document.getElementById("para1") +let p_prime = p.cloneNode(true) +``` -

ブラウザ実装状況

+## 仕様書 -

+{{Specifications}} -

仕様書

+## ブラウザーの互換性 -

{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}
{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}
DOM4: cloneNode (草案)

+{{Compat}} -- cgit v1.2.3-54-g00ecf From 38a18236aca758a3c29963a8654ab7c5d84dd9ca Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 27 Feb 2022 15:00:03 +0900 Subject: 2021/11/08 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/node/comparedocumentposition/index.md | 173 ++++++++------------ files/ja/web/api/node/contains/index.md | 88 +++++------ files/ja/web/api/node/isdefaultnamespace/index.md | 96 +++++++---- files/ja/web/api/node/isequalnode/index.md | 116 +++++++------- files/ja/web/api/node/issupported/index.md | 87 +++++----- files/ja/web/api/node/removechild/index.md | 175 +++++++++++---------- files/ja/web/api/node/replacechild/index.md | 113 +++++++------ 7 files changed, 429 insertions(+), 419 deletions(-) (limited to 'files/ja/web/api/node') diff --git a/files/ja/web/api/node/comparedocumentposition/index.md b/files/ja/web/api/node/comparedocumentposition/index.md index 5865081c84..346dc65e73 100644 --- a/files/ja/web/api/node/comparedocumentposition/index.md +++ b/files/ja/web/api/node/comparedocumentposition/index.md @@ -1,118 +1,69 @@ --- -title: Node.compareDocumentPosition +title: Node.compareDocumentPosition() slug: Web/API/Node/compareDocumentPosition tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference + - メソッド + - リファレンス +browser-compat: api.Node.compareDocumentPosition translation_of: Web/API/Node/compareDocumentPosition --- -

- -

概要

- -

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

- -

構文

- -

node.compareDocumentPosition( otherNode )
-

- -

パラメーター

- -

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

- -

返り値

- -

注記

- -

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

名称	値
`DOCUMENT_POSITION_DISCONNECTED`	1
`DOCUMENT_POSITION_PRECEDING`	2
`DOCUMENT_POSITION_FOLLOWING`	4
`DOCUMENT_POSITION_CONTAINS`	8
`DOCUMENT_POSITION_CONTAINED_BY`	16
`DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`	32

- -

例

- -

var head = document.getElementsByTagName('head').item(0);
-
-if ( head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWING ) {
-  console.log("head 要素は body 要素より前に記述されています。");
+{{APIRef("DOM")}}
+
+**`compareDocumentPosition()`** は {{domxref("Node")}} インターフェイスのメソッドで、引数のノードの位置を、呼び出されたノードからの相対位置で報告します。
+
+## 構文
+
+```js
+compareDocumentPosition(otherNode);
+```
+
+### 引数
+
+- `otherNode`
+  - : {{domxref("Node")}} で、このノードとの相対位置を報告するノードを指定します。
+
+### 返値
+
+整数値で、 `otherNode` の `node` から見た相対位置を、以下の {{domxref("Node")}} の定数プロパティを組み合わせた[ビットマスク]()で表します。
+
+- `Node.DOCUMENT_POSITION_DISCONNECTED` (`1`)
+  - : 両方のノードが、異なる文書、または同じ文書の異なるツリーにあります。
+- `Node.DOCUMENT_POSITION_PRECEDING` (`2`)
+  - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で前にある（祖先ノード、前にある兄弟ノード、前にある兄弟ノードの子孫ノード、祖先ノードの前にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも前に位置します。
+- `Node.DOCUMENT_POSITION_FOLLOWING` (`4`)
+  - : `otherNode` はこのノードより、両者を含むツリーの[前順深さ優先走査](https://ja.wikipedia.org/wiki/木構造_(データ構造)#深さ優先探索)で後にある（子孫ノード、後にある兄弟ノード、後にある兄弟ノードの子孫ノード、祖先ノードの後にある兄弟ノードなど）か、（接続されていないのであれば）任意だが一貫した順序で、そのノードよりも後に位置します。
+- `Node.DOCUMENT_POSITION_CONTAINS` (`8`)
+  - : `otherNode` はこのノードの祖先ノードです。
+- `Node.DOCUMENT_POSITION_CONTAINED_BY` (`16`)
+  - : `otherNode` はこのノードの子孫ノードです。
+- `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC` (`32`)
+  - : その結果は、任意や実装固有の動作に依存し、移植性は保証されません。
+
+複数の条件に適合する場合、複数のビットが設定されることがあります。例えば、 `otherNode` が文書中でより先にあり、**_かつ_** `compareDocumentPosition()` が呼び出されたノードを含んでいれば、 `DOCUMENT_POSITION_CONTAINS` と `DOCUMENT_POSITION_PRECEDING` の両ビットが設定され、 `10` (`0x0A`) という値になります。
+
+## 例
+
+```js
+const head = document.head;
+const body = document.body;
+
+if (head.compareDocumentPosition(body) & Node.DOCUMENT_POSITION_FOLLOWING) {
+  console.log('正しい形式の文書です');
 } else {
-  console.log("head 要素は body 要素の前に配置しなくてはなりません。");
+  console.error(' が  の前にありません');
 }
-

- -

仕様

- - - - - - - - - - - - - - - - - - - - - -

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

- -

構文

+> **Note:** ノードは自分自身に**含まれます**。 -

node.contains( otherNode )
-

+## 構文 -

例

+```js +contains(otherNode); +``` -

+### 引数 -

function isInPage(node) {
+- `otherNode`
+  - : 検査する {{domxref("Node")}} です。
+    > **Note:** `otherNode` は省略できませんが、 `null` に設定することはできます。
+
+### 返値
+
+論理値で、 `true` は `otherNode` がそのノードに含まれていることを表します。
+そうでなければ `false` になります。
+
+`otherNode` 引数が `null` であれば、 `contains()` は常に `false` になります。
+
+## 例
+
+この関数は、ある要素がそのページの body 要素に含まれるかどうかを検査するものです。 `contains` は包括的かつ決定的であるため、 body がそれ自身を含むかどうかは `isInPage` の意図するところではないため、明示的に `false` を返します。
+
+```js
+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

- -

ブラウザ実装状況

- -

概要

構文

result = node.isDefaultNamespace(namespaceURI)
-

result : 戻り値は真偽値 (true / false) となる
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

仕様書

概要

+**`isEqualNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 2 つのノードが等しいかどうかを検査します。 +2 つのノードは、同じ型、定義特性（要素の場合、 ID や子ノードの数など）、その属性が一致している場合、等しいといえます。データで一致が求められる具体的な点は、ノードの型によって異なります。 -

+## 構文 -

構文

+```js +isEqualNode(otherNode); +``` -

var isEqualNode = node.isEqualNode(otherNode);
-

+### 引数 -

otherNode : 同値性を比較する対象の {{domxref("Node")}}

+- `otherNode` + - : 比較対象となる {{domxref("Node")}} です。 + > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。 -

例

+### 返値 -

+論理値で、 2 つのノードが等しければ `true`、そうでなければ `false` です。 +`otherNode` が `null` であった場合、 `isEqualNode()` は常に false を返します。 -

HTML

+## 例 -

<div>最初の要素です。</div>
-<div>2番目の要素です。</div>
-<div>最初の要素です。</div>
+この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isEqualNode()` を使って JavaScript でノードを比較した結果は以下のようになります。
 
-<p id="output"></p>

+### HTML -

CSS

+```html +

最初の要素です。

2 番目の要素です。

最初の要素です。

#output {
-  width: 440px;
-  border: 2px solid black;
-  border-radius: 5px;
-  padding: 10px;
-  margin-top: 20px;
-  display: block;
-}

+``` -

JavaScript

+```css hidden +#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +} +``` -

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/>";

+### JavaScript -

Results

- -

+```js +let output = document.getElementById("output"); +let divList = document.getElementsByTagName("div"); -

仕様

+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isEqualNode(divList[0]) + "
"; +output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isEqualNode(divList[1]) + "
"; +output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isEqualNode(divList[2]) + "
"; +``` +### 結果 - - - - - - - - - - - - - - - -

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

+{{ EmbedLiveSample('Example', "100%", "210") }} -

ブラウザー互換性

+## 仕様書 +{{Specifications}} +## ブラウザーの互換性 -

+{{Compat}} -

参考

+## 関連情報 -

{{domxref("Node.isSameNode()")}}

+- {{domxref("Node.isSameNode()")}} diff --git a/files/ja/web/api/node/issupported/index.md b/files/ja/web/api/node/issupported/index.md index 3b25dc254b..db0b3935ee 100644 --- a/files/ja/web/api/node/issupported/index.md +++ b/files/ja/web/api/node/issupported/index.md @@ -1,44 +1,53 @@ --- -title: Node.isSupported +title: Node.isSupported() slug: Web/API/Node/isSupported tags: - - DOM - - DOM Element Methods - - Gecko - - Gecko DOM Reference + - メソッド + - 非推奨 + - リファレンス +browser-compat: api.Node.isSupported 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>
-

仕様

DOM Level 2 Core: isSupported

Gecko に関する注記

Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に true を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。

+{{APIRef("DOM")}}{{deprecated_header}} + +**`isSupported()`** は {{domxref("Node")}} インターフェイスのメソッドで、この DOM の実装が指定された機能を実装しており、このノードがこの機能に対応しているかどうかを検査した結果を論理値で返します。 + +## 構文 + +```js +isSupported(feature, version); +``` + +### 引数 + +- `feature` + - : 文字列で、検査する機能の名前を指定します。 + これは [DOMImplementation](/ja/docs/Web/API/Document/implementation) の `hasFeature` メソッドに渡すものと同じ名前です。有効な値については、 [Conformance の章](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance)にあります。 +- `version` + - : 文字列で、検査する機能のバージョン番号を指定します。 + DOM Level 2 第 1 版では、これは `2.0` という文字列です。このバージョンが指定されなかった場合、何れかの版のメソッドが対応していれば、このメソッドは true を返します。 + +## 例 + +```html +

+ + +``` + +## 仕様書 + +この機能は仕様書に含まれていません。標準化路線から外れました。 + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Node.isEqualNode()")}} diff --git a/files/ja/web/api/node/removechild/index.md b/files/ja/web/api/node/removechild/index.md index ff64604414..335eea5b85 100644 --- a/files/ja/web/api/node/removechild/index.md +++ b/files/ja/web/api/node/removechild/index.md @@ -1,124 +1,125 @@ --- -title: Node.removeChild +title: Node.removeChild() slug: Web/API/Node/removeChild tags: - - DOM - - Gecko - - Node + - メソッド + - リファレンス +browser-compat: api.Node.removeChild translation_of: Web/API/Node/removeChild --- -

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

+{{APIRef("DOM")}} -

構文

+**`removeChild()`** は {{domxref("Node")}} インターフェイスのメソッドで、子ノードを DOM から取り除き、取り除いたノードを返します。 -

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

+> **Note:** 取り除かれた子ノードへの参照が保持されている限り、子ノードはメモリー内に残りますが、 DOM の一部ではなくなります。 +> 後のコードで再利用することができます。 +> +> `removeChild()` の返値が保持されず、他の参照もなくなった場合は、まもなくメモリーから[自動的に削除](/en-US/docs/Web/JavaScript/Memory_Management)されます。 -

child は DOM から取り除く、子ノードです。
node は child の親ノードです。
oldChild は取り除かれた子ノードへの参照を保持します。 oldChild === child です。

+{{domxref("Node.cloneNode()")}} とは異なり、返値は関連付けられた {{domxref("EventListener")}} オブジェクトを保持します。 -

+## 構文 -

+```js +removeChild(child); +``` -

+### 引数 -

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

+- `child` + - : {{domxref("Node")}} で、 DOM から取り除きたい子ノードを指定します。 -

-
child が実際に element の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。
+### 例外 -
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
-
-
child がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。
-
- Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
-

+- `NotFoundError` {{domxref("DOMException")}} + - : `child` がこのノードの子ではない場合に発生します。 +- {{jsxref("TypeError")}} + - : `child` が `null` であった場合に発生します。 -

例

+## 例 -

<!-- 対象とする HTML のコード -->
-<div id="top" > </div>
+### 単純な例
 
-<script type="text/javascript">
-      var top = document.getElementById("top");
-      var nested = document.getElementById("nested");
+この HTML を使います。
 
-      var garbage = top.removeChild(nested);    //Test Case 2: the method throws the exception (2)
+```html
+
+  
+
+```
 
-</script>
+親ノードが分かる場合に、指定された要素を取り除きます。
 
-<!--Sample HTML code-->
-<div id="top">
- <div id="nested"></div>
-</div>
+```js
+let d = document.getElementById("top");
+let d_nested = document.getElementById("nested");
+let throwawayNode = d.removeChild(d_nested);
+```
 
-<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
+```js
+let node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+```
 
-      // ......
-      garbage = top.removeChild(nested);   // Test Case 1: the method in the second call here, throws the exception (1)
+ある要素からすべての子を削除します。
 
-</script>
+```js
+let element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+```
 
-

+### TypeError が発生する例 -

<!--Sample HTML code-->
+```html
+
+ 
+```
 
-<div id="top">
-  <div id="nested"></div>
-</div>
-

+```js +let top = document.getElementById("top"); +let nested = document.getElementById("nested"); -

// 親ノードから指定した子要素を除去
-var d = document.getElementById("top");
-var d_nested = document.getElementById("nested");
-var throwawayNode = d.removeChild(d_nested);
-

+// TypeError が発生 +let garbage = top.removeChild(nested); +``` -

// 親要素が不明、不定の場合の方法
-var node = document.getElementById("nested");
-if (node.parentNode) {
-  node.parentNode.removeChild(node);
-}
-

+### NotFoundError が発生する例 -

// 要素の全ての子を除去
-var element = document.getElementById("top");
-while (element.firstChild) {
-  element.removeChild(element.firstChild);
-}
-

+```html + +

+``` + +```js +let top = document.getElementById("top"); +let nested = document.getElementById("nested"); + +// 最初の呼び出しでは正しくノードを取り除く +let garbage = top.removeChild(nested); -

仕様書

+// NotFoundError が発生 +garbage = top.removeChild(nested); +``` -

+## 仕様書 -

ブラウザーの対応

+{{Specifications}} -

+## ブラウザーの互換性 -

構文

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

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

+## 構文 -

newChild : oldChild を置き換える新しいノード（既存のノードは先に取り除かれます）
oldChild : 置き換えられる既存ノード
replacedNode : 置き換えられたノード（oldChild と同じノード）

+```js +replaceChild(newChild, oldChild); +``` -

例

+### 引数 -

// <div>
-//  <span id="childSpan">foo bar</span>
-// </div>
+- `newChild`
+  - : `oldChild` を置き換える新しいノードです。
+    > **Warning:** 新しいノードが既に DOM のどこか別なところにある場合は、まずその位置から取り除かれます。
+- `oldChild`
+  - : 置き換えられる子ノードです。
+
+> **Note:** 引数の順序で、*新しい*ものの前に*古い*ものが来るのは異例です。
+[`Element.replaceWith()`](/ja/docs/Web/API/Element/replaceWith) は、要素であるノードのみに適用されるものですが、読んだり使用したりしやすいかもしれません。
+
+### 返値
+
+置き換えられた {{domxref("Node")}} です。これは `oldChild` と同じノードです。
+
+### 例外
+
+- `HierarchyRequestError` {{domxref("DOMException")}}
+  - : DOM ツリーの制約に違反した場合に発生します。すなわち、以下のいずれかが発生する場合です。
+    - `oldChild` の親が {{domxref("Document")}}, {{domxref("DocumentFragment")}}, {{domxref("Element")}} のいずれにもならない場合。
+    - `oldChild` を `newChild` で置き換えると循環参照になる場合。すなわち `newChild` がこのノードの祖先である場合。
+    - `newChild` が {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} のいずれでもない場合。
+    - 現在のノードが {{domxref("Text")}} であり、親ノードが {{domxref("Document")}} になる場合。
+    - 現在のノードが {{domxref("DocumentType")}} であり、その親が {{domxref("Document")}} にならない場合。 _doctype_ は常に _document_ の直下になければならないからです。
+    - このノードの親が {{domxref("Document")}} で `newChild` が {{domxref("DocumentFragment")}} であり、複数の {{domxref("Element")}} の子、または {{domxref("Text")}} の子がある場合。
+    - `oldChild` を `newChild` で置き換えると、 {{domxref("Document")}} の子の {{domxref("Element")}} が複数になる場合。
+    - `oldChild` を `newChild` で置き換えると、 {{domxref("Element")}} ノードが {{domxref("DocumentType")}} の前になる場合。
+- `NotFoundError` {{domxref("DOMException")}}
+  - : `oldChild` の親ノードが現在のノードではない場合に発生します。
+
+## 例
+
+```js
+// 前提:
+// 
+//  foo bar
+// 
 
 // ID も属性も内容も持たない空要素を生成
-var sp1 = document.createElement("span");
+const sp1 = document.createElement("span");
 
 // 生成したノードに id 属性 'newSpan' を付与
-sp1.setAttribute("id", "newSpan");
+sp1.id = "newSpan";
 
-// テキストノードを生成
-var sp1_content = document.createTextNode("新しい span 要素");
+// 新しい要素にいくらかの内容を作成
+const sp1_content = document.createTextNode("新しい置換 span 要素");
 
-// 生成したテキストノードを先の空要素の子ノードとして配置
+// その内容を新しい要素に適用
 sp1.appendChild(sp1_content);
 
-// 置換に先んじ、参照を代入
-var sp2 = document.getElementById("childSpan"); // 既存の置換対象ノード
-var parentDiv = sp2.parentNode; // 置換対象ノードの親要素
+// 置き換えられる既存のノードの参照を作る
+const sp2 = document.getElementById("childSpan");
+const parentDiv = sp2.parentNode;
 
-// 既存ノード "sp2" を 生成済の新しい span 要素 "sp1" と置換
+// 既存のノード sp2 を新しい span 要素 sp1 で置換
 parentDiv.replaceChild(sp1, sp2);
 
+// 結果:
+// 
+//   新しい置換 span 要素
+// 
+```
 
-// 上記コード実行後のノードは以下の様になります:
-// <div>
-//   <span id="newSpan">新しい span 要素</span>
-// </div>
-

- -

仕様書

+## 仕様書 -

+{{Specifications}} -

ブラウザ実装状況

+## ブラウザーの互換性 -

+{{Compat}} -

概要

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

構文

node.hasChildNodes()

例

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

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

仕様書

hasChildNodes

構文

+## 構文 -

let insertedNode = parentNode.insertBefore(newNode, referenceNode)
-

+```js +insertBefore(newNode, referenceNode); +``` -

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

+### 引数 -

+- `newNode` + - : 挿入するノードです。 +- `referenceNode` + - : `newNode` が挿入される位置の前にあるノードです。このノードが `null` である場合は、 `newNode` はこのノードの子ノードの末尾に挿入されます。 + > **Note:** `referenceNode` は省略可能な引数では**ありません**。 + > 明示的に {{domxref("Node")}} または `null` を渡す必要があります。 + > 渡さなかった場合や無効な値を渡した場合の[動作](https://code.google.com/p/chromium/issues/detail?id=419780)は、ブラウザーのバージョンによって[異なる](https://bugzilla.mozilla.org/show_bug.cgi?id=119489)可能性があります。 + +## 返値 -

返値

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

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

+### 例外 -

例

+挿入前の検証 -

例 1

+## 例 -

<div id="parentElement">
-   <span id="childElement">foo bar</span>
-</div>
+### 例 1
+
+```html
+
+   foo bar
+
 
-<script>
+
+```
 
-例 2
+### 例 2
 
-<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
+```html
+
+  foo bar
+
 
-<script>
-// 新しい只の <span> 要素を作成
+
+```
+
+> **Note:** `insertAfter()` メソッドはありません。
+> これは `insertBefore` メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。
+>
+> 前の例では、 `sp1` は以下のようにして `sp2` の後に挿入することができます。
+>
+> ```js
+> parentDiv.insertBefore(sp1, sp2.nextSibling)
+> ```
+>
+> `sp2` に次の兄弟ノードがない場合、これが最後の子ノードです。 — `sp2.nextSibling` は `null` を返し、 `sp1` は子ノードリストの末尾（`sp2` の直後）に挿入されます。
+
+### 例 3
+
+要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。
+
+```js
+// 親ノードを取得
+let parentElement = document.getElementById('parentElement')
+// 親ノードの最初の子ノードを取得
+let theFirstChild = parentElement.firstChild
 
-
-メモ: insertAfter() メソッドはありません。これは insertBefore メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。
-
+// 新しい要素を取得
+let newElement = document.createElement("div")
 
-前の例では、 sp1 は以下のようにして sp2 の後に挿入することができます。
+// 最初の子ノードの前に新しい要素を挿入
+parentElement.insertBefore(newElement, theFirstChild)
+```
 
-parentDiv.insertBefore(sp1, sp2.nextSibling)
+要素に最初の子ノードがない場合、 `firstChild` は `null` になります。その場合も、要素は親ノードの最後の子ノードの後に追加されます。
 
-sp2 に次の兄弟がない場合、これは最後の子ノードです。 — sp2.nextSibling は null を返し、 sp1 は子ノードリストの末尾 (sp2 の直後) に挿入されます。
+親要素に最初の子ノードがない場合は、最後の子ノードもありません。結果的に、新しく挿入された要素は**唯一の**要素になります。
 
-例 3
+## 仕様書
 
-要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。
+{{Specifications}}
 
-// 親ノードを取得
-let parentElement = document.getElementById('parentElement')
-// 親の最初の子を取得
-let theFirstChild = parentElement.firstChild
+## ブラウザーの互換性
 
-// 新しい要素を取得
-let newElement = document.createElement("div")
+{{Compat}}
 
-// 最初の子の前に新しい要素を挿入
-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")}}
-
-関連情報
-
-
- {{domxref("Node.removeChild()")}}
- {{domxref("Node.replaceChild()")}}
- {{domxref("Node.appendChild()")}}
- {{domxref("Node.hasChildNodes()")}}
- {{domxref("Element.insertAdjacentElement()")}}
- {{domxref("ParentNode.prepend()")}}
-
+## 関連情報
+
+- {{domxref("Node.removeChild()")}}
+- {{domxref("Node.replaceChild()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Node.hasChildNodes()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("Element.prepend()")}}
+- {{domxref("Element.before()")}}
+- {{domxref("Element.after()")}}
-- 
cgit v1.2.3-54-g00ecf


From dd4c3fd91ffcfdfbbe292e9c8fe826ae76cdbfed Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 27 Feb 2022 17:17:47 +0900
Subject: 2022/02/09 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/issamenode/index.md | 112 +++++++++++++++++++++---------
 1 file changed, 78 insertions(+), 34 deletions(-)

(limited to 'files/ja/web/api/node')

diff --git a/files/ja/web/api/node/issamenode/index.md b/files/ja/web/api/node/issamenode/index.md
index f94668cfd5..ffd47f8bf3 100644
--- a/files/ja/web/api/node/issamenode/index.md
+++ b/files/ja/web/api/node/issamenode/index.md
@@ -1,39 +1,83 @@
 ---
-title: Node.isSameNode
+title: Node.isSameNode()
 slug: Web/API/Node/isSameNode
 tags:
-  - DOM
-  - Gecko DOM Reference
-  - Node
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.isSameNode
 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);
-
-
- arg : 比較ノード
-
-仕様書
-
- {{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}
- {{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています
-
-関連情報
-
- {{domxref("Node.isEqualNode")}}
-
+{{APIRef("DOM")}}
+
+**`isSameNode()`** は {{domxref("Node")}} インターフェイスのメソッドで、 [`===` 厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)の古い別名です。
+すなわち、 2 つのノードが全く同じであるかどうか（言い換えれば、同じオブジェクトを指しているかどうか）を検査します。
+
+> **Note:** `isSameNode()` を使用する必要はありません。 `===` 厳密等価演算子を使用してください。
+
+## 構文
+
+```js
+isSameNode(otherNode);
+```
+
+### 引数
+
+- `otherNode`
+  - : 検査対象となる {{domxref("Node")}} です。
+    > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+
+### 返値
+
+論理値で、両ノードが厳密に等しい場合は `true`、そうでなければ `false` です。
+
+## 例
+
+この例では、 3 つの {{HTMLElement("div")}} ブロックを作成しています。 1 つ目と 3 つ目は内容と属性が同じであり、 2 つ目は異なっています。このとき、`isSameNode()` を使って JavaScript でノードを比較した結果は以下のようになります。
+
+### HTML
+
+```html
+最初の要素です。
+2 番目の要素です。
+最初の要素です。
+
+
+```
+
+```css hidden
+#output {
+  width: 440px;
+  border: 2px solid black;
+  border-radius: 5px;
+  padding: 10px;
+  margin-top: 20px;
+  display: block;
+}
+```
+
+### JavaScript
+
+```js
+let output = document.getElementById("output");
+let divList  = document.getElementsByTagName("div");
+
+output.innerHTML += "div 0 と div 0 は同じか: " + divList[0].isSameNode(divList[0]) + "
";
+output.innerHTML += "div 0 と div 1 は同じか: " + divList[0].isSameNode(divList[1]) + "
";
+output.innerHTML += "div 0 と div 2 は同じか: " + divList[0].isSameNode(divList[2]) + "
";
+```
+
+### 結果
+
+{{ EmbedLiveSample('Example', "100%", "205") }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Node.isEqualNode()")}}
-- 
cgit v1.2.3-54-g00ecf


From dd0a249a5aca733d09f33a10b32e20e435a99da9 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Sun, 27 Feb 2022 17:35:44 +0900
Subject: 2022/01/23 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/normalize/index.md | 79 +++++++++++++++++++++-----------
 1 file changed, 52 insertions(+), 27 deletions(-)

(limited to 'files/ja/web/api/node')

diff --git a/files/ja/web/api/node/normalize/index.md b/files/ja/web/api/node/normalize/index.md
index 83026ac378..7432a8f979 100644
--- a/files/ja/web/api/node/normalize/index.md
+++ b/files/ja/web/api/node/normalize/index.md
@@ -1,48 +1,73 @@
 ---
-title: Node.normalize
+title: Node.normalize()
 slug: Web/API/Node/normalize
 tags:
-  - DOM
-  - Gecko
-  - Node
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.normalize
 translation_of: Web/API/Node/normalize
 ---
-{{ApiRef}}
+{{APIRef("DOM")}}
 
-概要
+**`normalize()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定されたノードとその下のツリーを*正規化された*形にします。
+正規化されたサブツリーでは、サブツリー内に空のテキストノードがなくなり、隣り合うテキストノードがなくなります。
 
-指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。
+## 構文
 
-構文
+```js
+normalize();
+```
 
-element.normalize();
-
+### 引数
 
-例
+なし。
 
-var wrapper = document.createElement("div");
+### 返値
+
+なし。
+
+## 例
+
+```html
+
+```
+
+```js
+let 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
+let node = wrapper.firstChild;
+let result = "正規化前:
";
+while (node) {
+  result += " " + node.nodeName + ": " + node.nodeValue + "
";
+  node = node.nextSibling;
+}
+
+wrapper.normalize();
+
+node = wrapper.firstChild;
+result += "

正規化後:
";
+while (node) {
+  result += " " + node.nodeName + ": " + node.nodeValue + "
";
+  node = node.nextSibling;
+}
+
+const output = document.getElementById("result");
+output.innerHTML = result;
+```
+
+{{ EmbedLiveSample("Example", "100%", "170")}}
 
-wrapper.normalize(); // 正規化
+## 仕様書
 
-// 正規化後の wrapper の子ノード数は 1 となっています。 wrapper.childNodes.length === 1
-// 挿入処理の為に冗長化したノードはひとつに纏められています。 wrapper.childNodes[0].textContent === "Part 1 Part 2"
-
+{{Specifications}}
 
-仕様書
+## ブラウザーの互換性
 
-
- DOM Level 2 Core: Node.normalize
-
+{{Compat}}
 
-関連情報
+## 関連情報
 
-
- Text.splitText
-
+- 逆の操作である {{domxref("Text.splitText()")}}
-- 
cgit v1.2.3-54-g00ecf


From 0e16fb2efa27c368c2b92b40773982ce3a335aff Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO 
Date: Mon, 28 Feb 2022 02:22:47 +0900
Subject: 2021/11/08 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/node/lookupprefix/index.md | 77 +++++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 files/ja/web/api/node/lookupprefix/index.md

(limited to 'files/ja/web/api/node')

diff --git a/files/ja/web/api/node/lookupprefix/index.md b/files/ja/web/api/node/lookupprefix/index.md
new file mode 100644
index 0000000000..30dcc549ac
--- /dev/null
+++ b/files/ja/web/api/node/lookupprefix/index.md
@@ -0,0 +1,77 @@
+---
+title: Node.lookupPrefix()
+slug: Web/API/Node/lookupPrefix
+tags:
+  - メソッド
+  - リファレンス
+browser-compat: api.Node.lookupPrefix
+translation_of: Web/API/Node/lookupPrefix
+---
+{{APIRef("DOM")}}
+
+**`lookupPrefix()`** は {{domxref("Node")}} インターフェイスのメソッドで、指定された名前空間 URI に対応する接頭辞があれば、それを含む文字列を返します。ない場合は `null` を返します。
+複数の接頭辞の可能性があれば、最初の接頭辞を返します。
+
+## 構文
+
+```js
+lookupPrefix(namespace);
+```
+
+### 引数
+
+- `namespace`
+  - : 接頭辞を検索するための名前空間の入った文字列です。
+    > **Note:** この引数は省略可能ではありませんが、 `null` に設定することはできます。
+
+### 返値
+
+対応する接頭辞の入った文字列です。見つからなかった場合は `null` になります。
+`namespace` が null または空文字列であった場合、 `lookupPrefix()` は `null` を返します。
+
+このノードが {{domxref("DocumentType")}} または {{domxref("DocumentFragment")}} であった場合は、　`lookupPrefix()` は常に `null` を返します。
+
+## 例
+
+```html
+Prefix for http://www.w3.org/2000/svg on <output>: 未検査

+Prefix for http://www.w3.org/XML/1998/namespace on <output>: 未検査

+Prefix for http://www.w3.org/TR/html4/ on <output>: 未検査

+Prefix for https://www.w3.org/1999/xlink on <output>: 未検査

+Prefix for http://www.w3.org/2000/svg on <svg>: 未検査

+Prefix for https://www.w3.org/1999/xlink on <svg>: 未検査

+Prefix for http://www.w3.org/XML/1998/namespace on <svg>: 未検査

+
+
+```
+
+```js
+const button = document.getElementsByTagName('button')[0];
+button.addEventListener("click", function () {
+  const aHtmlElt = document.getElementsByTagName('output')[0];
+  const aSvgElt = document.getElementsByTagName('svg')[0];
+
+  const result = document.getElementsByTagName('output');
+  result[0].value = aHtmlElt.lookupPrefix("http://www.w3.org/2000/svg"); // true
+  result[1].value = aHtmlElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false
+  result[2].value = aHtmlElt.lookupPrefix("http://www.w3.org/TR/html4/"); // true
+  result[3].value = aHtmlElt.lookupPrefix("https://www.w3.org/1999/xlink"); // false
+  result[4].value = aSvgElt.lookupPrefix("http://www.w3.org/2000/svg"); // true
+  result[5].value = aSvgElt.lookupPrefix("https://www.w3.org/1999/xlink"); // true
+  result[6].value = aSvgElt.lookupPrefix("http://www.w3.org/XML/1998/namespace"); // false
+});
+```
+
+{{ EmbedLiveSample('Example','100%',190) }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [http://www.w3.org/TR/DOM-Level-3-Cor...amespacePrefix](https://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-lookupNamespacePrefix)
-- 
cgit v1.2.3-54-g00ecf