Correct the title (Java Scirpt->JavaScript) (#1894)

fixing obvious typo in the title and correcting others.

1 files changed, 55 insertions, 55 deletions

diff --git a/files/ja/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/ja/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html
index 53863ac83c..5a2c3ebb02 100644
--- a/files/ja/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html
+++ b/files/ja/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html
@@ -1,5 +1,5 @@
 ---
-title: Java Scirpt と DOM インターフェイスによる HTML の表の操作
+title: JavaScript と DOM インターフェイスによる HTML の表の操作
 slug: >-
   Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
 tags:
@@ -15,10 +15,10 @@ translation_of: >-
 
 <h2 id="Introduction" name="Introduction">はじめに</h2>
 
-<p>この記事では、強力で基本的な DOM レベル 1 のメソッドと、それを JavaScript からどのように使用するかを概観します。どのようにして HTML 要素を動的に生成、アクセス、制御、削除するかを学ぶことができます。ここで紹介する DOM メソッドは HTML に限ったものではなく、XML に対しても用いることができます。ここで用意しているデモは、 Firefox のすべてのバージョンや IE 5以上を含むすべての最近のブラウザーで正常に動作します。</p>
+<p>この記事では、強力で基本的な DOM レベル 1 のメソッドと、それを JavaScript からどのように使用するかを概観します。どのようにして HTML 要素を動的に生成、アクセス、制御、削除するかを学ぶことができます。ここで紹介する DOM メソッドは HTML に限ったものではなく、XML に対しても用いることができます。ここで用意しているデモは、Firefox のすべてのバージョンや IE 5 以上を含むすべての最近のブラウザーで正常に動作します。</p>
 
-<div class="blockIndicator note">
-<p>ここで紹介する DOM メソッドは ドキュメントオブジェクトモデル (コア) レベル 1 仕様の一部に過ぎません。 DOM レベル 1 には HTML ドキュメント特有のメソッド (DOM 1 HTML) と共に、一般的なドキュメントアクセスと操作 (DOM 1 コア) のためのメソッドが含まれています。</p>
+<div class="notecard note">
+<p>ここで紹介する DOM メソッドは ドキュメントオブジェクトモデル (コア) レベル 1 仕様の一部に過ぎません。DOM レベル 1 には HTML ドキュメント特有のメソッド (DOM 1 HTML) と共に、一般的なドキュメントアクセスと操作 (DOM 1 コア) のためのメソッドが含まれています。</p>
 </div>
 
 <h2 id="Overview_of_Sample1.html" name="Overview_of_Sample1.html">例: 動的な HTML の表の生成 (<code>Sample1.html</code>)</h2>
@@ -30,7 +30,7 @@ translation_of: >-
 
 <h3 id="JavaScript">JavaScript</h3>
 
-<pre class="brush: js; notranslate">function generate_table() {
+<pre class="brush: js">function generate_table() {
   // get the reference for the body
   var body = document.getElementsByTagName("body")[0];
 
@@ -70,7 +70,7 @@ translation_of: >-
 <p>要素とテキストノードを生成する順序を意識しながら確認していってください。</p>
 
 <ol>
- <li>まず、 <code>&lt;table&gt;</code> 要素を生成しました。</li>
+ <li>まず、<code>&lt;table&gt;</code> 要素を生成しました。</li>
  <li>次に <code>&lt;tbody&gt;</code> 要素生成し、これが <code>&lt;table&gt;</code> 要素の子となります。</li>
  <li>次に、ループを用いて <code>&lt;tr&gt;</code> 要素を生成し、これらが <code>&lt;tbody&gt;</code> 要素の子となります。</li>
  <li>それぞれの <code>&lt;tr&gt;</code> 要素に対して、ループを用いて <code>&lt;td&gt;</code> 要素を生成し、これらが <code>&lt;tr&gt;</code> の子となります。</li>
@@ -82,27 +82,27 @@ translation_of: >-
 <ol>
  <li>まず、各テキストノードをその親である <code>&lt;td&gt;</code> 要素へ追加します。
 
-  <pre class="notranslate">cell.appendChild(cellText);</pre>
+  <pre class="brush: js">cell.appendChild(cellText);</pre>
  </li>
  <li>次に、各 <code>&lt;td&gt;</code> 要素をその親である <code>&lt;tr&gt;</code> 要素へと追加します。
-  <pre class="notranslate">row.appendChild(cell);</pre>
+  <pre class="brush: js">row.appendChild(cell);</pre>
  </li>
  <li>次に、各 <code>&lt;tr&gt;</code> 要素をその親である <code>&lt;tbody&gt;</code> 要素へと追加します。
-  <pre class="notranslate">tblBody.appendChild(row);</pre>
+  <pre class="brush: js">tblBody.appendChild(row);</pre>
  </li>
- <li>次に、 <code>&lt;tbody&gt;</code> 要素をその親である <code>&lt;table&gt;</code> 要素へと追加します。
-  <pre class="notranslate">tbl.appendChild(tblBody);</pre>
+ <li>次に、<code>&lt;tbody&gt;</code> 要素をその親である <code>&lt;table&gt;</code> 要素へと追加します。
+  <pre class="brush: js">tbl.appendChild(tblBody);</pre>
  </li>
- <li>次に、 <code>&lt;table&gt;</code> 要素をその親である <code>&lt;body&gt;</code> 要素へと追加します。
-  <pre class="notranslate">body.appendChild(tbl);</pre>
+ <li>次に、<code>&lt;table&gt;</code> 要素をその親である <code>&lt;body&gt;</code> 要素へと追加します。
+  <pre class="brush: js">body.appendChild(tbl);</pre>
  </li>
 </ol>
 
-<p>この手法を覚えておきましょう。 W3C DOM によるプログラミングでは頻繁に使うことになります。まず、トップダウンで要素を作成し、子を親へとボトムアップで追加していくのです。</p>
+<p>この手法を覚えておきましょう。W3C DOM によるプログラミングでは頻繁に使うことになります。まず、トップダウンで要素を作成し、子を親へとボトムアップで追加していくのです。</p>
 
 <p>JavaScript コードによって生成される HTML マークアップはこのようになります。</p>
 
-<pre class="notranslate">...
+<pre class="brush: html">...
 &lt;table border="2"&gt;
 &lt;tbody&gt;
 &lt;tr&gt;&lt;td&gt;セルは 0 行 0 列 です&lt;/td&gt;&lt;td&gt;セルは 0 行 1 列 です&lt;/td&gt;&lt;/tr&gt;
@@ -114,7 +114,7 @@ translation_of: >-
 
 <p>このコードによって生成される <code>&lt;table&gt;</code> 要素とその子要素を示す DOM オブジェクトツリーはこのようになります。</p>
 
-<p><img alt="Image:sample1-tabledom.jpg" src="/@api/deki/files/833/=Sample1-tabledom.jpg"></p>
+<p><img src="sample1-tabledom.jpg"></p>
 
 <p>ほんの幾つかの DOM メソッドを使用するだけでこのように表と内部の子要素を構築できます。生成しようと計画している構造のツリーモデルを頭に置いておくことを忘れないようにしてください。そうすれば必要なコードを書くのは簡単です。図 1 の <code>&lt;table&gt;</code> ツリーでは <code>&lt;table&gt;</code> 要素は <code>&lt;tbody&gt;</code> 要素という子を 1 つ持ちます。<code>&lt;tbody&gt;</code> は 2 つ子を持ちます。各 <code>&lt;tbody&gt;</code> の子 (<code>&lt;tr&gt;</code>) は子を 1 つ (<code>&lt;td&gt;</code>) 持ちます。最後に各 <code>&lt;td&gt;</code> はテキストノードという子を 1 つ持ちます。</p>
 
@@ -124,7 +124,7 @@ translation_of: >-
 
 <h3 id="HTML_2">HTML</h3>
 
-<pre class="brush: html; notranslate">&lt;body&gt;
+<pre class="brush: html">&lt;body&gt;
   &lt;input type="button" value="Set paragraph background color" onclick="set_background()"&gt;
   &lt;p&gt;hi&lt;/p&gt;
   &lt;p&gt;hello&lt;/p&gt;
@@ -132,12 +132,12 @@ translation_of: >-
 
 <h3 id="JavaScript_2">JavaScript</h3>
 
-<pre class="brush: js; notranslate">function set_background() {
-  // body 要素全てのリストを取得します (あるのは 1 つだけですが)
+<pre class="brush: js">function set_background() {
+  // body 要素すべてのリストを取得します (あるのは 1 つだけですが)
   // それからその要素の 0 番目 (最初) の要素を選択します
   myBody = document.getElementsByTagName("body")[0];
 
-  // 今度は body の子供である p 要素を全て取得します
+  // 今度は body の子供である p 要素をすべて取得します
   myBodyElements = myBody.getElementsByTagName("p");
 
   // p 要素のリストから 2 番目の項目を取得します
@@ -150,18 +150,18 @@ translation_of: >-
 <p>この例では、<code>myP</code> 変数を body 中の 2 つ目の <code>p</code> 要素を表す DOM オブジェクトに設定しています。</p>
 
 <ol>
- <li>まず、全ての body 要素リストをこのようにして取得します。
-  <pre class="notranslate">myBody = document.getElementsByTagName("body")[0]</pre>
+ <li>まず、すべての body 要素リストをこのようにして取得します。
+  <pre class="brush: js">myBody = document.getElementsByTagName("body")[0]</pre>
   有効な HTML 文書では body 要素は 1 つしかないため、このリストは 1 項目だけを持ちます。そのリストの最初の要素を <code>[0]</code> を使って選択することで取得します。</li>
- <li>次に、 <code>body</code> の子である全ての <code>p</code> 要素をこのようにして取得します。
-  <pre class="notranslate">myBodyElements = myBody.getElementsByTagName("p");</pre>
+ <li>次に、 <code>body</code> の子であるすべての <code>p</code> 要素をこのようにして取得します。
+  <pre class="brush: js">myBodyElements = myBody.getElementsByTagName("p");</pre>
  </li>
- <li>そして <code>p</code> 要素のリストから二つ目の項目をこのようにして取得します。
-  <pre class="notranslate">myP = myBodyElements[1];</pre>
+ <li>そして <code>p</code> 要素のリストから 2 つ目の項目をこのようにして取得します。
+  <pre class="brush: js">myP = myBodyElements[1];</pre>
  </li>
 </ol>
 
-<p><img alt="Image:sample2a2.jpg" src="/@api/deki/files/834/=Sample2a2.jpg"></p>
+<p><img src="sample2a2.jpg"></p>
 
 <p>一旦 HTML 要素に対応する DOM オブジェクトを取得すれば、そのプロパティを設定することできます。例えば、背景色のスタイルプロパティを設定したいのであればこのように加えるだけです。</p>
 
@@ -173,51 +173,51 @@ translation_of: >-
 
 <p>document オブジェクトを使用して <code>createTextNode</code> メソッドを呼び出し、テキストノードを生成します。テキスト内容を渡す必要があるだけです。返値はそのテキストノードを表すオブジェクトとなります。</p>
 
-<pre class="notranslate">myTextNode = document.createTextNode("world");
+<pre class="brush: js">myTextNode = document.createTextNode("world");
 </pre>
 
 <p>これはそのテキストデータが「world」である <code>TEXT_NODE</code> 型 (テキスト断片) のノードを生成し、myTextNode がこのノードオブジェクトへの参照だということです。このテキストを HTML ページに挿入するには、このテキストノードを何か他のノード要素の子供にする必要があります。</p>
 
 <h3 id="Inserting_Elements_with_appendChild.28...29" name="Inserting_Elements_with_appendChild.28...29">appendChild(..) による要素の挿入</h3>
 
-<p>そこで myP.appendChild({{ mediawiki.external('ノード要素') }}) を使って、その要素を 2 つ目の <code>&lt;p&gt;</code> 要素の子とします。</p>
+<p>そこで <code>myP.appendChild(<var>node_element</var>)</code> を使って、その要素を 2 つ目の <code>&lt;p&gt;</code> 要素の子とします。</p>
 
-<pre class="notranslate">myP.appendChild(myTextNode);
+<pre class="brush: js">myP.appendChild(myTextNode);
 </pre>
 
-<p>例を見て頂いたところで、単語 hello と world が一緒になっていることに注目して下さい: helloworld。ご覧のように外見的には、HTML ページを見ると 2 つのテキスト hello と world は単一ノードのように見えますが、ドキュメントモデルでは 2つのノードがあるのです。 2つ目のノードは <code>TEXT_NODE</code> 型の新しいノードで、2つ目の <code>&lt;p&gt;</code> タグの 2つ目の子供です。以下の図は文書ツリー中につい先程生成された Text Node オブジェクトを表しています。</p>
+<p>例を見て頂いたところで、単語 hello と world が一緒になっていることに注目して下さい: helloworld。ご覧のように外見的には、HTML ページを見ると 2 つのテキスト hello と world は単一ノードのように見えますが、ドキュメントモデルでは 2つのノードがあるのです。2 つ目のノードは <code>TEXT_NODE</code> 型の新しいノードで、2つ目の <code>&lt;p&gt;</code> タグの 2つ目の子供です。以下の図は文書ツリー中につい先程生成された Text Node オブジェクトを表しています。</p>
 
-<p><img alt="Image:sample2b2.jpg" src="/@api/deki/files/835/=Sample2b2.jpg"></p>
+<p><img src="sample2b2.jpg"></p>
 
-<div class="blockIndicator note">
-<p><code>createTextNode()</code> と <code>appendChild</code> は、 hello と world という単語の間にホワイトスペースを入れる簡単な方法です。もう一つの重要な注意点は、 hello の後に world という単語が追加されたように、 <code>appendChild</code> メソッドは最後の子の後に子を追加するということです。ですから、 hello と world の間にテキストノードを追加したい場合は、 <code>appendChild</code> の代わりに <code>appendChild</code> を使用する必要があります。</p>
+<div class="notecard note">
+<p><code>createTextNode()</code> と <code>appendChild</code> は、hello と world という単語の間にホワイトスペースを入れる簡単な方法です。もう 1 つの重要な注意点は、hello の後に world という単語が追加されたように、<code>appendChild</code> メソッドは最後の子の後に子を追加するということです。ですから、hello と world の間にテキストノードを追加したい場合は、<code>appendChild</code> の代わりに <code>appendChild</code> を使用する必要があります。</p>
 </div>
 
 <h3 id="Creating_New_Elements_with_the_document_object_and_the_createElement.28...29_method" name="Creating_New_Elements_with_the_document_object_and_the_createElement.28...29_method">文書オブジェクトと createElement(..) メソッドによる新しい要素の生成</h3>
 
-<p>createElement を使って、新しい HTML 要素やその他の任意の要素を作成することができます。例えば、 &lt;body&gt; 要素の子として新しい &lt;p&gt; 要素を作成したい場合は、先ほどの例の <code>myBody</code> を使用して、新しい要素ノードを追加します。ノードを作成するには、単に <code>document.createElement("タグ名")</code> を呼び出すだけです。例えば、以下のようになります。</p>
+<p>createElement を使って、新しい HTML 要素やその他の任意の要素を作成することができます。例えば、&lt;body&gt; 要素の子として新しい &lt;p&gt; 要素を作成したい場合は、先ほどの例の <code>myBody</code> を使用して、新しい要素ノードを追加します。ノードを作成するには、単に <code>document.createElement("タグ名")</code> を呼び出すだけです。例えば、以下のようになります。</p>
 
-<pre class="notranslate">myNewPTAGnode = document.createElement("p");
+<pre class="brush: js">myNewPTAGnode = document.createElement("p");
 myBody.appendChild(myNewPTAGnode);
 </pre>
 
-<p><img alt="Image:sample2c.jpg" src="/@api/deki/files/836/=Sample2c.jpg"></p>
+<p><img src="sample2c.jpg"></p>
 
 <h3 id="Removing_nodes_with_the_removeChild.28...29_method" name="Removing_nodes_with_the_removeChild.28...29_method">removeChild(..) メソッドによるノードの削除</h3>
 
-<p>ノードを削除することができます。以下のコードは、テキストノード <code>myTextNode</code> ("world" という単語を含む) を2番目の <code>&lt;p&gt;</code> 要素である <code>myP</code> から削除します。</p>
+<p>ノードを削除することができます。以下のコードは、テキストノード <code>myTextNode</code> ("world" という単語を含む) を 2 番目の <code>&lt;p&gt;</code> 要素である <code>myP</code> から削除します。</p>
 
-<pre class="notranslate">myP.removeChild(myTextNode);
+<pre class="brush: js">myP.removeChild(myTextNode);
 </pre>
 
-<p>テキストノード <code>myTextNode</code> ("world" という単語を含む) はまだ存在しています。以下のコードは、 <code>myTextNode</code> を最近作成された <code>&lt;p&gt;</code> 要素である <code>myNewPTAGnode</code> に割り当てています。</p>
+<p>テキストノード <code>myTextNode</code> ("world" という単語を含む) はまだ存在しています。以下のコードは、<code>myTextNode</code> を最近作成された <code>&lt;p&gt;</code> 要素である <code>myNewPTAGnode</code> に割り当てています。</p>
 
-<pre class="notranslate">myNewPTAGnode.appendChild(myTextNode);
+<pre class="brush: js">myNewPTAGnode.appendChild(myTextNode);
 </pre>
 
 <p>最終的に変更されたオブジェクトツリーはこのような状態なります。</p>
 
-<p><img alt="Image:sample2d.jpg" src="/@api/deki/files/837/=Sample2d.jpg"></p>
+<p><img src="sample2d.jpg"></p>
 
 <h2 id="Creating_a_table_dynamically_.28back_to_Sample1.html.29" name="Creating_a_table_dynamically_.28back_to_Sample1.html.29">表の動的生成 (Sample1.html に戻って)</h2>
 
@@ -225,7 +225,7 @@ myBody.appendChild(myNewPTAGnode);
 
 <h3 id="Reviewing_the_HTML_Table_structure" name="Reviewing_the_HTML_Table_structure">HTML 表構造の再確認</h3>
 
-<p><img alt="Image:sample1-tabledom.jpg" src="/@api/deki/files/833/=Sample1-tabledom.jpg"></p>
+<p><img src="sample1-tabledom.jpg"></p>
 
 <h3 id="Creating_element_nodes_and_inserting_them_into_the_document_tree" name="Creating_element_nodes_and_inserting_them_into_the_document_tree">要素ノードの生成とその文書ツリーへの挿入</h3>
 
@@ -233,12 +233,12 @@ myBody.appendChild(myNewPTAGnode);
 
 <ul>
  <li>body オブジェクトを取得する (document オブジェクトの最初の項目)。</li>
- <li>全ての要素を生成する。</li>
- <li>最後に、各子供を (上の図のように) table 構造に従って付加していきます。以下のソースコードは sample1.html のコメント付き版になります。</li>
+ <li>すべての要素を生成する。</li>
+ <li>最後に、各子要素を (上の図のように) table 構造に従って付加していきます。以下のソースコードは sample1.html のコメント付き版になります。</li>
 </ul>
 
-<div class="blockIndicator note">
-<p><code>start</code> 関数の最後には新たなコードがあります。 DOM のメソッド <code>setAttribute()</code> を用いて table の <code>border</code> プロパティが設定されており、 <code>setAttribute()</code> は属性名と属性値という 2 つの引数を取ります。 <code>setAttribute</code> メソッドを用いて任意の要素の任意の属性を設定することができます。</p>
+<div class="notecard note">
+<p><code>start</code> 関数の最後には新たなコードがあります。DOM のメソッド <code>setAttribute()</code> を用いて table の <code>border</code> プロパティが設定されており、<code>setAttribute()</code> は属性名と属性値という 2 つの引数を取ります。<code>setAttribute</code> メソッドを用いて任意の要素の任意の属性を設定することができます。</p>
 </div>
 
 <pre class="brush: html; notranslate">&lt;head&gt;
@@ -252,7 +252,7 @@ myBody.appendChild(myNewPTAGnode);
         mytable = document.createElement("table");
         mytablebody = document.createElement("tbody");
 
-        // 全てのセルを生成します
+        // すべてのセルを生成します
         for(var j = 0; j &lt; 2; j++) {
             // &lt;tr&gt; 要素を生成します
             mycurrent_row = document.createElement("tr");
@@ -288,19 +288,19 @@ myBody.appendChild(myNewPTAGnode);
 
 <h3 id="Getting_a_text_node_from_the_table" name="Getting_a_text_node_from_the_table">表からのテキスト取得</h3>
 
-<p>この例では、2つの新しい DOM 属性を導入しています。まず、 <code>childNodes</code> 属性を使用して mycel の子ノードのリストを取得します。 <code>childNodes</code> リストには、名前やタイプに関係なく、すべての子ノードが含まれます。 <code>getElementsByTagName()</code> と同様に、ノードのリストを返します。</p>
+<p>この例では、2 つの新しい DOM 属性を導入しています。まず、<code>childNodes</code> 属性を使用して mycel の子ノードのリストを取得します。<code>childNodes</code> リストには、名前やタイプに関係なく、すべての子ノードが含まれます。<code>getElementsByTagName()</code> と同様に、ノードのリストを返します。</p>
 
-<p>違いは、(a) <code>getElementsByTagName()</code> が指定したタグ名の要素のみを返すことと、 (b) <code>getElementsByTagName()</code> が直系の子だけでなく、任意のレベルの子孫を返すことです。</p>
+<p>違いは、(a) <code>getElementsByTagName()</code> が指定したタグ名の要素のみを返すことと、(b) <code>getElementsByTagName()</code> が直系の子だけでなく、任意のレベルの子孫を返すことです。</p>
 
-<p>返されたリストを手に入れたら、 <code>[x]</code> メソッドを使って目的の子項目を取得します。この例では、表の2行目の2番目のセルのテキストノードを myceltext に格納しています。</p>
+<p>返されたリストを手に入れたら、<code>[x]</code> メソッドを使って目的の子項目を取得します。この例では、表の 2 行目の 2 番目のセルのテキストノードを myceltext に格納しています。</p>
 
-<p>そして、この例では結果を表示するために、内容が <code>myceltext</code> のデータである新しいテキストノードを作成し、 <code>&lt;body&gt;</code> 要素の子として追加します。</p>
+<p>そして、この例では結果を表示するために、内容が <code>myceltext</code> のデータである新しいテキストノードを作成し、<code>&lt;body&gt;</code> 要素の子として追加します。</p>
 
-<div class="blockIndicator note">
+<div class="notecard note">
 <p>オブジェクトがテキストノードである場合、data 属性を使用して当該ノードのテキスト内容を得ることができます。</p>
 </div>
 
-<pre class="brush: js; notranslate">mybody = document.getElementsByTagName("body")[0];
+<pre class="brush: js">mybody = document.getElementsByTagName("body")[0];
 mytable = mybody.getElementsByTagName("table")[0];
 mytablebody = mytable.getElementsByTagName("tbody")[0];
 myrow = mytablebody.getElementsByTagName("tr")[1];
@@ -324,7 +324,7 @@ mybody.appendChild(currenttext);
 
 <p>JavaScript 変数にオブジェクトを納めさえすれば、スタイルプロパティを直接設定できます。以下のコードは 2 列目の各セル非表示とされ 1 行目の各セルが赤い背景色を持つように変更された sample1.html です。style プロパティが直接設定されていることに注意して下さい。</p>
 
-<pre class="brush: html notranslate">&lt;html&gt;
+<pre class="brush: html">&lt;html&gt;
 &lt;body onload="start()"&gt;
 &lt;/body&gt;
 &lt;script&gt;