initial commit

4 files changed, 341 insertions, 0 deletions

diff --git a/files/ja/web/api/nodelist/foreach/index.html b/files/ja/web/api/nodelist/foreach/index.html
new file mode 100644
index 0000000000..887d385f47
--- /dev/null
+++ b/files/ja/web/api/nodelist/foreach/index.html
@@ -0,0 +1,123 @@
+---
+title: NodeList.prototype.forEach()
+slug: Web/API/NodeList/forEach
+tags:
+  - DOM
+  - Iterable
+  - Method
+  - NodeList
+  - Reference
+  - Web
+translation_of: Web/API/NodeList/forEach
+---
+<p>{{APIRef("DOM")}}</p>
+
+<p>{{domxref("NodeList")}} インターフェースにおける <strong><code>forEach()</code></strong> メソッドは、引数に渡されたコールバックをリストの各値のペアに対して 1 度ずつ挿入順で呼び出します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate"><var>someNodeList</var>.forEach(<var>callback</var>[, <var>thisArg</var>]);
+</pre>
+
+<h3 id="Parameters" name="Parameters">パラメーター</h3>
+
+<dl>
+ <dt><code><var>callback</var></code></dt>
+ <dd>
+ <p><code><var>someNodeList</var></code> の各要素に対して実行する関数で、3 つの引数を受け付けます。</p>
+
+ <dl>
+  <dt><code><var>currentValue</var></code></dt>
+  <dd>現在 <code><var>someNodeList</var></code> で処理されている要素です。</dd>
+  <dt><code><var>currentIndex</var></code> {{Optional_inline}}</dt>
+  <dd>現在 <code><var>someNodeList</var></code><var> </var>で処理されている <code><var>currentValue</var></code> の添字です。</dd>
+  <dt><code><var>listObj</var></code> {{Optional_inline}}</dt>
+  <dd><code>forEach()</code> を適用しようとしている <code><var>someNodeList</var></code><var> </var>です。</dd>
+ </dl>
+ </dd>
+ <dt><code><var>thisArg</var></code> {{Optional_inline}}</dt>
+ <dd><code><var>callback</var></code> 内で <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として使う値です。</dd>
+</dl>
+
+<h3 id="Return_value" name="Return_value">戻り値</h3>
+
+<p>{{jsxref('undefined')}}.</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js;highlight:[6] notranslate">let node = document.createElement("div");
+let kid1 = document.createElement("p");
+let kid2 = document.createTextNode("hey");
+let kid3 = document.createElement("span");
+
+node.appendChild(kid1);
+node.appendChild(kid2);
+node.appendChild(kid3);
+
+let list = node.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'myThisArg'
+);</pre>
+
+<p>上記のコードの結果は以下のようになります。</p>
+
+<pre class="notranslate">[object HTMLParagraphElement], 0, myThisArg
+[object Text], 1, myThisArg
+[object HTMLSpanElement], 2, myThisArg</pre>
+
+<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+
+<p>以下の {{Glossary("Polyfill","polyfill")}} を追加することで、 <a href="https://caniuse.com/#search=es5">ES5</a> をサポートする全てのブラウザで使用することができるようになります。</p>
+
+<pre class="brush: js notranslate">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+        for (var i = 0; i &lt; this.length; i++) {
+            callback.call(thisArg, this[i], i, this);
+        }
+    };
+}</pre>
+
+<p>または</p>
+
+<pre class="brush: js notranslate">if (window.NodeList &amp;&amp; !NodeList.prototype.forEach) {
+   NodeList.prototype.forEach = Array.prototype.forEach;
+}</pre>
+
+<p>多くのブラウザでは、実は上記のような方法で <code>NodeList.prototype.forEach()</code> を実装しています。(例えば、Chrome)</p>
+
+<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("WebIDL", "#es-forEach", "forEach")}}</td>
+   <td>{{Spec2("WebIDL")}}</td>
+   <td><code>iterable</code> 宣言で<code>forEach</code> を定義。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの互換性</h2>
+
+
+
+<p>{{Compat("api.NodeList.forEach")}}</p>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li>{{domxref("Node")}}</li>
+ <li>{{domxref("NodeList")}}</li>
+</ul>
diff --git a/files/ja/web/api/nodelist/index.html b/files/ja/web/api/nodelist/index.html
new file mode 100644
index 0000000000..2040ee5747
--- /dev/null
+++ b/files/ja/web/api/nodelist/index.html
@@ -0,0 +1,123 @@
+---
+title: NodeList
+slug: Web/API/NodeList
+tags:
+  - API
+  - DOM
+  - Interface
+  - NodeList
+  - インターフェイス
+translation_of: Web/API/NodeList
+---
+<div>{{APIRef("DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>NodeList</code></strong> オブジェクトは{{Glossary("Node/DOM", "ノード")}}の集合であり、 {{domxref("Node.childNodes")}} などのプロパティや {{domxref("document.querySelectorAll()")}} などのメソッドの返値として用いられます。</span></p>
+
+<div class="note">
+<p><code>NodeList</code> は <code>Array</code> とは異なりますが、 <code>forEach()</code> メソッドで処理を反復適用することは可能です。 {{jsxref("Array.from()")}} を使うことで <code>Array</code> に変換することができます。</p>
+
+<p>ただし、古いブラウザーでは <code>NodeList.forEach()</code> も <code>Array.from()</code> も実装されていない場合があります。これらの制限は {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} を使うことで回避することが可能です (この文書に詳しく書かれています)。</p>
+</div>
+
+<p>場合によっては、 <code>NodeList</code> が<em>ライブ</em>であること、すなわち DOM 内が更新されると自動的にコレクションが更新されることがあります。例えば、 {{domxref("Node.childNodes")}} はライブです。</p>
+
+<pre class="brush: js">var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // "2" と仮定すると
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // "3" が出力される
+</pre>
+
+<p>一方、 <code>NodeList</code> が<em>静的</em>である場合、すなわち DOM 内の変更がコレクションの内容に影響を与えない場合もあります。 {{domxref("document.querySelectorAll()")}} メソッドは、静的な <code>NodeList</code> を返します。</p>
+
+<p><code>NodeList</code> の各要素に反復処理を行う方法を選択したり、リストの長さをキャッシュしたりする場合は、この違いを考えておくといいでしょう。</p>
+
+<h2 id="Properties" name="Properties">プロパティ</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.length")}}</dt>
+ <dd><code>NodeList</code> に含まれるノードの数です。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<dl>
+ <dt>{{domxref("NodeList.item()")}}</dt>
+ <dd>指定されたインデックスに対応するリスト内の要素を返します。ただし、インデックスが範囲外の場合は <code>null</code> を返します。</dd>
+ <dd><code>nodeList[i]</code> のアクセスの代替手段です (この場合、<code>i</code> が範囲外の時には <code>undefined</code> が返ります)。これは JavaScript 以外の言語による DOM の実装で便利です。</dd>
+ <dt>{{domxref("NodeList.entries()")}}</dt>
+ <dd>{{jsxref("Iteration_protocols","iterator")}} を返し、これによってコードがコレクションに含まれているキー・値の組を順次処理することができます。 (この場合、キーは 0 から始まる数値で値はノードです。)</dd>
+ <dt>{{domxref("NodeList.forEach()")}}</dt>
+ <dd>指定された関数を <code>NodeList</code> の各要素に対して実行し、その要素を関数の引数として渡します。</dd>
+ <dt>{{domxref("NodeList.keys()")}}</dt>
+ <dd>{{jsxref("Iteration_protocols", "iterator")}} を返し、これによってコードがコレクションに含まれているキー・値の組のキーを順次処理することができます。 (この場合、キーは 0 から始まる数値です。)</dd>
+ <dt>{{domxref("NodeList.values()")}}</dt>
+ <dd>{{jsxref("Iteration_protocols", "iterator")}} を返し、これによってコードがコレクションに含まれているキー・値の組の値 (ノード) を順次処理することができます。</dd>
+</dl>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p><code>NodeList</code> の各要素について処理を順次適用するには、以下のような方法があります。</p>
+
+<pre class="brush: js">for (var i = 0; i &lt; myNodeList.length; i++) {
+  var item = myNodeList[i];
+}
+</pre>
+
+<p>リストの要素について処理を回すために {{jsxref("Statements/for...in", "for...in")}} や {{jsxref("Statements/for_each...in", "for each...in")}} を用いてはいけません。なぜなら、 <code>NodeList</code> のプロパティである要素に加えて、 length プロパティについても処理が適用されるため、 {{domxref("element")}} オブジェクトのみ処理すべきスクリプトではエラーが生じます。また、<code>for..in</code> で取得されるプロパティの順番は保証されていません。</p>
+
+<p>{{jsxref("Statements/for...of", "for...of")}} ループであれば、 <code>NodeList</code> オブジェクトを正しく扱うことができます。</p>
+
+<pre class="brush: js">var list = document.querySelectorAll('input[type=checkbox]');
+for (var checkbox of list) {
+  checkbox.checked = true;
+}</pre>
+
+<p>最近のブラウザでは、イテレーターに基づくメソッドとして {{domxref("NodeList.forEach()", "forEach()")}}, {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, {{domxref("NodeList.keys()", "keys()")}} に対応しています。</p>
+
+<p>また、 Internet Explorer と互換性がある手法として、反復に {{jsxref("Array.forEach()", "Array.prototype.forEach")}} を使用することができます。</p>
+
+<pre class="brush: js">var list = document.querySelectorAll('input[type=checkbox]');
+Array.prototype.forEach.call(list, function (checkbox) {
+  checkbox.checked = true;
+});</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-nodelist', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM WHATWG') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM3 Core') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM2 Core') }}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}</td>
+   <td>{{ Spec2('DOM1') }}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
+
+<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
+
+<p>{{Compat("api.NodeList")}}</p>
diff --git a/files/ja/web/api/nodelist/item/index.html b/files/ja/web/api/nodelist/item/index.html
new file mode 100644
index 0000000000..2e978939ef
--- /dev/null
+++ b/files/ja/web/api/nodelist/item/index.html
@@ -0,0 +1,41 @@
+---
+title: NodeList.item
+slug: Web/API/NodeList/item
+tags:
+  - DOM
+  - Gecko
+  - Gecko DOM Reference
+  - NodeList
+translation_of: Web/API/NodeList/item
+---
+<div>
+ {{ApiRef}}</div>
+<h2 id="Summary" name="Summary">概要</h2>
+<p><a href="/ja/docs/DOM/NodeList"><code>NodeList</code></a> 中の、引数に指定するインデックスの位置にあるノードを取得します。</p>
+<h2 id="Syntax" name="Syntax">構文</h2>
+<pre class="syntaxbox"><var>nodeItem</var> = <var>nodeList</var>.item(<var>index</var>)
+</pre>
+<ul>
+ <li><code>nodeList</code> : <code>NodeList</code> 。これは <a href="/ja/docs/DOM/Node.childNodes" title="DOM/Node.childNodes">childNodes</a> などの DOM プロパティやメソッドで取得可能。</li>
+ <li><code>index</code> : 取得するノードのインデックス。最初のノードの <var>index</var> は 0 となる。</li>
+ <li><code>nodeItem</code> : <code>nodeList</code> 中の、<code>item</code> メソッドに指定した <var>index</var> の位置にあるノード。</li>
+</ul>
+<p>JavaScript にはノードリスト中のアイテムの取得に以下のような構文を用いる事も可能です。</p>
+<pre class="syntaxbox"><var>nodeItem</var> = <var>nodeList</var>[<var>index</var>]
+</pre>
+<h2 id="Example" name="Example">例</h2>
+<pre class="brush:js">var tables = document.getElementsByTagName("table"); // DOM 中に含まれるすべての table 要素のノードリストを取得
+var secondTable = tables.item(1); // DOM 中の 2 番目の table 要素
+
+
+// tables[1] でも取得可能。即ちアイテムが存在した場合、以下は true となる
+alert( tables.item(1) === tables[1] );
+</pre>
+<h2 id="Notes" name="Notes">注記</h2>
+<p>指定した <var>index</var> が範囲外の場合、このメソッドは例外をスローするのではなく、<code>null</code> を返します。</p>
+<p><code>item()</code> メソッドは {{domxref("Element")}} や {{domxref("Node")}} のメソッドではなく、 {{domxref("NodeList")}} のメソッドです。</p>
+<h2 id="Specification" name="Specification">仕様書</h2>
+<ul>
+ <li><a href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-item">DOM Level 1 Core: NodeList.item()</a></li>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-844377136">DOM Level 2 Core: NodeList.item()</a></li>
+</ul>
diff --git a/files/ja/web/api/nodelist/length/index.html b/files/ja/web/api/nodelist/length/index.html
new file mode 100644
index 0000000000..b137cc3859
--- /dev/null
+++ b/files/ja/web/api/nodelist/length/index.html
@@ -0,0 +1,54 @@
+---
+title: NodeList.length
+slug: Web/API/NodeList/length
+tags:
+  - API
+  - DOM
+  - Gecko
+  - プロパティ
+  - リファレンス
+translation_of: Web/API/NodeList/length
+---
+<div>{{APIRef("DOM")}}</div>
+
+<h2 id="Summary" name="Summary">概要</h2>
+
+<p><code>length</code> は <code>NodeList</code> 内の item の数を返します。</p>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: js"><em>numItems</em> = <em>nodeList</em>.length
+</pre>
+
+<ul>
+ <li><code>numItems</code> は <code>NodeList</code> 内の item 数に相当する整数値 (integer) です。</li>
+</ul>
+
+<h2 id="Example" name="Example">例</h2>
+
+<pre class="brush: js">// 文書内のすべての段落
+var items = document.getElementsByTagName("p");
+// リスト中のすべてのアイテムに対して実行し、
+// HTML の文字列として要素全体を追加
+var gross = "";
+for (var i = 0; i &lt; items.length; i++) {
+  gross += items[i].innerHTML;
+}
+// gross には HTML のすべての段落が入ります
+</pre>
+
+<h2 id="Notes" name="Notes">メモ</h2>
+
+<p>参照内のこのページの場所に関わらず、 <code>length</code> は <a href="/ja/docs/Web/API/element">Element</a> ではなく、 <code>NodeList</code> のプロパティです。 NodeList オブジェクトは <a href="/ja/docs/Web/API/document/getElementsByTagName">document.getElementsByTagName</a> を始めとして、いくつもの DOM メソッドから返されます。</p>
+
+<p><code>length</code> は DOM プログラミングでとても有名なプロパティです。リストの長さを検査したり (存在するかどうかを確認)、上記の例に見られるように、ループの反復子して使用するのが普通です。</p>
+
+<h2 id="Specification" name="Specification">仕様書</h2>
+
+<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length</a></p>
+
+<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.NodeList.length")}}</p>