diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/node | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/api/node')
33 files changed, 3049 insertions, 0 deletions
diff --git a/files/ja/web/api/node/appendchild/index.html b/files/ja/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..3242491906 --- /dev/null +++ b/files/ja/web/api/node/appendchild/index.html @@ -0,0 +1,97 @@ +--- +title: Node.appendChild +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Node/appendChild +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Node.appendChild()</strong></code> メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。</p> + +<p>これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。{{domxref("Node.cloneNode()")}} は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。<code>cloneNode</code> で作成したコピーは自動的に同期を保たないことに注意してください。</p> + +<p>このメソッドでは、異なるドキュメント間でノードを移動することはできません。異なるドキュメントからノードを末尾に追加したい場合は、{{domxref("document.importNode()")}} メソッドを使用する必要があります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>aChild</em> = <em>element</em>.appendChild(<em>aChild</em>);</pre> + +<h3 id="引数">引数</h3> + +<h4 id="aChild">aChild</h4> + +<p>親ノードに追加する子ノード(要素)</p> + +<h3 id="戻り値">戻り値</h3> + +<p>追加した子ノードです。ただし、{{domxref("DocumentFragment")}}を引数にした場合は、空の{{domxref("DocumentFragment")}}が戻ります。</p> + +<h2 id="Notes" name="Notes">注意</h2> + +<p><code>appendChild()</code> が子要素を返すため、メソッドチェーンが期待通りに動きません。:</p> + +<pre class="brush: js"><code>var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));</code></pre> + +<p><code>aBlock</code> に <code><b></b></code> を与えただけでは期待通りに動きません。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">// 新しい段落要素を作成し、ドキュメントの body の最後に追加します。 +var p = document.createElement("p"); +document.body.appendChild(p); +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>{{SpecName("DOM3 Core")}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>{{SpecName("DOM2 Core")}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>{{SpecName("DOM1")}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初期定義。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + +<p>{{Compat("api.Node.appendChild")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> +</ul> diff --git a/files/ja/web/api/node/baseuriobject/index.html b/files/ja/web/api/node/baseuriobject/index.html new file mode 100644 index 0000000000..260c0b67d5 --- /dev/null +++ b/files/ja/web/api/node/baseuriobject/index.html @@ -0,0 +1,32 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +tags: + - DOM + - DOM 3 + - Gecko + - Node +translation_of: Web/API/Node +--- +<div>{{ApiRef}} {{Fx_minversion_header("3")}} {{Non-standard_header}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>baseURIObject</code> は、文書の基底 URL (base URL) を示す {{Interface("nsIURI")}} オブジェクトを返します。</p> + +<p>このプロパティは、HTML 、 XUL、 SVG、 MathML 等のノード全てに存在します。但し、このプロパティの使用を試みるスクリプトが UniversalXPConnect 特権を持つ場合に限ります。</p> + +<p>基底 URL の詳細については {{domxref("Node.baseURI")}} の頁をご覧下さい。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>uriObj</var> = element.baseURIObject +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>このプロパティは読取専用です。書込を試みた場合、例外がスローされます。また、このプロパティには、特権を持つコードからのみアクセス可能です。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<p>標準仕様書には含まれません。</p> diff --git a/files/ja/web/api/node/childnodes/index.html b/files/ja/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..27c39be8d3 --- /dev/null +++ b/files/ja/web/api/node/childnodes/index.html @@ -0,0 +1,103 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +tags: + - API + - DOM + - DOMリファレンス + - プロパティ + - リファレンス +translation_of: Web/API/Node/childNodes +--- +<p>{{ ApiRef() }}</p> + +<p><code><strong>Node.childNodes</strong></code>読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子{{domxref("Node","nodes")}}の現在の{{domxref("NodeList")}}を返します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox">let <var>nodeList</var> = <var>elementNodeReference</var>.childNodes; +</pre> + +<h2 id=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4" name=".E6.9B.B8.E5.BC.8F.E3.81.A8.E5.80.A4">例</h2> + +<h3 id="簡単な使用方法">簡単な使用方法</h3> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// 変数pargは<p>要素へのオブジェクト参照です</span> + +<span class="comment token">// まず、pargが子ノードを持っているかをチェックします</span> +<span class="keyword token">if</span> <span class="punctuation token">(</span>parg<span class="punctuation token">.</span><span class="function token">hasChildNodes</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span> + + <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">let</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> children<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// for文を使って各ノードにchildren[i]としてアクセスします + // 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します</span> + <span class="punctuation token">}</span> +<span class="punctuation token">}</span></code></pre> + +<h3 id="ノードから全ての子を削除する">ノードから全ての子を削除する</h3> + +<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// これは一例ですが、この方法でノードからすべての子ノードを削除することができます</span> +<span class="comment token">// let box = document.getElementById(/**/)</span>; + +<span class="keyword token">while</span> <span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span> <span class="punctuation token">{ + // NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します</span> + box<span class="punctuation token">.</span><span class="function token">removeChild</span><span class="punctuation token">(</span>box<span class="punctuation token">.</span>firstChild<span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<h2 id="注記">注記</h2> + +<p>ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえば<code>elementNodeReference.childNodes[1].nodeName</code> で名前を取得) を使用します。<br> + <br> + <code>document</code>オブジェクト自体には Doctype 宣言と root 要素 の2つの子があり、通常は<code>documentElement</code>と呼ばれます。 （(X)HTML文書ではこれが<code>HTML</code>要素です）<br> + <br> + <code>childNodes</code>にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>変更なし</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換表は構造化データから生成されます。データに貢献したい場合は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックし、プルリクエストを送信してください。</div> + +<p>{{Compat("api.Node.childNodes")}}</p> + +<h2 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">関連情報</h2> + +<ul> + <li>{{ domxref("Node.firstChild") }}</li> + <li>{{ domxref("Node.lastChild") }}</li> + <li>{{ domxref("Node.nextSibling") }}</li> + <li>{{ domxref("Node.previousSibling") }}</li> + <li>{{ domxref("Element.children") }}</li> +</ul> diff --git a/files/ja/web/api/node/clonenode/index.html b/files/ja/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..fe3f8837a9 --- /dev/null +++ b/files/ja/web/api/node/clonenode/index.html @@ -0,0 +1,129 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +translation_of: Web/API/Node/cloneNode +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>現在のノードの複製を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>dupNode</var> = <var>node</var>.cloneNode(<var>deep</var>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>複製するノード</dd> + <dt><code>dupNode</code></dt> + <dd>新しく生成される <code>node</code> の複製</dd> + <dt><code>deep</code> {{optional_inline}}</dt> + <dd><code>node</code> の子孫ノードも複製する場合は <code>true</code> 、 <code>node</code> のみを複製する場合は <code>false</code> + <div class="note"> + <p><strong>注記:</strong> DOM4 の仕様では (Gecko 13.0 {{geckoRelease("13.0")}} で実装) 、 <code>deep</code> は省略可能な引数です。省略された場合、 <code>deep</code> には <code>true</code> が渡され、深い複製を生成します。浅い複製を生成するには、 <code>deep</code> を <code>false</code> にする必要があります。</p> + + <p>以前のDOMの仕様を実装しているブラウザでは、 <code>deep</code> は必須の引数です。</p> + </div> + </dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">var p = document.getElementById("para1"); +var p_prime = p.cloneNode(true); +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p id="not-event-listeners">ノードを複製すると、そのノードのすべての属性とその値がコピーされます。つまり、HTML属性のイベントを含みます。<a href="/ja/docs/DOM/element.addEventListener" title="DOM/element.addEventListener"><code>addEventListener()</code></a> を使用したものや、要素のプロパティに代入されたもの (例: <code>node.onclick = fn;</code>) は複製されません。</p> + +<p><code><strong>cloneNode</strong></code> によって返される複製ノードは、 {{domxref("Node.appendChild()")}} や同種のメソッドによってドキュメントの一部である他のノードに追加されるまでは、ドキュメントの一部ではありません。また、他のノードに追加されるまでは、親ノードを持ちません。</p> + +<p><code><strong>deep</strong></code> が <code>false</code> に設定されていると、どの子ノードも複製されません。 そのため、そのノードに含まれる {{domxref("Text")}} ノードも複製されません。</p> + +<p><code><strong>deep</strong></code> が <code>true</code> に評価できる場合、サブツリー全体 (子 {{domxref("Text")}} ノードにあるテキストを含む) もコピーされます。 {{HTMLElement("img")}} や {{HTMLElement("input")}} 要素などの空ノードの場合には <code>deep</code> を true と false のどちらに設定してもかまいません。</p> + +<div class="warning"><strong>注意:</strong> <code>cloneNode()</code> を使用すると、ドキュメント内で要素の id が重複する可能性があります。</div> + +<p>別のドキュメントに追加するためにノードを複製する場合は、代わりに {{domxref("Document.importNode()")}} を使用してください。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> 引数の省略</td> + <td>Yes<br> + (初期値は <code>false</code>)</td> + <td>{{CompatGeckoDesktop("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>Yes<br> + (初期値は <code>false</code>)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>deep</code> 引数の省略</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("13.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li>{{Spec("http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4","DOM Level 2 Core: cloneNode","REC")}}</li> + <li>{{Spec("http://w3.org/TR/DOM-Level-3-Core/core.html#ID-3A0ED0A4","DOM Level 3 Core: cloneNode","REC")}}</li> + <li><a href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-node-clonenode">DOM4: cloneNode</a> (草案)</li> +</ul> diff --git a/files/ja/web/api/node/comparedocumentposition/index.html b/files/ja/web/api/node/comparedocumentposition/index.html new file mode 100644 index 0000000000..5865081c84 --- /dev/null +++ b/files/ja/web/api/node/comparedocumentposition/index.html @@ -0,0 +1,118 @@ +--- +title: Node.compareDocumentPosition +slug: Web/API/Node/compareDocumentPosition +tags: + - DOM + - DOM Element Methods + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/compareDocumentPosition +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>そのノードと別のノードの位置を比較し、結果となるビットマスクを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>node</var>.compareDocumentPosition( <var>otherNode</var> ) +</pre> + +<h3 id="パラメーター">パラメーター</h3> + +<dl> + <dt><code>node</code></dt> + <dd>比較元ノード</dd> + <dt><code>otherNode</code></dt> + <dd><em>node</em> と比較する別ノード</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>呼び出し元の <code>node</code> と {{domxref("Document")}} 内の <code>otherNode</code> の関係を表すビットの整数値。複数の条件に適応する場合、1つ以上のビットがセットされることがあります。<code>compareDocumentPosition()</code> を呼び出した <code>node</code> と比較して、<code>otherNode</code> が 文書のより前にあり、かつ <code>node</code> を含んでいるならば、<code>DOCUMENT_POSITION_CONTAINS</code> と <code>DOCUMENT_POSITION_PRECEDING</code> のビットがセットされ、結果は0x0Aもしくは10進数の10になります。</p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>戻り値は以下の値を持つビットマスクの何れかとなります。</p> + +<table> + <thead> + <tr> + <th scope="col">名称</th> + <th scope="col">値</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>DOCUMENT_POSITION_DISCONNECTED</code></td> + <td>1</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_PRECEDING</code></td> + <td>2</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_FOLLOWING</code></td> + <td>4</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_CONTAINS</code></td> + <td>8</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_CONTAINED_BY</code></td> + <td>16</td> + </tr> + <tr> + <td><code>DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC</code></td> + <td>32</td> + </tr> + </tbody> +</table> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js;highlight:[3]">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 要素の前に配置しなくてはなりません。"); +} +</pre> + +<div class="note"> +<p><strong>注記:</strong> <code>compareDocumentPosition</code> の戻り値はビットマスクです。よって、有意な結果を得るには <a href="/ja/docs/JavaScript/Reference/Operators/Bitwise_Operators">ビット演算子</a>の "<code>&</code>" を用いなくてはならない点に注意して下さい。</p> +</div> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table> + <thead> + <tr> + <th>仕様書</th> + <th>策定状況</th> + <th>コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition">DOM Level 3</a></td> + <td>Recommendation</td> + <td></td> + </tr> + <tr> + <td><a href="http://dom.spec.whatwg.org/#dom-node-comparedocumentposition">DOM Standard</a></td> + <td>Living standard</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.contains")}}</li> + <li><a href="http://ejohn.org/blog/comparing-document-position/">John Resig - Comparing Document Position</a></li> +</ul> diff --git a/files/ja/web/api/node/contains/index.html b/files/ja/web/api/node/contains/index.html new file mode 100644 index 0000000000..194cdbb2eb --- /dev/null +++ b/files/ja/web/api/node/contains/index.html @@ -0,0 +1,110 @@ +--- +title: Node.contains +slug: Web/API/Node/contains +tags: + - API + - DOM + - Method + - Node +translation_of: Web/API/Node/contains +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Node.contains</code></strong> メソッドは指定ノードの子孫ノードに特定の子ノード（※自身も含む）が含まれるかどうかを示す真偽値を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">node.contains( otherNode ) +</pre> + +<h2 id="Example" name="Example">例</h2> + +<p>この関数は、ある要素がそのページの body 要素に含まれるかどうかをチェックするものです。<code>contains</code> は包括的かつ決定的であるため、body がそれ自身を含むかどうかは <code>isInPage</code> の意図ではないため明示的に <code>false</code> を返します。</p> + +<pre class="brush:js">function isInPage(node) { + return (node === document.body) ? false : document.body.contains(node); +}</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>5.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>3.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer <a href="https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect">は elements の <code>contains()</code> のみサポートしています。</a></p> + +<p>[2] Safari 2.x <a href="https://books.google.de/books?id=KW9G9rdlStIC&lpg=PA299&ots=4XRWUISZVr&dq=safari+node+contains+professional+javascript&pg=PA299&hl=de#v=onepage&q=safari%20node%20contains%20professional%20javascript&f=false">には正しく <code>contains()</code> が実装されていません。</a></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.compareDocumentPosition")}}</li> + <li>{{domxref("Node.hasChildNodes")}}</li> +</ul> diff --git a/files/ja/web/api/node/firstchild/index.html b/files/ja/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..5a57be3ae9 --- /dev/null +++ b/files/ja/web/api/node/firstchild/index.html @@ -0,0 +1,46 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/firstChild +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ <code>null</code> を返します。ノードが <code>Document</code> の場合は、その直接の子のリスト内の最初のノードを返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild; +</pre> +<ul> + <li><code>childNode</code> : node の最初の子ノードがあればその参照、無い場合は <code>null</code></li> +</ul> +<h2 id="Example" name="Example">例</h2> +<p>次の例では <code>firstChild</code> の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。</p> +<pre class="brush:html"><p id="para-01"> + <span>First span</span> +</p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script></pre> +<p>上記の例では alert は'#text'を表示します。なぜなら開始タグ <p> の末端と <span> の間にある空白を調整するためにテキストノードが挿入されているからです。<b>どんな</b> 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。</p> +<p>その他の #text ノードは閉じタグ </span> と </p> の間に挿入されていみます。</p> +<p>もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。</p> +<pre class="brush:html"><p id="para-01"><span>First span</span></p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> +<p>今度は alert は 'SPAN' を表示するでしょう。</p> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></li> +</ul> diff --git a/files/ja/web/api/node/getrootnode/index.html b/files/ja/web/api/node/getrootnode/index.html new file mode 100644 index 0000000000..cde6d1053d --- /dev/null +++ b/files/ja/web/api/node/getrootnode/index.html @@ -0,0 +1,100 @@ +--- +title: Node.getRootNode() +slug: Web/API/Node/getRootNode +tags: + - API + - DOM + - Method + - Node + - Reference + - getRootNode + - メソッド +translation_of: Web/API/Node/getRootNode +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>getRootNode()</code></strong> は {{domxref("Node")}} インターフェイスのメソッドで、そのコンテキストのオブジェクトのルート、利用できる場合はオプションでシャドウルートを含んだものを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <em>root</em> = <em>node</em>.getRootNode(<em>options</em>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>ルートノードを取得するためのオプションを設定するオブジェクトです。利用可能なオプションは次の通りです。 + <ul> + <li><code>composed</code>: {{jsxref('Boolean')}} 値で、シャドウルートを返すか (<code>false</code>、既定値)、またはシャドウルートを越えたルートノードを返すか (<code>true</code>) を示します。</li> + </ul> + </dd> +</dl> + +<h3 id="Returns" name="Returns">返値</h3> + +<p>{{domxref('Node')}} を継承したオブジェクトです。これはどこで <code>getRootNode()</code> を呼び出したかによって異なる形になります。例えば、</p> + +<ul> + <li>標準のウェブページ内の要素に対して呼び出した場合は、ページ全体を表す {{domxref("HTMLDocument")}} オブジェクトを返します。</li> + <li>シャドウ DOM の中の要素に対して呼び出した場合は、関連する {{domxref("ShadowRoot")}} オブジェクトを返します。</li> +</ul> + +<h2 id="Examples" name="Examples">例</h2> + +<p>最初に、 HTML/document ノードの参照を返す単純な例です。</p> + +<pre class="brush: js">rootNode = node.getRootNode();</pre> + +<p>この例はもっと複雑で、通常のルートを返す場合と、シャドウルートを含むルートの違いを示します。 (<a href="https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html">ソースコード全体</a>を見てください。)</p> + +<pre class="brush: html"><!-- source: https://github.com/jserz/js_piece/blob/master/DOM/Node/getRootNode()/demo/getRootNode.html --> +<div class="js-parent"> + <div class="js-child"></div> +</div> +<div class="js-shadowHost"></div> +<script> + // Chrome 54+，Opera 41+ で動作 + + var parent = document.querySelector('.js-parent'), + child = document.querySelector('.js-child'), + shadowHost = document.querySelector('.js-shadowHost'); + + console.log(parent.getRootNode().nodeName); // #document + console.log(child.getRootNode().nodeName); // #document + + // ShadowRoot の生成 + var shadowRoot = shadowHost.attachShadow({mode:'open'}); + shadowRoot.innerHTML = '<style>div{background:#2bb8aa;}</style>' + + '<div class="js-shadowChild">content</div>'; + var shadowChild = shadowRoot.querySelector('.js-shadowChild'); + + // 合成の既定値は false + console.log(shadowChild.getRootNode() === shadowRoot); // true + console.log(shadowChild.getRootNode({composed:false}) === shadowRoot); // true + console.log(shadowChild.getRootNode({composed:true}).nodeName); // #document +</script></pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-getrootnode','getRootNode()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Node.getRootNode")}}</p> diff --git a/files/ja/web/api/node/getuserdata/index.html b/files/ja/web/api/node/getuserdata/index.html new file mode 100644 index 0000000000..47fe7bfe05 --- /dev/null +++ b/files/ja/web/api/node/getuserdata/index.html @@ -0,0 +1,68 @@ +--- +title: Node.getUserData() +slug: Web/API/Node/getUserData +tags: + - API + - DOM + - Method + - Node + - Obsolete + - Reference + - メソッド +translation_of: Web/API/Node/getUserData +--- +<div>{{APIRef("DOM")}}{{obsolete_header}}</div> + +<p><code><strong>Node.getUserData()</strong></code> メソッドは、以前 {{domxref("Node.setUserData()")}} によってノードに設定されたすべてのユーザーデータを {{domxref("DOMUserData")}} 形式で返します。</p> + +<div class="note"> +<p><code>Node.setUserData</code> および {{domxref("Node.getUserData")}} メソッドはウェブコンテンツから利用できなくなりました。 {{domxref("Element.dataset")}} または <a href="/ja/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> を代わりに利用することができます。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<ul> + <li><code>userKey</code> は指定されたノードに関連付けられた特定のデータを選択するためのキーです。指定されたノードに複数のキーが、それぞれの値を所持して割り当てられている可能性があります。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">var d = document.setUserData('key', 15, null); +console.log(document.getUserData('key')); // 15</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Node.getUserData")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.setUserData()")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li>{{domxref("DOMUserData")}}</li> +</ul> diff --git a/files/ja/web/api/node/haschildnodes/index.html b/files/ja/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..b4ed1654d3 --- /dev/null +++ b/files/ja/web/api/node/haschildnodes/index.html @@ -0,0 +1,31 @@ +--- +title: Node.hasChildNodes +slug: Web/API/Node/hasChildNodes +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/hasChildNodes +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><strong>hasChildNodes</strong> は指定した<a href="/ja/docs/Web/API/Node">ノード</a>が<a href="/ja/docs/Web/API/Node.childNodes">子ノード</a>を持つか否かを示す<a href="/ja/docs/JavaScript/Reference/Global_Objects/Boolean">真偽値</a>を返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><code>node.hasChildNodes()</code></pre> +<h2 id="Example" name="Example">例</h2> +<p><code>"foo"</code> を id に持つ要素の子ノードの存在を確認し、存在する場合は最初の子ノードを削除する例を以下に示します。</p> +<pre class="brush:js;highlight:[3];">var foo = document.getElementById("foo"); + +if ( foo.hasChildNodes() ) { + foo.removeChild( foo.childNodes[0] ); +}</pre> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes</a></li> +</ul> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{domxref("Node.childNodes")}}</li> + <li>{{domxref("Node.hasAttributes")}}</li> +</ul> diff --git a/files/ja/web/api/node/index.html b/files/ja/web/api/node/index.html new file mode 100644 index 0000000000..db5a645811 --- /dev/null +++ b/files/ja/web/api/node/index.html @@ -0,0 +1,510 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - DOM Reference + - Interface + - Node + - Reference +translation_of: Web/API/Node +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Node</code></strong> はいくつもの DOM API オブジェクトタイプが継承しているインターフェイスで、それらのさまざまなタイプを同じように扱える (同じメソッドのセットを継承する、または同じ方法でテストできる) ようにします。</p> + +<p>以下のインターフェイスはすべて、<code>Node</code> からメソッドやプロパティを継承しています: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Attr")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}</p> + +<p>これらのインターフェイスは、そのメソッドやプロパティが妥当でないときは null を返すことがあります。例外を投げることもあります - 例えば、子が存在できないノードタイプに子を追加するとき。</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>親である {{domxref("EventTarget")}}</em> からプロパティを継承します。<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.baseURI")}} {{readonlyInline}}</dt> + <dd>ベース URL を表す {{domxref("DOMString")}} を返します。ベース URL の概念は、言語によって変わります。HTML ではプロトコル、ドメイン名、ディレクトリー構造に対応しており、最後の <code>'/'</code> までのすべてになります。</dd> + <dt>{{domxref("Node.baseURIObject")}} {{Non-standard_inline}} {{Fx_minversion_inline("3")}}</dt> + <dd>(ウェブコンテンツでは使用できません) 要素のベース URI を表す、読み取り専用の {{Interface("nsIURI")}} オブジェクトを返します。</dd> + <dt>{{domxref("Node.childNodes")}} {{readonlyInline}}</dt> + <dd>このノードのすべての子孫を含む、生きている {{domxref("NodeList")}} を返します。{{domxref("NodeList")}} が生きているとは、<code>Node</code> の子が変化すれば自動的に {{domxref("NodeList")}} オブジェクトが更新されることを意味します。</dd> + <dt>{{domxref("Node.firstChild")}} {{readonlyInline}}</dt> + <dd>ノードの直下の最初の子ノードを表す {{domxref("Node")}} を返します。子が存在しなければ <code>null</code> を返します。</dd> + <dt>{{domxref("Node.isConnected")}} {{readonlyInline}}</dt> + <dd>ノードが(直接/関節的に)コンテキストオブジェクトに接続されているかを示す論理値。例えば通常の DOM の場合は {{domxref("Document")}} オブジェクト、あるいはシャドーDOM の場合は {{domxref("ShadowRoot")}}。</dd> + <dt>{{domxref("Node.lastChild")}} {{readonlyInline}}</dt> + <dd>ノードの直下の最後の子ノードを表す {{domxref("Node")}} を返します。子が存在しなければ <code>null</code> を返します。</dd> + <dt>{{domxref("Node.nextSibling")}} {{readonlyInline}}</dt> + <dd>ツリー構造で次のノードを表す {{domxref("Node")}} を返します。該当するノードがない場合は <code>null</code> を返します。</dd> + <dt>{{domxref("Node.nodeName")}} {{readonlyInline}}</dt> + <dd><code>Node</code> の名前を持つ {{domxref("DOMString")}} を返します。名前の構造は、ノードの型によって異なります。例えば、{{domxref("HTMLElement")}} は {{domxref("HTMLAudioElement")}} に対して <code>'audio'</code> というように対応するタグの名前、{{domxref("Text")}} ノードは <code>'#text'</code> という文字列、{{domxref("Document")}} ノードは <code>'#document'</code> という文字列になります。</dd> + <dt>{{domxref("Node.nodePrincipal")}} {{Non-standard_inline}}{{Fx_minversion_inline("3")}}</dt> + <dd>ノードのプリンシパルを表す {{Interface("nsIPrincipal")}} を返します。</dd> + <dt>{{domxref("Node.nodeType")}}{{readonlyInline}}</dt> + <dd>ノードの型を表す <code>unsigned short</code> を返します。使用できる値: + <table class="standard-table"> + <tbody> + <tr> + <th scope="col">名称</th> + <th scope="col">値</th> + </tr> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td><code>1</code></td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td><code>3</code></td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline}}</td> + <td><code>4</code></td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline}}</td> + <td><code>5</code></td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline}}</td> + <td><code>6</code></td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td><code>7</code></td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td><code>8</code></td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td><code>9</code></td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td><code>10</code></td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td><code>11</code></td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline}}</td> + <td><code>12</code></td> + </tr> + </tbody> + </table> + </dd> + <dt>{{domxref("Node.nodeValue")}}</dt> + <dd>カレントノードの値を取得または設定します。</dd> + <dt>{{domxref("Node.ownerDocument")}} {{readonlyInline}}</dt> + <dd>ノードが所属する {{domxref("Document")}} を返します。ノードが document 自身の場合は、<code>null</code> を返します。</dd> + <dt>{{domxref("Node.parentNode")}} {{readonlyInline}}</dt> + <dd>このノードの親の {{domxref("Node")}} を返します。ノードがツリーの最上位である、あるいはツリーに加わっていないなど、親が存在しない場合は <code>null</code> を返します。</dd> + <dt>{{domxref("Node.parentElement")}} {{readonlyInline}}</dt> + <dd>このノードの親の {{domxref("Element")}} を返します。ノードに親が存在しない、あるいは親が {{domxref("Element")}} ではない場合は、<code>null</code> を返します。</dd> + <dt>{{domxref("Node.previousSibling")}} {{readonlyInline}}</dt> + <dd>ツリー構造で前のノードを表す {{domxref("Node")}} を返します。該当するノードがない場合は <code>null</code> を返します。</dd> + <dt>{{domxref("Node.textContent")}}</dt> + <dd>要素や要素のすべての子孫のテキストコンテンツを取得または設定します。</dd> +</dl> + +<h3 id="Deprecated_properties" name="Deprecated_properties">非推奨プロパティ</h3> + +<dl> + <dt>{{domxref("Node.rootNode")}} {{readOnlyInline}} {{deprecated_inline}}</dt> + <dd>ツリーの最上位ノードを表す {{domxref("Node")}} オブジェクトを返します。自身がツリーの最上位ノードである場合はカレントノードを返します。これは {{domxref("Node.getRootNode()")}} に置き換えられました。</dd> +</dl> + +<h3 id="Obsolete_properties" name="Obsolete_properties">廃止プロパティ</h3> + +<dl> + <dt>{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>要素の修飾名のローカル部分を表す {{domxref("DOMString")}} を返します。 + <div class="note"> + <p><strong>注記:</strong> Firefox 3.5 および以前のバージョンでは、このプロパティで HTML 要素のローカル名が大文字でした (XHTML 要素を除く)。以降のバージョンではこのようになりませんので、このプロパティでは HTML および XHTML の両方が小文字になります。{{gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>ノードの名前空間の URI。名前空間がない場合は <code>null</code> になります。 + <div class="note"> + <p><strong>注記:</strong> Firefox 3.5 および以前のバージョンでは、HTML 要素の名前空間はありません。以降のバージョンでは、HTML 要素は HTML ツリーおよび XML ツリーで <code><a class="linkification-ext external" href="https://www.w3.org/1999/xhtml/" title="Linkification: http://www.w3.org/1999/xhtml">https://www.w3.org/1999/xhtml/</a></code> 名前空間内に存在します。{{gecko_minversion_inline("1.9.2")}}</p> + </div> + </dd> + <dt>{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}</dt> + <dd>ノードの名前空間の接頭辞を表す {{domxref("DOMString")}} を返します。接頭辞が指定されていない場合は <code>null</code> を返します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>親である {{domxref("EventTarget")}}</em> からメソッドを継承します。<sup>[1]</sup></p> + +<dl> + <dt>{{domxref("Node.appendChild()")}}</dt> + <dd>カレントノードの最後の子として、指定した childNode 引数を追加します。<br> + 引数が DOM ツリー上の既存のノードを参照している場合は、ノードが現在の位置から外されて新しい位置に追加されます。</dd> + <dt>{{domxref("Node.cloneNode()")}}</dt> + <dd>{{domxref("Node")}} を複製します。また、すべての内容物を複製することもできます。デフォルトで、ノードの内容物を複製します。</dd> + <dt>{{domxref("Node.compareDocumentPosition()")}}</dt> + <dd>カレントノードの位置を、他のドキュメント内の別のノードと比較します。</dd> + <dt>{{domxref("Node.contains()")}}</dt> + <dd>ノードが指定したノードの子孫であるか否かを示す {{jsxref("Boolean")}} 値を返します。</dd> + <dt>{{domxref("Node.getRootNode()")}}</dt> + <dd>コンテキストオブジェクトのルートを返します。任意で、shadow root が使用可能である場合にそれを含めることができます。</dd> + <dt>{{domxref("Node.hasChildNodes()")}}</dt> + <dd>要素が子ノードを持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd> + <dt>{{domxref("Node.insertBefore()")}}</dt> + <dd>カレントノードの子として、参照先ノードの前に {{domxref("Node")}} を挿入します。</dd> + <dt>{{domxref("Node.isDefaultNamespace()")}}</dt> + <dd>引数として名前空間の URI を受け入れて、名前空間が指定したノードのデフォルトの名前空間であれば <code>true</code>、そうでない場合は <code>false</code> である {{jsxref("Boolean")}} を返します。</dd> + <dt>{{domxref("Node.isEqualNode()")}}</dt> + <dd>2 つのノードが同じ型であり、定義されているすべてのデータポイントが一致するか否かを表す {{jsxref("Boolean")}}を返します。</dd> + <dt>{{domxref("Node.isSameNode()")}}</dt> + <dd>2 つのノードが同じである (すなわち、同じオブジェクトを参照している) か否かを示す {{jsxref("Boolean")}} 値を返します。</dd> + <dt>{{domxref("Node.lookupPrefix()")}}</dt> + <dd>指定した名前空間 URI の接頭辞があれば、その接頭辞を含む {{domxref("DOMString")}} を返します。接頭辞がない場合は <code>null</code> を返します。複数の接頭辞がある場合の結果は実装依存です。</dd> + <dt>{{domxref("Node.lookupNamespaceURI()")}}</dt> + <dd>接頭辞を受け入れて、指定したノードで接頭辞が関連付けられた名前空間が見つかった場合は名前空間の URI を返します (見つからない場合は <code>null</code> を返します)。接頭辞として <code>null</code> を与えると、デフォルトの名前空間を返します。</dd> + <dt>{{domxref("Node.normalize()")}}</dt> + <dd>要素内のすべてのテキストノードをクリーンアップ (隣接ノードを統合、空のノードを削除) します。</dd> + <dt>{{domxref("Node.removeChild()")}}</dt> + <dd>カレント要素から子ノードを削除します。カレント要素はカレントノードの子であることが必要です。</dd> + <dt>{{domxref("Node.replaceChild()")}}</dt> + <dd>カレントノードの子 {{domxref("Node")}} のひとつを、引数で指定した別のノードで置き換えます。</dd> +</dl> + +<h3 id="Obsolete_methods" name="Obsolete_methods">廃止メソッド</h3> + +<dl> + <dt>{{domxref("Node.getFeature()")}} {{obsolete_inline}}</dt> + <dd>x</dd> + <dt>{{domxref("Node.getUserData()")}} {{obsolete_inline}}</dt> + <dd>ユーザーが、ノードから {{domxref("DOMUserData")}} を取得できます。</dd> + <dt>{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}</dt> + <dd>要素がなんらかの属性を持っているか否かを示す {{jsxref("Boolean")}} を返します。</dd> + <dt>{{domxref("Node.isSupported()")}} {{obsolete_inline}}</dt> + <dd>DOM 実装が特定の機能を実装しており、またその機能が指定したノードでサポートされているかを確認して、その結果を表す {{jsxref("Boolean")}} を返します。</dd> + <dt>{{domxref("Node.setUserData()")}} {{obsolete_inline}}</dt> + <dd>ユーザーが、ノードに {{domxref("DOMUserData")}} を追加または削除できます。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Browse_all_child_nodes" name="Browse_all_child_nodes">すべての子ノードを走査する</h3> + +<p>次の関数はすべての子ノードを再帰的にループして、それらに対してコールバック関数を呼び出します。（また、親ノード自身に対しても同様に呼び出されます。</p> + +<pre class="brush: js">function DOMComb (oParent, oCallback) { + if (oParent.hasChildNodes()) { + for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) { + DOMComb(oNode, oCallback); + } + } + oCallback.call(oParent); +}</pre> + +<h4 id="Syntax" name="Syntax">構文</h4> + +<pre class="syntaxbox">DOMComb(parentNode, callbackFunction);</pre> + +<h4 id="Description" name="Description">説明</h4> + +<p><code>parentNode</code> のすべての子ノードと <code>parentNode</code> 自身を再帰的にループして、それらを <a href="/ja/docs/JavaScript/Reference/Operators/this" title="JavaScript/Reference/Operators/this"><code>this</code></a> オブジェクトとして <code>callbackFunction</code> を実行します。</p> + +<h4 id="Parameters" name="Parameters">引数</h4> + +<dl> + <dt><code>parentNode</code></dt> + <dd>親ノード (<code><strong>Node</strong> <a href="/ja/docs/JavaScript/Reference/Global_Objects/Object" title="JavaScript/Reference/Global_Objects/Object">Object</a></code>)</dd> + <dt><code>callbackFunction</code></dt> + <dd>コールバック関数 (<a href="/ja/docs/JavaScript/Reference/Global_Objects/Function" title="JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>)</dd> +</dl> + +<h4 id="Sample_usage" name="Sample_usage">用例</h4> + +<p>次の例はボディの中のテキストの内容を <code>console.log</code> に送るものです:</p> + +<pre class="brush: js">function printContent () { + if (this.nodeValue) { console.log(this.nodeValue); } +} + +onload = function () { + DOMComb(document.body, printContent); +};</pre> + +<h3 id="Remove_all_children_nested_within_a_node" name="Remove_all_children_nested_within_a_node">ノードに内包されているすべての子ノードを削除する</h3> + +<pre class="brush: js">Element.prototype.removeAll = function () { + while (this.firstChild) { this.removeChild(this.firstChild); } + return this; +};</pre> + +<h4 id="Sample_usage_2" name="Sample_usage_2">使用例</h4> + +<pre class="brush: js">/* ... an alternative to document.body.innerHTML = "" ... */ +document.body.removeAll();</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>以下のプロパティを削除: <code>attributes</code>、<code>namespaceURI</code>、<code>prefix</code>、<code>localName</code>。<br> + 以下のメソッドを削除: <code>isSupported()</code>、<code>hasAttributes()</code>、<code>getFeature()</code>、<code>setUserData()</code>、<code>getUserData()</code>。</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>{{domxref("Document")}} で <code>insertBefore()</code>、<code>replaceChild()</code>、<code>removeChild()</code>、<code>appendChild()</code> メソッドを呼び出すと、もうひとつの種類のエラー (<code>NOT_SUPPORTED_ERR</code>) を返します。<br> + <code>normalize()</code> メソッドを、適切な {{domxref("DOMConfiguration")}} フラグが設定されていれば {{domxref("Text")}} ノードも正規化できるように変更。<br> + 以下のメソッドを追加: <code>compareDocumentPosition()</code>、<code>isSameNode()</code>、<code>lookupPrefix()</code>、<code>isDefaultNamespace()</code>、<code>lookupNamespaceURI()</code>、<code>isEqualNode()</code>、<code>getFeature()</code>、<code>setUserData()</code>、<code>getUserData()</code>。<br> + 以下のプロパティを追加: <code>baseURI</code>、<code>textContent</code>。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td><code>ownerDocument</code> プロパティを、{{domxref("DocumentFragment")}} が <code>null</code> も返すように若干変更。<br> + 以下のプロパティを追加: <code>namespaceURI</code>、<code>prefix</code>、<code>localName</code>。<br> + 以下のメソッドを追加: <code>normalize()</code>、<code>isSupported()</code>、<code>hasAttributes()</code>。</td> + </tr> + <tr> + <td>{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("api.Node")}}</p> + +<p>{{CompatibilityTable}}</p> +</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatNo}}{{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>getUserData()</code>、<code>setUserData()</code>、<code>hasAttributes()</code> {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatNo}}{{CompatGeckoDesktop("22.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSameNode()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatGeckoDesktop("10")}} で削除<br> + {{CompatGeckoDesktop("48")}} で再追加</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSupported()</code> {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatNo}}{{CompatGeckoDesktop("22.0")}}<sup>[2]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>rootNode()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(48)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>getRootNode()</code> の追加と <code>rootNode</code> の非推奨化</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(41)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Android 版 Chrome</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + <tr> + <td><code>getFeature()</code>{{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}<br> + {{CompatNo}}{{CompatGeckoDesktop("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>getUserData()</code>、<code>setUserData()</code>、<code>hasAttributes()</code> {{deprecated_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>isSameNode()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("1.0")}}<br> + {{CompatGeckoDesktop("10")}} で削除<br> + {{CompatGeckoDesktop("48")}} で再追加</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>isSupported()</code> {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>attributes</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>rootNode()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(48)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>getRootNode()</code> の追加と <code>rootNode</code> の非推奨化</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(54.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(41)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(54.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] WebKit と古いバージョンの Blink は、誤って <code>Node</code> が {{domxref("EventTarget")}} から継承していません。</p> + +<p>[2] Gecko 22.0 {{geckoRelease("22.0")}} で、<code>attributes</code> プロパティを {{domxref("Element")}} に移動しました。</p> + +<p>[3] DOM4 標準に従って、プロパティを {{domxref("Element")}} および {{domxref("Attr")}} API に移動しました。</p> diff --git a/files/ja/web/api/node/insertbefore/index.html b/files/ja/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..d34ad9e05c --- /dev/null +++ b/files/ja/web/api/node/insertbefore/index.html @@ -0,0 +1,188 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertBefore +tags: + - API + - DOM + - Element + - Method + - Node + - Reference + - メソッド +translation_of: Web/API/Node/insertBefore +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"> <code><strong>Node.insertBefore()</strong></code> メソッドは、ノードを<em>参照ノード</em>の前に、指定された<em>親ノード</em>の子として挿入します。</span></p> + +<p>指定されたノードが既に文書中に存在した場合、 <code>insertBefore()</code> はこれを現在の位置から新しい位置に移動します。 (つまり、既存の親ノードから自動的に削除され、指定された新しい親に追加されます。)</p> + +<p>これは、1つのノードが文書中に同時に2か所に存在できないことを意味します。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> {{domxref("Node.cloneNode()")}} を使用して、ノードを新しい親の下に追加する前に複製を作成することができます。なお、 <code>cloneNode()</code> で作成された複製は自動的には同期されません。</p> +</div> + +<p>指定された子が {{domxref("DocumentFragment")}} である場合、 <code>DocumentFragment</code> の内容全体が指定された親ノードの子リストに移動されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">let <var>insertedNode</var> = <var>parentNode</var>.insertBefore(<var>newNode</var>, <var>referenceNode</var>) +</pre> + +<dl> + <dt><code><var>insertedNode</var></code></dt> + <dd>挿入されたノード (<code><var>newNode</var></code> と同じ) です。</dd> + <dt><code><var>parentNode</var></code></dt> + <dd>新しく挿入されるノードの親です。</dd> + <dt><code><var>newNode</var></code></dt> + <dd>挿入されるノードです。</dd> + <dt><code><var>referenceNode</var></code></dt> + <dd> <code><var>newNode</var></code> がこのノードの直前に挿入されます。このノードが <code>null</code> である場合は、 <code><var>newNode</var></code> は <code><var>parentNode</var></code> の子ノードの末尾に挿入されます。</dd> +</dl> + +<div class="note"> +<p><strong>メモ:</strong> <code><var>referenceNode</var></code> は省略可能な引数では<strong>ありません</strong>。明示的に {{domxref("Node")}} または <code>null</code> を渡す必要があります。渡し忘れた場合や無効な値を渡した場合は、ブラウザーのバージョンによって<a href="https://code.google.com/p/chromium/issues/detail?id=419780">異なる</a><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119489">動作</a>をすることがあります。</p> +</div> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>追加された子ノードを返します (ただし <code><var>newNode</var></code> が {{domxref("DocumentFragment")}} の場合は、空の {{domxref("DocumentFragment")}} が返ります)。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Example_1" name="Example_1">例 1</h3> + +<pre class="brush: html"><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> +</pre> + +<h3 id="Example_2" name="Example_2">例 2</h3> + +<pre class="brush:html"><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> +</pre> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> <code>insertAfter()</code> メソッドはありません。これは <code>insertBefore</code> メソッドと {{domxref("Node.nextSibling")}} の組み合わせでエミュレートできます。</p> +</div> + +<p>前の例では、 <code>sp1</code> は以下のようにして <code>sp2</code> の後に挿入することができます。</p> + +<pre class="brush: js"><code>parentDiv.insertBefore(sp1, sp2.nextSibling)</code></pre> + +<p><code>sp2</code> に次の兄弟がない場合、これは最後の子ノードです。 — <code>sp2.nextSibling</code> は <code>null</code> を返し、 <code>sp1</code> は子ノードリストの末尾 (<code>sp2</code> の直後) に挿入されます。</p> + +<h3 id="Example_3" name="Example_3">例 3</h3> + +<p>要素を最初の子要素の前に挿入するために、 {{domxref("Node/firstChild", "firstChild")}} プロパティを使用します。</p> + +<pre class="brush:js">// 親ノードを取得 +let parentElement = document.getElementById('parentElement') +// 親の最初の子を取得 +let theFirstChild = parentElement.firstChild + +// 新しい要素を取得 +let newElement = document.createElement("div") + +// 最初の子の前に新しい要素を挿入 +parentElement.insertBefore(newElement, theFirstChild) +</pre> + +<p>要素に最初の子がない場合、 <code>firstChild</code> は <code>null</code> になります。その場合も、要素は親の最後の子の後に追加されます。</p> + +<p>親要素が最初の子を持っていない場合は、最後の子も持っていません。結果的に、新しく挿入された要素は<em>唯一の</em>要素になります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>挿入アルゴリズムのエラーを修正</td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>より詳細にアルゴリズムを記述</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>目立った変更はなし</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>目立った変更はなし</td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>導入</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Node.insertBefore")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("ParentNode.prepend()")}}</li> +</ul> diff --git a/files/ja/web/api/node/isdefaultnamespace/index.html b/files/ja/web/api/node/isdefaultnamespace/index.html new file mode 100644 index 0000000000..fff65ffae3 --- /dev/null +++ b/files/ja/web/api/node/isdefaultnamespace/index.html @@ -0,0 +1,35 @@ +--- +title: Node.isDefaultNamespace +slug: Web/API/Node/isDefaultNamespace +tags: + - DOM + - Gecko DOM Reference + - Namespaces + - Node +translation_of: Web/API/Node/isDefaultNamespace +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><code>isDefaultNamespace</code> は、引数としてネームスペース URI を受け取り、ネームスペースが指定されたノードのデフォルトのネームスペースである場合に <code>true</code> を返します。そうでない場合は <code>false</code> を返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>result</var> = <var>node</var>.isDefaultNamespace(<var>namespaceURI</var>) +</pre> +<ul> + <li><var>result</var> : 戻り値は真偽値 (<code>true</code> / <code>false</code>) となる</li> + <li><var>namespaceURI</var> : 要素に対してチェックする、名前空間を表す文字列</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">var XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; +var el = document.getElementsByTagNameNS(XULNS, 'textbox')[0]; + +alert(el.isDefaultNamespace(XULNS)); // true</pre> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace">DOM Level 3 Core: isDefaultNamespace</a></li> + <li><a href="/en-US/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> +</ul> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li><a href="/ja/docs/Code_snippets/IsDefaultNamespace" title="Code_snippets/IsDefaultNamespace">Code snippets: isDefaultNamespace</a></li> +</ul> diff --git a/files/ja/web/api/node/isequalnode/index.html b/files/ja/web/api/node/isequalnode/index.html new file mode 100644 index 0000000000..3eced87fe0 --- /dev/null +++ b/files/ja/web/api/node/isequalnode/index.html @@ -0,0 +1,90 @@ +--- +title: Node.isEqualNode +slug: Web/API/Node/isEqualNode +translation_of: Web/API/Node/isEqualNode +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>Node.isEqualNode()</code>は2つのノードが同値かどうかをテストします。それぞれのノードが同じ型で、同じ特性（要素であればIDや子要素の数など）、属性値などを持つ場合、同値と判定されます。比較される内容はノードの型によって異なります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>isEqualNode</var> = <var>node</var>.isEqualNode(otherNode); +</pre> + +<ul> + <li><code>otherNode</code> : 同値性を比較する対象の {{domxref("Node")}}</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>3つの {{HTMLElement("div")}} ブロックを作成する例を示します。1つめと3つめは同じ内容と属性を持ち、2番目は異なっています。このとき、<code>isEqualNode()</code> を使ってJavaScriptでノードを比較した結果は以下のようになります。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>最初の要素です。</div> +<div>2番目の要素です。</div> +<div>最初の要素です。</div> + +<p id="output"></p></pre> + +<div class="hidden"> +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#output { + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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/>";</pre> + +<h3 id="Results">Results</h3> + +<p>{{ EmbedLiveSample('Example', 480) }}</p> + +<p> + </p><h2 id="仕様">仕様</h2> + + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + + + +<p>{{Compat("api.Node.isEqualNode")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("Node.isSameNode()")}}</li> +</ul> diff --git a/files/ja/web/api/node/issamenode/index.html b/files/ja/web/api/node/issamenode/index.html new file mode 100644 index 0000000000..f94668cfd5 --- /dev/null +++ b/files/ja/web/api/node/issamenode/index.html @@ -0,0 +1,39 @@ +--- +title: Node.isSameNode +slug: Web/API/Node/isSameNode +tags: + - DOM + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/isSameNode +--- +<div> + {{ApiRef}}{{Obsolete_header}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ふたつのノードが同一ノードの場合は <code>true</code> を、異なる場合は <code>false</code> を返します。</p> +<div class="warning"> + <strong>注記</strong>: このメソッドは DOM level 4 で削除されており、Gecko 10.0 {{geckoRelease("10.0")}} やその他のブラウザの最近のバージョンには実装されていません。よって、別の方法を採る必要があります。<br> + <pre class="brush:js">// 当メソッド +node1.isSameNode(node2) + +// 代替策 +node1 === node2 +node1 == node2 + +</pre> +</div> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>isSameNode</var> = <var>node</var>.isSameNode(<var>org</var>); +</pre> +<ul> + <li><var>arg</var> : 比較ノード</li> +</ul> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li>{{spec("http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isSameNode","DOM Level 3 Core: isSameNode","REC")}}</li> + <li>{{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています</li> +</ul> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{domxref("Node.isEqualNode")}}</li> +</ul> diff --git a/files/ja/web/api/node/issupported/index.html b/files/ja/web/api/node/issupported/index.html new file mode 100644 index 0000000000..3b25dc254b --- /dev/null +++ b/files/ja/web/api/node/issupported/index.html @@ -0,0 +1,44 @@ +--- +title: Node.isSupported +slug: Web/API/Node/isSupported +tags: + - DOM + - DOM Element Methods + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/isSupported +--- +<div> + {{ApiRef}}{{obsolete_header("22")}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>指定された機能が DOM 実装に含まれており、このノードでサポートされているかどうかをテストします。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">element.isSupported(feature, version)</pre> +<dl> + <dt> + <code>feature</code></dt> + <dd> + テストする機能の名前。<a href="/ja/docs/DOM/document.implementation" title="DOM/document.implementation">DOMImplementation</a> の <code>hasFeature</code> メソッドに渡される名前と同じです。コア DOM 仕様に定義された使用可能な値は、DOM Level 2 の <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance">Conformance セクション</a> にリストがあります。</dd> + <dt> + <code>version</code></dt> + <dd> + テストする機能のバージョン番号。DOM Level 2, version 1 では、この文字列は <code>2.0</code> になります。バージョンが指定されていなかったり、対象の機能がどのバージョンでもサポートされている場合は <code>true</code> を返します。</dd> +</dl> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js"><div id="doc"> +</div> + +<script> + // 要素を取得し、その要素が DOM2 HTML モジュールをサポートしているかどうかを確認します + var main = document.getElementById('doc'); + var output = main.isSupported('HTML', '2.0'); +</script> +</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Level-2-Core-Node-supports">DOM Level 2 Core: isSupported</a></li> +</ul> +<h2 id="Gecko-specific_notes" name="Gecko-specific_notes">Gecko に関する注記</h2> +<ul> + <li>Gecko 19.0 {{geckoRelease("19.0")}} 以降では、このメソッドは常に <code>true</code> を返します。また、このメソッドは Gecko 22.0 {{geckoRelease("22.0")}} で削除されています。</li> +</ul> diff --git a/files/ja/web/api/node/lastchild/index.html b/files/ja/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..e7f5626f3c --- /dev/null +++ b/files/ja/web/api/node/lastchild/index.html @@ -0,0 +1,28 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/lastChild +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><strong>lastChild</strong> はノードの子要素の内、最後のものを返します。</p> +<h2 id="Syntax_and_Values" name="Syntax_and_Values">構文</h2> +<pre class="syntaxbox">var last_child = element.lastChild +</pre> +<h2 id="Description" name="Description">説明</h2> +<p><code>lastChild</code> として返されるのはノードです。その親が要素であるならば、子ノードは一般的に Element ノード、Text ノード、Comment ノード となります。子要素を持たない場合は <code>null</code> が返されます。</p> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">var tr = document.getElementById("row1"); // table 要素の特定の行を取得 +var corner_td = tr.lastChild; // 特定の行の内、最後のセルを取得 +</pre> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li> + <li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li> +</ul> diff --git a/files/ja/web/api/node/localname/index.html b/files/ja/web/api/node/localname/index.html new file mode 100644 index 0000000000..01ba8fbba6 --- /dev/null +++ b/files/ja/web/api/node/localname/index.html @@ -0,0 +1,62 @@ +--- +title: Node.localName +slug: Web/API/Node/localName +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node + - 要更新 +translation_of: Web/API/Node/localName +--- +<p>{{ ApiRef() }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>このノードの修飾名のローカル部分を返します。</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval"><em>name</em> = <em>element</em>.localName +</pre> +<ul> + <li><code>name</code> は文字列でのローカル名です(詳細は下の{{ Anch("注記") }} を参照してください)</li> +</ul> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<p>(<code>text/xml</code> や <code>application/xhtml+xml</code> のような XML コンテンツタイプで提供されなくてはなりません。)</p> +<pre class="eval"><html xmlns="<span class="nowiki">http://www.w3.org/1999/xhtml</span>" + xmlns:svg="<span class="nowiki">http://www.w3.org/2000/svg</span>"> +<head> + <script type="application/javascript"><![CDATA[ + function test() { + var text = document.getElementById('text'); + var circle = document.getElementById('circle'); + + text.value = "<svg:circle> has:\n" + + "localName = '" + circle.localName + "'\n" + + "namespaceURI = '" + circle.namespaceURI + "'"; + } + ]]></script> +</head> +<body onload="test()"> + <svg:svg version="1.1" + width="100px" height="100px" + viewBox="0 0 100 100"> + <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/> + </svg:svg> + <textarea id="text" rows="4" cols="55"/> +</body> +</html> +</pre> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p>ノードのローカル名はノードの修飾名のコロン(:)の後ろの部分です。修飾名は特定の XML 文書の名前空間の一部として XML の中で特に使われます。例えば、修飾名 <code>ecomm:partners</code> の中で <code>partners</code> がローカル名で <code>ecomm</code> が接頭辞です。</p> +<pre><ecomm:business id="soda_shop" type="brick_n_mortar"> + <ecomm:partners> + <ecomm:partner id="1001">Tony's Syrup Warehouse + </ecomm:partner> + </ecomm:partner> +</ecomm:business> +</pre> +<p><span class="comment">Needs to be reworded; right now it's wrong. -Nickolay The prefix&mdash;in this case, "ecomm"&mdash;defines the namespace in which the local name can be used.</span></p> +<p> {{ gecko_minversion_note("1.9.2", "Firefox 3.5 およびそれ以前では、このプロパティは HTML DOM 中の HTML 要素については大文字のローカル名を返します（XML DOM 中の XHTML 要素については小文字のローカル名を返します）。 Firefox 3.6 以降のバージョンでは、 HTML 5 との互換性のため、内部的な DOM ストレージにおける大文字/小文字で返します。つまり、 HTML DOM と XML DOM の両方において、 HTML 要素は小文字のローカル名となります。 tagName プロパティは、 HTML DOM 中の HTML 要素についても今まで通り大文字のローカル名を返します。") }}</p> +<p><code>ELEMENT_NODE</code> と <code>ATTRIBUTE_NODE</code> 以外の<a href="/ja/DOM/element.nodeType" title="ja/DOM/element.nodeType">種類</a>全てに属すノードでは、常に <code>localName</code> は <code>null</code> です。</p> +<h3 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">参照</h3> +<p><a href="/ja/DOM/element.namespaceURI" title="ja/DOM/element.namespaceURI">element.namespaceURI</a></p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSLocalN">DOM Level 2 Core: Node.localName</a></p> diff --git a/files/ja/web/api/node/namespaceuri/index.html b/files/ja/web/api/node/namespaceuri/index.html new file mode 100644 index 0000000000..e074636d50 --- /dev/null +++ b/files/ja/web/api/node/namespaceuri/index.html @@ -0,0 +1,34 @@ +--- +title: Node.namespaceURI +slug: Web/API/Node/namespaceURI +tags: + - DOM + - Gecko + - Gecko DOM Reference + - 要更新 +translation_of: Web/API/Node/namespaceURI +--- +<p>{{ ApiRef() }}</p> +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> +<p>ノードの名前空間 URI か、もし指定されていなければ <code>null</code>(読み込み専用)。</p> +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> +<pre class="eval"><i>namespace</i> =<i>node</i>.namespaceURI +</pre> +<ul> + <li><code>namespace</code> は指定されたノードの名前空間 URI を表す文字列です。</li> +</ul> +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> +<p>この断片では、ノードの <a href="ja/DOM/element.localName">localName</a> と <code>namespaceURI</code> が試験されます。もし、<code>namespaceURI</code> が XUL の名前空間を返し、<code>localName</code> が "browser" を返せば、そのノードは XUL の <code><browser/></code> と理解されます。</p> +<pre>if (node.localName == "browser" && + node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { + // これは XUL browser です。 +} +</pre> +<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> +<p>これは、スコープ中の名前空間宣言の調査を基づいた、名前空間検索の結果である、計算された値ではありません。単に作成時に与えられた名前空間 URI です。</p> +<p><code>ELEMENT_NODE</code> と <code>ATTRIBUTE_NODE</code> 以外の<a href="ja/DOM/element.nodeType">種類</a>全てに属すノードと, <code><a href="ja/DOM/document.createElement">document.createElement</a></code> のような DOM Level 1 のメソッドで作られたノードでは、常に <code>namespaceURI</code> は <code>null</code> です。</p> +<p>DOM Level 2 の <a href="ja/DOM/document.createElementNS">document.createElementNS</a> メソッドを使うことで、特定の <code>namespaceURI</code> を持った要素を作ることができます。</p> +<p><a class="external" href="http://www.w3.org/TR/xml-names11/">Namespaces in XML</a> によれば、属性はその要素から名前空間を継承しません。もし属性が特定の名前空間を与えられていなければ、その属性は名前空間をもちません。</p> +<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-NodeNSname">DOM Level 2 Core: namespaceURI</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">DOM Level 2 Core: XML Namespaces</a></p> diff --git a/files/ja/web/api/node/nextsibling/index.html b/files/ja/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..1ff4c13cef --- /dev/null +++ b/files/ja/web/api/node/nextsibling/index.html @@ -0,0 +1,87 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +tags: + - DOM + - Gecko + - Node + - 要更新 +translation_of: Web/API/Node/nextSibling +--- +<div> +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><code><strong>Node.nextSibling</strong></code> という読み取り専用プロパティは指定したノードの親の{{domxref("Node.childNodes","子ノード")}}リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は <code>null</code> を返します。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>nextNode</var> = <var>node</var>.nextSibling +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<div> + <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p> + <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p> + +<div> </div> + +<div>{{domxref("Element.nextElementSibling")}} は空白ノードを飛ばして次の要素を得るのに使われます。</div> +</div> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-01<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Here is div-01<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>div-02<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Here is div-02<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> +<span class="keyword token">var</span> el <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'div-01'</span><span class="punctuation token">)</span><span class="punctuation token">.</span>nextSibling<span class="punctuation token">,</span> + i <span class="operator token">=</span> <span class="number token">1</span><span class="punctuation token">;</span> + +console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Siblings of div-01:'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + +<span class="keyword token">while</span> <span class="punctuation token">(</span>el<span class="punctuation token">)</span> <span class="punctuation token">{</span> + console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>i <span class="operator token">+</span> <span class="string token">'. '</span> <span class="operator token">+</span> el<span class="punctuation token">.</span>nodeName<span class="punctuation token">)</span><span class="punctuation token">;</span> + el <span class="operator token">=</span> el<span class="punctuation token">.</span>nextSibling<span class="punctuation token">;</span> + i<span class="operator token">++</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + +/************************************************** + The following is written to the console as it loads: + + Siblings of div-01 + + 1. #text + 2. DIV + 3. #text + 4. SCRIPT + +**************************************************/</code></pre> + +<p>上の例で、<code>#text</code> ノードがタグ間のマークアップ内に (つまり、 要素の閉じタグと次の開始タグの間) 空白がある DOM に挿入されているのが見られます。 <code>document.write</code> 文で挿入された要素の間には空白が作成されません。</p> + +<p>DOM にテキストノードが入りうるのは DOM が <code>nextSibling</code> を使って横断される時に許可されます。注記のセクションのリソースを見てください。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-nextSibling">DOM Level 1 Core: nextSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6AC54C2F">DOM Level 2 Core: nextSibling</a></li> +</ul> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + + + +<p>{{Compat("api.Node.nextSibling")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.nextElementSibling")}}</li> +</ul> diff --git a/files/ja/web/api/node/nodename/index.html b/files/ja/web/api/node/nodename/index.html new file mode 100644 index 0000000000..65daeb1074 --- /dev/null +++ b/files/ja/web/api/node/nodename/index.html @@ -0,0 +1,102 @@ +--- +title: Node.nodeName +slug: Web/API/Node/nodeName +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/nodeName +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">概要</span></div> +<p>ノードの名前を文字列で返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>str</var> = <var>node</var>.nodeName; +</pre> +<ul> + <li><code>str</code> には指定した要素の名前が文字列の形式で入ります。</li> + <li><code>nodeName</code> は読み取り専用の属性です。</li> +</ul> +<h2 id="Notes" name="Notes">注記</h2> +<p>以下の異なる種類のノードの戻り値があります。</p> +<table> + <thead> + <tr> + <th>Interface</th> + <th>nodeName</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ja/docs/DOM/Attr">Attr</a></td> + <td><a href="/ja/docs/DOM/Attr.name"><code>Attr.name</code></a> と同じ</td> + </tr> + <tr> + <td><a href="/ja/docs/DOM/CDATASection">CDATASection</a></td> + <td>"#cdata-section"</td> + </tr> + <tr> + <td><a href="/ja/docs/DOM/Comment">Comment</a></td> + <td>"#comment"</td> + </tr> + <tr> + <td><a href="/ja/docs/DOM/document">Document</a></td> + <td>"#document"</td> + </tr> + <tr> + <td><a href="/ja/docs/DOM/DocumentFragment">DocumentFragment</a></td> + <td>"#document-fragment"</td> + </tr> + <tr> + <td><a href="/ja/docs/DOM/DocumentType">DocumentType</a></td> + <td><a href="/ja/docs/DOM/DocumentType.name"><code>DocumentType.name</code></a> と同じ</td> + </tr> + <tr> + <td><a href="/ja/docs/DOM/element">Element</a></td> + <td><a href="/ja/docs/DOM/element.tagName"><code>Element.tagName</code></a> と同じ</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/API/Entity">Entity</a></td> + <td>実体名</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/API/EntityReference">EntityReference</a></td> + <td>実体参照名</td> + </tr> + <tr> + <td><a href="/ja/docs/Web/API/Notation">Notation</a></td> + <td>記法名</td> + </tr> + <tr> + <td><a href="/ja/docs/DOM/ProcessingInstruction">ProcessingInstruction</a></td> + <td><a href="/ja/docs/DOM/ProcessingInstruction.target"><code>ProcessingInstruction.target</code></a> と同じ</td> + </tr> + <tr> + <td>Text</td> + <td>"#text"</td> + </tr> + </tbody> +</table> +<h2 id="Example" name="Example">例</h2> +<p>次のマークアップ文書が与えられているとします。</p> +<pre class="brush:html"><div id="d1">hello world</div> +<input type="text" id="t"/> +</pre> +<p>そして、以下のスクリプトがあると考えてください。</p> +<pre class="brush:js">var div1 = document.getElementById("d1"); +var text_field = document.getElementById("t"); + +text_field.value = div1.nodeName; +</pre> +<p>XHTML (あるいは、他の XML 形式) の場合 text_field の値には "div" が入ります。しかし、HTML の場合 text_field の値には "DIV" が入ります。</p> +<p>注意: <a href="/ja/docs/DOM/element.tagName"><code>tagName</code></a> プロパティが使用された場合、<code>nodeName</code> は <code>tagName</code> と同じ値になります。<code>tagName</code> が未定義 (<code>undefined</code>) の時 <code>nodeName</code> はテキストノードである <code>#text</code> を返します。</p> +<h2 id="Specifications" name="Specifications">仕様</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">DOM Level 2 Core: Node.nodeName</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">DOM Level 3 Core: Node.nodeName</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/ja/web/api/node/nodeprincipal/index.html b/files/ja/web/api/node/nodeprincipal/index.html new file mode 100644 index 0000000000..3b5144c88a --- /dev/null +++ b/files/ja/web/api/node/nodeprincipal/index.html @@ -0,0 +1,20 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node +--- +<div> + {{ApiRef}}{{Fx_minversion_header("3")}}{{Non-standard_header}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p><code>nodePrincipal</code> は、ノードの現在のセキュリティ・コンテキストを表す {{interface("nsIPrincipal")}} オブジェクトを返します</p> +<p>{{note("このプロパティは、HTML 、XUL 、SVG 、MathML などの全てのノードに存在しますが、スクリプトが使用を試みた場合にのみ、 UniversalXPConnect 特権を持ちます。")}}</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>principalObj</var> = element.nodePrincipal</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>このプロパティは読取専用です。書込みを試みた場合、例外がスローされます。また、このプロパティには特権コードからのみアクセス可能です。</p> +<h2 id="Specification" name="Specification">仕様書</h2> +<p>仕様書はありません。</p> diff --git a/files/ja/web/api/node/nodetype/index.html b/files/ja/web/api/node/nodetype/index.html new file mode 100644 index 0000000000..135f0f95c7 --- /dev/null +++ b/files/ja/web/api/node/nodetype/index.html @@ -0,0 +1,88 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node/nodeType +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ノードの種類を表す整数のコードを返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">var <var>type</var> = <var>node</var>.nodeType; +</pre> +<p><code>type</code> は以下の内の何れかの unsigned short 型の値となります。</p> +<table> + <thead> + <tr> + <th scope="col">名称</th> + <th scope="col">値</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>ELEMENT_NODE</code></td> + <td>1</td> + </tr> + <tr> + <td><code>ATTRIBUTE_NODE</code> {{deprecated_inline}}</td> + <td>2</td> + </tr> + <tr> + <td><code>TEXT_NODE</code></td> + <td>3</td> + </tr> + <tr> + <td><code>CDATA_SECTION_NODE</code> {{deprecated_inline}}</td> + <td>4</td> + </tr> + <tr> + <td><code>ENTITY_REFERENCE_NODE</code> {{deprecated_inline}}</td> + <td>5</td> + </tr> + <tr> + <td><code>ENTITY_NODE</code> {{deprecated_inline}}</td> + <td>6</td> + </tr> + <tr> + <td><code>PROCESSING_INSTRUCTION_NODE</code></td> + <td>7</td> + </tr> + <tr> + <td><code>COMMENT_NODE</code></td> + <td>8</td> + </tr> + <tr> + <td><code>DOCUMENT_NODE</code></td> + <td>9</td> + </tr> + <tr> + <td><code>DOCUMENT_TYPE_NODE</code></td> + <td>10</td> + </tr> + <tr> + <td><code>DOCUMENT_FRAGMENT_NODE</code></td> + <td>11</td> + </tr> + <tr> + <td><code>NOTATION_NODE</code> {{deprecated_inline}}</td> + <td>12</td> + </tr> + </tbody> +</table> +<h2 id="Example" name="Example">例</h2> +<p>次の例は、ノードの最初の要素がコメントノードであるかをチェックし、そうでない場合にメッセージを表示するものです。</p> +<pre class="brush:js">var node = document.documentElement.firstChild; + +if (node.nodeType != Node.COMMENT_NODE) + console.log("※社内コーディングルールに沿ったコメントを記述して下さい。"); +</pre> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: Node.nodeType</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: Node.nodeType</a></li> + <li><a class="external" href="http://dom.spec.whatwg.org/#node">DOM Standard</a></li> +</ul> diff --git a/files/ja/web/api/node/nodevalue/index.html b/files/ja/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..2cfbbf795f --- /dev/null +++ b/files/ja/web/api/node/nodevalue/index.html @@ -0,0 +1,81 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/nodeValue +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ノードの値を取得または設定します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>value</var> = <var>node</var>.nodeValue</pre> +<p><code><var>node</var>.nodeValue</code> が存在する場合、 <code>value</code> はノードの値を含む文字列です。</p> +<h2 id="Notes" name="Notes">注記</h2> +<p>document 自身は、 <code>nodeValue</code> は <code>nullを返します。</code>text</p> +<p>ノード、 <code>comment</code> ノード、<code>CDATA</code> ノードでは、 <code>nodeValue</code> はノードの中身を返します。 <code>attribute</code> ノードは属性値を返します。</p> +<p> </p> +<p>以下の表は、 様々なノードの戻り値を表しています。</p> +<table> + <thead> + <tr> + <th>Attr</th> + <th>attribute の値</th> + </tr> + </thead> + <tbody> + <tr> + <td>CDATASection</td> + <td>CDATA Sectionの中身</td> + </tr> + <tr> + <td>コメント</td> + <td>commentの中身</td> + </tr> + <tr> + <td>Document</td> + <td>null</td> + </tr> + <tr> + <td>DocumentFragment</td> + <td>null</td> + </tr> + <tr> + <td>DocumentType</td> + <td>null</td> + </tr> + <tr> + <td>Element</td> + <td>null</td> + </tr> + <tr> + <td>NamedNodeMap</td> + <td>null</td> + </tr> + <tr> + <td>EntityReference</td> + <td>null</td> + </tr> + <tr> + <td>Notation</td> + <td>null</td> + </tr> + <tr> + <td>ProcessingInstruction</td> + <td>ターゲットを除く全体の内容</td> + </tr> + <tr> + <td>Text</td> + <td>the text nodeの中身</td> + </tr> + </tbody> +</table> +<p><code>nodeValue</code> が <code>null</code> と定義されている場合、値を設定しても効果はありません。</p> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D080">DOM Level 2 Core: Node.nodeValue</a></li> +</ul> diff --git a/files/ja/web/api/node/normalize/index.html b/files/ja/web/api/node/normalize/index.html new file mode 100644 index 0000000000..83026ac378 --- /dev/null +++ b/files/ja/web/api/node/normalize/index.html @@ -0,0 +1,48 @@ +--- +title: Node.normalize +slug: Web/API/Node/normalize +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/normalize +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>指定ノードの空のノードを削除し、隣接するテキストノードをひとつに纏め、文書を「正規化 (normalize)」します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>element</em>.normalize(); +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js;highlight:10;">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" +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Text.splitText"><code>Text.splitText</code></a></li> +</ul> diff --git a/files/ja/web/api/node/ownerdocument/index.html b/files/ja/web/api/node/ownerdocument/index.html new file mode 100644 index 0000000000..4277e09247 --- /dev/null +++ b/files/ja/web/api/node/ownerdocument/index.html @@ -0,0 +1,116 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/ownerDocument +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>ownerDocument</code> プロパティは、指定ノードを内包するノードツリーのトップレベルのドキュメントオブジェクトを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>document</var> = element.ownerDocument +</pre> + +<ul> + <li><code>document</code> : 指定要素の祖先である {{domxref("document")}} オブジェクト</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">var doc = p.ownerDocument; // ノード p のノードツリー上のトップレベル document オブジェクトを取得 +var html = doc.documentElement; // owner のドキュメント要素を取得 + +alert(html); // [object HTMLHtmlElement] +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>このプロパティによって返される <code>document</code> オブジェクトは、実際の HTML 文書中ですべての子ノードの属するメインオブジェクトです。<code>document</code> ノード自身に対しこのプロパティを用いた場合、戻り値は <code>null</code> となります。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Starting in Gecko 9.0 {{geckoRelease("9.0")}}, the <code>ownerDocument</code> of doctype nodes (that is, nodes for which {{domxref("Node.nodeType")}} is <code>Node.DOCUMENT_TYPE_NODE</code> or 10) is no longer <code>null</code>. Instead, the <code>ownerDocument</code> is the document on which <a href="https://developer.mozilla.org/en-US/docs/DOM/DOMImplementation.createDocumentType"><code>document.implementation.createDocumentType()</code></a> was called.</p> + +<p>[2] <a href="http://msdn.microsoft.com/en-us/library/ie/ms534315%28v=vs.85%29.aspx">http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx</a></p> diff --git a/files/ja/web/api/node/parentelement/index.html b/files/ja/web/api/node/parentelement/index.html new file mode 100644 index 0000000000..a5b9e2a3b4 --- /dev/null +++ b/files/ja/web/api/node/parentelement/index.html @@ -0,0 +1,92 @@ +--- +title: Node.parentElement +slug: Web/API/Node/parentElement +tags: + - DOM + - Element + - Node + - Property + - parent +translation_of: Web/API/Node/parentElement +--- +<div> +<div>{{APIRef("DOM")}}</div> +</div> + +<p><strong>Node.parentElement</strong>のread-only プロパティはDOM ノード上の親の {{domxref("Element")}} を返します。親ノードが存在しない場合や親ノードが DOM {{domxref("Element")}} で無い場合、<code>null</code> が返ります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>parentElement</var> = <em>node</em>.parentElement</pre> + +<p><code>parentElement</code>は現nodeの親elementです。型は必ずDOM {{domxref("Element")}} オブジェクトか<code>nullです</code>。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">if (node.parentElement) { + node.parentElement.style.color = "red"; +}</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<p>一部のブラウザーでは、<code>parentElement</code>プロパティは {{domxref("Element")}} ノードでのみ定義されており、特にテキストノードに対して定義されていない場合がある点に注意して下さい。</p> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>{{CompatVersionUnknown}} ({{domxref("Element")}} にのみ実装)</td> + <td>{{CompatVersionUnknown}} ({{domxref("Element")}} にのみ実装)</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">仕様</h2> + +<ul> + <li>{{spec("http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#parent-element", "DOM Level 4: Node.parentElement", "WD")}}</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.parentNode")}}</li> +</ul> diff --git a/files/ja/web/api/node/parentnode/index.html b/files/ja/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..7eefdd05d2 --- /dev/null +++ b/files/ja/web/api/node/parentnode/index.html @@ -0,0 +1,90 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Node +translation_of: Web/API/Node/parentNode +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>指定されたノードの DOM ツリー内の親ノードを返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>parentNode</var> = <var>node</var>.parentNode +</pre> +<ul> + <li><code>parentNode</code> : 指定ノードの親ノード。要素の親ノードは、<code>Element</code> ノード、<code>Document</code> ノード、または <code>DocumentFragment</code> になります。</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">if (node.parentNode) { + // ツリー上に既に存在しない場合を除き、 + // ツリーからノードを削除します。 + node.parentNode.removeChild(node); +}</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p><code>parentNode</code> は、以下の<a href="/ja/docs/Web/API/Node.nodeType">ノードタイプ</a>については <code>null</code> を返します : <code>Attr</code> 、<code>Document</code> 、<code>DocumentFragment</code> 、<code>Entity</code> 、<code>Notation</code></p> +<p>また、ノードが作成された直後でまだツリーに加えられていない場合も <code>null</code> を返します。</p> +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>0.2</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">仕様書</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1060184317">DOM Level 3 Core: Node.parentNode</a></li> +</ul> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li>{{Domxref("element.firstChild")}}</li> + <li>{{Domxref("element.lastChild")}}</li> + <li>{{Domxref("element.childNodes")}}</li> + <li>{{Domxref("element.nextSibling")}}</li> + <li>{{Domxref("element.previousSibling")}}</li> + <li>{{Domxref("Node.removeChild")}}</li> +</ul> diff --git a/files/ja/web/api/node/prefix/index.html b/files/ja/web/api/node/prefix/index.html new file mode 100644 index 0000000000..40db95ab12 --- /dev/null +++ b/files/ja/web/api/node/prefix/index.html @@ -0,0 +1,51 @@ +--- +title: Node.prefix +slug: Web/API/Node/prefix +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/prefix +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p><code>prefix</code> は、特定のノードの名前空間の 接頭辞 (prefix) を返します。接頭辞がなければ <code>null</code> を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>string</var> = element.prefix +</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の例は "x" をアラート表示します。</p> + +<pre class="brush:xml"><x:div onclick="alert(this.prefix)"/> +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>これは、名前空間を解するパーサを使っている場合（つまり、文書が XML mime 型の場合など）にのみ機能します。HTML 文書では機能しません。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (DOM2 より導入)</li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + + + +<p>{{Compat("api.Node.prefix")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{domxref("Node.localName")}}</li> + <li>{{domxref("Node.namespaceURI")}}</li> + <li>{{domxref("Element.prefix")}}</li> + <li>{{domxref("Attr.prefix")}}</li> +</ul> diff --git a/files/ja/web/api/node/previoussibling/index.html b/files/ja/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..5506f5fd86 --- /dev/null +++ b/files/ja/web/api/node/previoussibling/index.html @@ -0,0 +1,42 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/previousSibling +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>指定のノードの親ノードの <a href="/ja/docs/Web/API/Node.childNodes"><code>childNodes</code></a> リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は <code>null</code> を返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>previousNode</var> = <var>node</var>.previousSibling; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">// <a><b1 id="b1"/><b2 id="b2"/></a> + +alert( document.getElementById("b1").previousSibling ); // null +alert( document.getElementById("b2").previousSibling.id ); // "b1" +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + + <p>Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば <a href="/ja/docs/Web/API/Node/firstChild" title="ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。"><code>Node.firstChild</code></a> や <a href="/ja/docs/Web/API/Node/previousSibling" title="指定のノードの親ノードの childNodes リストの中で直前のノードを返します。また、指定のノードがそのリストの中で先頭の場合は null を返します。"><code>Node.previousSibling</code></a> で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。</p> + <p>より多くの情報を得るには『<a href="/ja/docs/Web/Guide/DOM/Whitespace_in_the_DOM">DOM 中の空白文字</a>』と『<a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener">W3C DOM 3 FAQ: Why are some Text nodes empty?</a>』を参照してください。</p> + +<p><code>childNode</code> リスト内の、指定ノードの次のノードの取得には {{domxref("Node.nextSibling")}} を用います。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-640FB3C8">DOM Level 3 Core: previousSibling</a></li> +</ul> diff --git a/files/ja/web/api/node/removechild/index.html b/files/ja/web/api/node/removechild/index.html new file mode 100644 index 0000000000..23b19b52ab --- /dev/null +++ b/files/ja/web/api/node/removechild/index.html @@ -0,0 +1,126 @@ +--- +title: Node.removeChild +slug: Web/API/Node/removeChild +tags: + - DOM + - Gecko + - Node +translation_of: Web/API/Node/removeChild +--- +<p><code><strong>Node.removeChild()</strong></code> メソッドは、 DOM から子ノードを取り除きます。取り除いたノードを返します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>var oldChild</em> = <em>node</em>.removeChild(<em>child</em>); +<strong>または</strong> +<em>node</em>.removeChild(<em>child</em>); +</pre> + +<ul> + <li><code>child</code> は DOM から取り除く、子ノードです。</li> + <li><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">node</span></font> は <code>child</code> の親ノードです。</li> + <li><code>oldChild</code> は 取り除かれた子ノードへの参照を保持します。 <code>oldChild</code> === <code>child</code> です。</li> +</ul> + +<p>取り除かれた子ノードはメモリ内に残りますが、 DOM の一部ではなくなります。最初の構文にある通り、取り除いたノードは、 <code>oldChild</code> オブジェクト参照を通じて、後でコード中で再利用することができます。</p> + +<p>しかし、第二の構文では <code>oldChild</code> の参照が保持されないので、コードが他の場所でノードへの参照を持っていなければ、直ちに使用できなくなり、無関係になり、ふつうはまもなくメモリから <a href="/ja/docs/Web/JavaScript/Memory_Management">自動的に削除</a>されます。</p> + +<p><code>child</code> が実際には <code>element</code> ノードの子ではない場合、このメソッドは例外を発生します。これは <code>child</code> が呼び出し時には実際に <code>element</code> の子であったものの、要素を取り除こうと呼び出されたイベントハンドラーによって削除された場合にも発生します。</p> + +<p>このメソッドでは、2つの異なる方法で例外が発生します。</p> + +<ol> + <li> + <p><code>child</code> が実際に <code>element</code> の子であり、 DOM 上に存在していたが削除された場合、このメソッドでは次の例外が発生します。</p> + + <p><code>Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node</code>.</p> + </li> + <li> + <p><code>child</code> がページの DOM 上に存在しない場合、このメソッドでは次の例外が発生します。<br> + <br> + <code>Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.</code></p> + </li> +</ol> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!-- 対象とする 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> + +</pre> + +<pre class="brush: html"><!--Sample HTML code--> + +<div id="top"> + <div id="nested"></div> +</div> +</pre> + +<pre class="brush:js">// 親ノードから指定した子要素を除去 +var d = document.getElementById("top"); +var d_nested = document.getElementById("nested"); +var throwawayNode = d.removeChild(d_nested); +</pre> + +<pre class="brush:js">// 親要素が不明、不定の場合の方法 +var node = document.getElementById("nested"); +if (node.parentNode) { + node.parentNode.removeChild(node); +} +</pre> + +<pre class="brush:js">// 要素の全ての子を除去 +var element = document.getElementById("top"); +while (element.firstChild) { + element.removeChild(element.firstChild); +} +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeChild">DOM Level 1 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1734834066">DOM Level 2 Core: removeChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1734834066">DOM Level 3 Core: removeChild</a></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Node.removeChild")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.replaceChild")}}</li> + <li>{{domxref("Node.parentNode")}}</li> + <li>{{domxref("ChildNode.remove")}}</li> +</ul> + +<div>{{APIRef("DOM")}}</div> diff --git a/files/ja/web/api/node/replacechild/index.html b/files/ja/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..49eda105e9 --- /dev/null +++ b/files/ja/web/api/node/replacechild/index.html @@ -0,0 +1,127 @@ +--- +title: Node.replaceChild +slug: Web/API/Node/replaceChild +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Node/replaceChild +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Node.replaceChild()</code></strong> メソッドは指定ノードの子ノードを別のノードに置き換えます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>replacedNode</var> = <var>parentNode</var>.replaceChild(<var>newChild</var>, <var>oldChild</var>); +</pre> + +<ul> + <li><code>newChild</code> : <code>oldChild</code> を置き換える新しいノード（既存のノードは先に取り除かれます）</li> + <li><code>oldChild</code> : 置き換えられる既存ノード</li> + <li><code>replacedNode</code> : 置き換えられたノード（<code>oldChild</code> と同じノード）</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">// <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> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<ul> + <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-785887307">DOM Level 3 Core: replaceChild</a></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome(1.0)}}</td> + <td>{{CompatGeckoDesktop(1)}}</td> + <td> IE6 (Maybe Earlier)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOpera(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Edge Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td>IE6 (Maybe Earlier)</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatOperaMobile(1.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatChrome(1.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Node.removeChild")}}</li> +</ul> diff --git a/files/ja/web/api/node/textcontent/index.html b/files/ja/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..97f73b9bbf --- /dev/null +++ b/files/ja/web/api/node/textcontent/index.html @@ -0,0 +1,115 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Node + - Property + - Reference + - プロパティ +translation_of: Web/API/Node/textContent +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>textContent</strong></code> は {{domxref ("Node")}} のプロパティで、ノードおよびその子孫のテキストの内容を表します。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> <code>textContent</code> と {{domxref("HTMLElement.innerText")}} は混同しやすいものですが、2つのプロパティは<a href="#Differences_from_innerText">重要な点が異なります</a>。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">let <var>text</var> = <var>someNode</var>.textContent +<var>someOtherNode</var>.textContent = <var>string</var> +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>文字列または {{jsxref("null")}}</p> + +<h2 id="Description" name="Description">説明</h2> + +<p><code>textContent</code> の値は状況によります。</p> + +<ul> + <li>ノードが {{domxref("document")}} または {{glossary("Doctype")}} である場合、 <code>textContent</code> は {{jsxref("null")}} を返します。 + + <div class="note"><strong>メモ:</strong> 文書全体の<em>すべての</em>テキストと <a href="/ja/docs/Web/API/CDATASection">CDATA データ</a>を取得するには、 <code><a href="/ja/docs/Web/API/document/documentElement">document.documentElement</a>.textContent</code> を使用する方法があります。</div> + </li> + <li>ノードが <a href="/ja/docs/Web/API/CDATASection">CDATA セクション</a>、コメント、<a href="/ja/docs/Web/API/ProcessingInstruction">処理命令ノード</a>、 <a href="/ja/docs/Web/API/Text">テキストノード</a>の場合、 <code>textContent</code> はそのノードの内側のテキスト、すなわち {{domxref("Node.nodeValue")}} を返します。</li> + <li>他のノードタイプの場合、<code>textContent</code> は、コメントと処理命令ノードを除く、すべての子ノードの <code>textContent</code> 属性値を連結したものを返します。 (ノードが子を持たない場合、これは空文字列になります。)</li> +</ul> + +<p>ノードの <code>textContent</code> を設定すると、そのノードの<em>すべて</em>の子が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。</p> + +<h3 id="Differences_from_innerText" name="Differences_from_innerText">innerText との違い</h3> + +<p><code>Node.textContent</code> と {{domxref("HTMLElement.innerText")}} の間の違いに混乱しないでください。名前は似ているようですが、重要な違いがあります。</p> + +<ul> + <li><code>textContent</code> は、 {{HTMLElement("script")}} と {{HTMLElement("style")}} 要素を含む、<em>すべて</em>の要素の内容を取得します。一方、 <code>innerText</code> は「人間が読める」要素のみを示します。</li> + <li><code>textContent</code> はノード内のすべての要素を返します。一方、 <code>innerText</code> はスタイルを反映し、「非表示」の要素のテキストを返しません。 + <ul> + <li>もっと言えば、 <code>innerText</code> は CSS のスタイルを考慮するので、 <code>innerText</code> の値を読み取ると最新の計算されたスタイルを保証するために {{glossary("Reflow", "再フロー")}} を起動します。 (再フローは計算が重いので、可能であれば避けるべきです。)</li> + </ul> + </li> + <li><code>textContent</code> とは異なり、 <code>innerText</code> を Internet Explorer (バージョン 11 まで) で変更すると、要素から子ノードを削除するだけでなく、子孫のテキストノードを<em>完全に破棄します</em>。他の要素または同じ要素にノードをもう一度挿入することは不可能です。</li> +</ul> + +<h3 id="Differences_from_innerHTML" name="Differences_from_innerHTML">innerHTML との違い</h3> + +<p>{{domxref("Element.innerHTML")}} は、その名が示すとおり HTML を返します。時に、 <code>innerHTML</code> を使用して要素内のテキストを受け取ったり書き込んだりすることがありますが、 <code>textContent</code> は値が HTML として解析されないので性能が良くなります。</p> + +<p>さらに、<code>textContent</code> を使用することで {{glossary("Cross-site_scripting", "XSS 攻撃")}}を防ぐことができます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>以下のような HTML の断片があります。</p> + +<pre class="brush: html"><div id="divA">This is <span>some</span> text!</div></pre> + +<p>... <code>textContent</code> を使用して、要素のテキストの内容を取得することができます。</p> + +<pre class="brush: js">let text = document.getElementById('divA').textContent; +// 変数 text の値は 'This is some text!' となります。</pre> + +<p>... また、要素のテキストを設定します。</p> + +<pre class="brush: js">document.getElementById('divA').textContent = 'This text is different!'; +// divA の HTML は次のようになります。 +// <div id="divA">This text is different!</div> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Node.textContent")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLElement.innerText")}}</li> + <li>{{domxref("Element.innerHTML")}}</li> + <li><a href="http://perfectionkills.com/the-poor-misunderstood-innerText/">More on differences between <code>innerText</code> and <code>textContent</code></a> (ブログ投稿)</li> +</ul> |