Skip to content

Commit ed6203f

Browse files
mfuji09mfuji09
committed
2021/11/08 時点の英語版に同期
1 parent 0e7fc92 commit ed6203f

File tree

7 files changed

+353
-425
lines changed

7 files changed

+353
-425
lines changed

‎files/ja/web/api/node/childnodes/index.md

+66-93
Original file line numberDiff line numberDiff line change
@@ -2,100 +2,73 @@
22
title: Node.childNodes
33
slug: Web/API/Node/childNodes
44
tags:
5-
- API
6-
- DOM
7-
- DOMリファレンス
85
- プロパティ
96
- リファレンス
7+
- 読み取り専用
8+
browser-compat: api.Node.childNodes
109
translation_of: Web/API/Node/childNodes
1110
---
12-
<p>{{ ApiRef() }}</p>
13-
14-
<p><code><strong>Node.childNodes</strong></code>読み取り専用プロパティは、最初の子ノードにインデックス0が割り当てられている、指定された要素の子{{domxref("Node","nodes")}}の現在の{{domxref("NodeList")}}を返します。</p>
15-
16-
<h2 id="構文">構文</h2>
17-
18-
<pre class="syntaxbox">let <var>nodeList</var> = <var>elementNodeReference</var>.childNodes;
19-
</pre>
20-
21-
<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>
22-
23-
<h3 id="簡単な使用方法">簡単な使用方法</h3>
24-
25-
<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// 変数pargは&lt;p&gt;要素へのオブジェクト参照です</span>
26-
27-
<span class="comment token">// まず、pargが子ノードを持っているかをチェックします</span>
28-
<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>
29-
<span class="keyword token">var</span> children <span class="operator token">=</span> parg<span class="punctuation token">.</span>childNodes<span class="punctuation token">;</span>
30-
31-
<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">&lt;</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>
32-
<span class="comment token">// for文を使って各ノードにchildren[i]としてアクセスします
33-
// 注意！ NodeListは不変ではないので、ノードを追加したり削除したりするとchildren.lengthは変化します</span>
34-
<span class="punctuation token">}</span>
35-
<span class="punctuation token">}</span></code></pre>
36-
37-
<h3 id="ノードから全ての子を削除する">ノードから全ての子を削除する</h3>
38-
39-
<pre class="brush:js line-numbers language-js"><code class="language-js"><span class="comment token">// これは一例ですが、この方法でノードからすべての子ノードを削除することができます</span>
40-
<span class="comment token">// let box = document.getElementById(/**/)</span>;
41-
42-
<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">{
43-
// NodeListは不変ではないので、毎処理ごとにbox.firstChildは変化します</span>
44-
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>
45-
<span class="punctuation token">}</span></code></pre>
46-
47-
<h2 id="注記">注記</h2>
48-
49-
<p>ノードのコレクション内の項目はオブジェクトであり、文字列ではありません。node オブジェクトからデータを取得するには、そのプロパティ (たとえば<code>elementNodeReference.childNodes[1].nodeName</code> で名前を取得) を使用します。<br>
50-
<br>
51-
<code>document</code>オブジェクト自体には Doctype 宣言と root 要素 の2つの子があり、通常は<code>documentElement</code>と呼ばれます。 （(X)HTML文書ではこれが<code>HTML</code>要素です）<br>
52-
<br>
53-
<code>childNodes</code>にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに{{domxref("ParentNode.children")}} を使用してください。</p>
54-
55-
<h2 id="仕様">仕様</h2>
56-
57-
<table class="standard-table">
58-
<thead>
59-
<tr>
60-
<th scope="col">仕様</th>
61-
<th scope="col">ステータス</th>
62-
<th scope="col">コメント</th>
63-
</tr>
64-
</thead>
65-
<tbody>
66-
<tr>
67-
<td>{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}</td>
68-
<td>{{Spec2('DOM WHATWG')}}</td>
69-
<td>変更なし</td>
70-
</tr>
71-
<tr>
72-
<td>{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
73-
<td>{{Spec2('DOM3 Core')}}</td>
74-
<td>変更なし</td>
75-
</tr>
76-
<tr>
77-
<td>{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}</td>
78-
<td>{{Spec2('DOM2 Core')}}</td>
79-
<td>変更なし</td>
80-
</tr>
81-
<tr>
82-
<td>{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}</td>
83-
<td>{{Spec2('DOM1')}}</td>
84-
<td>初回定義</td>
85-
</tr>
86-
</tbody>
87-
</table>
88-
89-
<h2 id="ブラウザの互換性">ブラウザの互換性</h2>
90-
91-
<p>{{Compat("api.Node.childNodes")}}</p>
92-
93-
<h2 id=".E5.8F.82.E7.85.A7" name=".E5.8F.82.E7.85.A7">関連情報</h2>
94-
95-
<ul>
96-
<li>{{ domxref("Node.firstChild") }}</li>
97-
<li>{{ domxref("Node.lastChild") }}</li>
98-
<li>{{ domxref("Node.nextSibling") }}</li>
99-
<li>{{ domxref("Node.previousSibling") }}</li>
100-
<li>{{ domxref("Element.children") }}</li>
101-
</ul>
11+
{{APIRef("DOM")}}
12+
13+
**`childNodes`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティであり、{{domxref("NodeList")}} で指定された要素の子{{domxref("Node", "ノード", "", 1)}}の生きたリストを返し、最初の子ノードは位置 `0` に割り当てられます。子ノードには要素、テキスト、コメントが含まれます。
14+
15+
> **Note:** {{domxref("NodeList")}} が生きたリストであるというのは、新しい子が追加されたり取り除かれたりするたびに、内容が変化するという意味です。
16+
17+
ノードのコレクションの項目はオブジェクトであり、文字列ではありません。ノードオブジェクトからデータを取得するには、そのプロパティを使用してください。例えば、最初の子ノードの名前を取得するには、 `elementNodeReference.childNodes[0].nodeName` を使うことで実現できます。
18+
19+
{{domxref("document")}} オブジェクト自体には 2 つの子があります。文書型宣言と、ルート要素、ふつうは `documentElement` として参照されます。 HTML 文書の場合、後者は {{HTMLElement("html")}} 要素です。
20+
21+
覚えておくべき重要なこととして、 `childNodes` には*すべての*子ノードが含まれ、テキストやコメントなどの要素以外のノードが含まれることです。
22+
要素のみが含まれるコレクションを取得するのであれば、 {{domxref("Element.children")}} を代わりに使用してください。
23+
24+
## 値
25+
26+
このノードの子を含む生きた {{domxref("NodeList")}} です。
27+
28+
> **Note:** `childNodes` を複数回呼び出しても、*同じ* {{domxref("NodeList")}} が返されます。
29+
30+
## 例
31+
32+
### 単純な使用方法
33+
34+
```js
35+
// parg は <p> 要素へのオブジェクト参照です
36+
37+
// まず、要素に子ノードがあるかどうかをチェックします
38+
if (parg.hasChildNodes()) {
39+
let children = parg.childNodes;
40+
41+
for (let i = 0; i < children.length; i++) {
42+
// それぞれの子を children[i] として処理します
43+
// 注: リストは生きています。子を追加したり取り除いたりすると、リストの `length` が変わります
44+
}
45+
}
46+
```
47+
48+
### ノードからすべてての子を削除
49+
50+
```js
51+
// これはあるノードからすべての子を取り除くための一つの方法です
52+
// box はある要素へのオブジェクト参照です
53+
54+
while (box.firstChild) {
55+
// リストは生きているので、呼び出されるたびにインデックスが変わります
56+
box.removeChild(box.firstChild);
57+
}
58+
```
59+
60+
## 仕様書
61+
62+
{{Specifications}}
63+
64+
## ブラウザーの互換性
65+
66+
{{Compat}}
67+
68+
## 関連情報
69+
70+
- {{domxref("Node.firstChild")}}
71+
- {{domxref("Node.lastChild")}}
72+
- {{domxref("Node.nextSibling")}}
73+
- {{domxref("Node.previousSibling")}}
74+
- {{domxref("Element.children")}}

‎files/ja/web/api/node/firstchild/index.md

+63-40
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,68 @@
22
title: Node.firstChild
33
slug: Web/API/Node/firstChild
44
tags:
5-
- DOM
6-
- Gecko
7-
- Gecko DOM Reference
8-
- Node
5+
- プロパティ
6+
- リファレンス
7+
browser-compat: api.Node.firstChild
98
translation_of: Web/API/Node/firstChild
109
---
11-
<div>
12-
{{ApiRef}}</div>
13-
<h2 id="Summary" name="Summary">概要</h2>
14-
<p>ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ <code>null</code> を返します。ノードが <code>Document</code> の場合は、その直接の子のリスト内の最初のノードを返します。</p>
15-
<h2 id="Syntax" name="Syntax">構文</h2>
16-
<pre class="syntaxbox">var <var>childNode</var> = <var>node</var>.firstChild;
17-
</pre>
18-
<ul>
19-
<li><code>childNode</code> : node の最初の子ノードがあればその参照、無い場合は <code>null</code></li>
20-
</ul>
21-
<h2 id="Example" name="Example">例</h2>
22-
<p>次の例では <code>firstChild</code> の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。</p>
23-
<pre class="brush:html">&lt;p id="para-01"&gt;
24-
&lt;span&gt;First span&lt;/span&gt;
25-
&lt;/p&gt;
26-
27-
&lt;script type="text/javascript"&gt;
28-
var p01 = document.getElementById('para-01');
29-
alert(p01.firstChild.nodeName)
30-
&lt;/script&gt;</pre>
31-
<p>上記の例では alert は'#text'を表示します。なぜなら開始タグ &lt;p&gt; の末端と &lt;span&gt; の間にある空白を調整するためにテキストノードが挿入されているからです。<b>どんな</b> 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。</p>
32-
<p>その他の #text ノードは閉じタグ &lt;/span&gt; と &lt;/p&gt; の間に挿入されていみます。</p>
33-
<p>もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。</p>
34-
<pre class="brush:html">&lt;p id="para-01"&gt;&lt;span&gt;First span&lt;/span&gt;&lt;/p&gt;
35-
36-
&lt;script type="text/javascript"&gt;
37-
var p01 = document.getElementById('para-01');
38-
alert(p01.firstChild.nodeName)
39-
&lt;/script&gt;
40-
</pre>
41-
<p>今度は alert は 'SPAN' を表示するでしょう。</p>
42-
<h2 id="Specification" name="Specification">仕様書</h2>
43-
<ul>
44-
<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>
45-
<li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></li>
46-
</ul>
10+
{{APIRef("DOM")}}
11+
12+
**`firstChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は `null` を返します。
13+
14+
このノードが {{domxref("Document")}} であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。
15+
16+
> **Note:** このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。
17+
> {{domxref("Text")}} または {{domxref("Comment")}} ノードになることがあります。
18+
> 他の要素の子である最初の {{domxref("Element")}} を取得したい場合は、 {{domxref("Element.firstElementChild")}} を使用することを検討してください。
19+
20+
## 値
21+
22+
{{domxref("Node")}}、または存在しなければ `null`。
23+
24+
## 例
25+
26+
次の例では `firstChild` の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかを示しています。
27+
28+
```html
29+
<p id="para-01">
30+
<span>最初の span</span>
31+
</p>
32+
33+
<script>
34+
const p01 = document.getElementById('para-01');
35+
console.log(p01.firstChild.nodeName);
36+
</script>
37+
```
38+
39+
上記の例では[コンソール](/ja/docs/Web/API/console)に '#text' と表示されます。開始タグ `<p>` の末尾と `<span>` タグとの間にある空白を調整するためにテキストノードが挿入されているためです。**あらゆる**[ホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)は、単一の空白から複数のスペース、改行、タブに至るまで、 1 つの `#text` ノードを生成します。
40+
41+
`#text` ノードはもう 1 つ、閉じタグ `</span>` と `</p>` の間に挿入されます。
42+
43+
ホワイトスペースをソースから取り除くと、 #text ノードは挿入されず、 span 要素がその段落の最初の子になります。
44+
45+
```html
46+
<p id="para-01"><span>最初の span</span></p>
47+
48+
<script>
49+
const p01 = document.getElementById('para-01');
50+
console.log(p01.firstChild.nodeName);
51+
</script>
52+
```
53+
54+
コンソールには 'SPAN' と表示されるようになります。
55+
56+
`node.firstChild` が `#text` や `#comment` ノードを返す問題を回避するには、 {{domxref("Element.firstElementChild")}} を使用すると最初の要素ノードのみを返すことができます。
57+
58+
## 仕様書
59+
60+
{{Specifications}}
61+
62+
## ブラウザーの互換性
63+
64+
{{Compat}}
65+
66+
## 関連情報
67+
68+
- {{domxref("Element.firstElementChild")}}
69+
- {{domxref("Node.lastChild")}}

‎files/ja/web/api/node/lastchild/index.md

+33-22
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,38 @@
22
title: Node.lastChild
33
slug: Web/API/Node/lastChild
44
tags:
5-
- DOM
6-
- Gecko
7-
- Gecko DOM Reference
8-
- Node
5+
- プロパティ
6+
- リファレンス
7+
- 読み取り専用
8+
browser-compat: api.Node.lastChild
99
translation_of: Web/API/Node/lastChild
1010
---
11-
<div>
12-
{{ApiRef}}</div>
13-
<h2 id="Summary" name="Summary">概要</h2>
14-
<p><strong>lastChild</strong> はノードの子要素の内、最後のものを返します。</p>
15-
<h2 id="Syntax_and_Values" name="Syntax_and_Values">構文</h2>
16-
<pre class="syntaxbox">var last_child = element.lastChild
17-
</pre>
18-
<h2 id="Description" name="Description">説明</h2>
19-
<p><code>lastChild</code> として返されるのはノードです。その親が要素であるならば、子ノードは一般的に Element ノード、Text ノード、Comment ノード となります。子要素を持たない場合は <code>null</code> が返されます。</p>
20-
<h2 id="Example" name="Example">例</h2>
21-
<pre class="brush:js">var tr = document.getElementById("row1"); // table 要素の特定の行を取得
22-
var corner_td = tr.lastChild; // 特定の行の内、最後のセルを取得
23-
</pre>
24-
<h2 id="Specification" name="Specification">仕様書</h2>
25-
<ul>
26-
<li>{{Spec("http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB", "DOM Level 2: lastChild", "REC")}}</li>
27-
<li>{{Spec("http://dom.spec.whatwg.org/#dom-node-lastchild", "DOM Standard: lastChild")}}</li>
28-
</ul>
11+
{{APIRef("DOM")}}
12+
13+
**`lastChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、このノードの最後の子ノードを返します。
14+
親ノードが要素であった場合、子ノードはふつう、要素ノード、テキストノード、コメントノードの何れかです。
15+
子要素がない場合は `null` を返します。
16+
17+
## Value
18+
19+
このノードの最後の子である {{domxref("Node")}}、または子ノードがなければ `null` です。
20+
21+
## 例
22+
23+
```js
24+
const tr = document.getElementById("row1");
25+
const corner_td = tr.lastChild;
26+
```
27+
28+
## 仕様書
29+
30+
{{Specifications}}
31+
32+
## ブラウザーの互換性
33+
34+
{{Compat}}
35+
36+
## 関連情報
37+
38+
- {{domxref("Node.firstChild")}}
39+
- {{domxref("Element.lastElementChild")}}

0 commit comments

Comments
 (0)