From 724fc8f2a4d8b2fdf9931d39e28c388b2720ddf5 Mon Sep 17 00:00:00 2001 From: dskmori Date: Thu, 5 Aug 2021 01:53:45 +0900 Subject: Correct the title (Java Scirpt->JavaScript) (#1894) fixing obvious typo in the title and correcting others. --- .../index.html | 110 ++++++++++----------- 1 file changed, 55 insertions(+), 55 deletions(-) (limited to 'files/ja/web/api/document_object_model') 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: >-

はじめに

-

この記事では、強力で基本的な DOM レベル 1 のメソッドと、それを JavaScript からどのように使用するかを概観します。どのようにして HTML 要素を動的に生成、アクセス、制御、削除するかを学ぶことができます。ここで紹介する DOM メソッドは HTML に限ったものではなく、XML に対しても用いることができます。ここで用意しているデモは、 Firefox のすべてのバージョンや IE 5以上を含むすべての最近のブラウザーで正常に動作します。

+

この記事では、強力で基本的な DOM レベル 1 のメソッドと、それを JavaScript からどのように使用するかを概観します。どのようにして HTML 要素を動的に生成、アクセス、制御、削除するかを学ぶことができます。ここで紹介する DOM メソッドは HTML に限ったものではなく、XML に対しても用いることができます。ここで用意しているデモは、Firefox のすべてのバージョンや IE 5 以上を含むすべての最近のブラウザーで正常に動作します。

-
-

ここで紹介する DOM メソッドは ドキュメントオブジェクトモデル (コア) レベル 1 仕様の一部に過ぎません。 DOM レベル 1 には HTML ドキュメント特有のメソッド (DOM 1 HTML) と共に、一般的なドキュメントアクセスと操作 (DOM 1 コア) のためのメソッドが含まれています。

+
+

ここで紹介する DOM メソッドは ドキュメントオブジェクトモデル (コア) レベル 1 仕様の一部に過ぎません。DOM レベル 1 には HTML ドキュメント特有のメソッド (DOM 1 HTML) と共に、一般的なドキュメントアクセスと操作 (DOM 1 コア) のためのメソッドが含まれています。

例: 動的な HTML の表の生成 (Sample1.html)

@@ -30,7 +30,7 @@ translation_of: >-

JavaScript

-
function generate_table() {
+
function generate_table() {
   // get the reference for the body
   var body = document.getElementsByTagName("body")[0];
 
@@ -70,7 +70,7 @@ translation_of: >-
 
要素とテキストノードを生成する順序を意識しながら確認していってください。

 
 
    
- 
  1. まず、 <table> 要素を生成しました。
    2. 
+ 
  2. まず、<table> 要素を生成しました。
    3. 
  
  3. 次に <tbody> 要素生成し、これが <table> 要素の子となります。
    4. 
  
  4. 次に、ループを用いて <tr> 要素を生成し、これらが <tbody> 要素の子となります。
    5. 
  
  5. それぞれの <tr> 要素に対して、ループを用いて <td> 要素を生成し、これらが <tr> の子となります。
    6. 
@@ -82,27 +82,27 @@ translation_of: >-
 
      
  
    1. まず、各テキストノードをその親である <td> 要素へ追加します。
 
-  
      cell.appendChild(cellText);
      
+  
      cell.appendChild(cellText);
      
  
      2. 
  
    2. 次に、各 <td> 要素をその親である <tr> 要素へと追加します。
-  
      row.appendChild(cell);
      
+  
      row.appendChild(cell);
      
  
      3. 
  
    3. 次に、各 <tr> 要素をその親である <tbody> 要素へと追加します。
-  
      tblBody.appendChild(row);
      
+  
      tblBody.appendChild(row);
      
  
      4. 
- 
    4. 次に、 <tbody> 要素をその親である <table> 要素へと追加します。
-  
      tbl.appendChild(tblBody);
      
+ 
    5. 次に、<tbody> 要素をその親である <table> 要素へと追加します。
+  
      tbl.appendChild(tblBody);
      
  
      6. 
- 
    6. 次に、 <table> 要素をその親である <body> 要素へと追加します。
-  
      body.appendChild(tbl);
      
+ 
    7. 次に、<table> 要素をその親である <body> 要素へと追加します。
+  
      body.appendChild(tbl);
      
  
      8. 
 
    
 
-
    この手法を覚えておきましょう。 W3C DOM によるプログラミングでは頻繁に使うことになります。まず、トップダウンで要素を作成し、子を親へとボトムアップで追加していくのです。
    
+
    この手法を覚えておきましょう。W3C DOM によるプログラミングでは頻繁に使うことになります。まず、トップダウンで要素を作成し、子を親へとボトムアップで追加していくのです。
    
 
 
    JavaScript コードによって生成される HTML マークアップはこのようになります。
    
 
-
    ...
+
    ...
 <table border="2">
 <tbody>
 <tr><td>セルは 0 行 0 列 です</td><td>セルは 0 行 1 列 です</td></tr>
@@ -114,7 +114,7 @@ translation_of: >-
 
 
    このコードによって生成される <table> 要素とその子要素を示す DOM オブジェクトツリーはこのようになります。
    
 
-
    Image:sample1-tabledom.jpg
    
+
    
 
 
    ほんの幾つかの DOM メソッドを使用するだけでこのように表と内部の子要素を構築できます。生成しようと計画している構造のツリーモデルを頭に置いておくことを忘れないようにしてください。そうすれば必要なコードを書くのは簡単です。図 1 の <table> ツリーでは <table> 要素は <tbody> 要素という子を 1 つ持ちます。<tbody> は 2 つ子を持ちます。各 <tbody> の子 (<tr>) は子を 1 つ (<td>) 持ちます。最後に各 <td> はテキストノードという子を 1 つ持ちます。
    
 
@@ -124,7 +124,7 @@ translation_of: >-
 
 
    HTML
    
 
-
    <body>
+
    <body>
   <input type="button" value="Set paragraph background color" onclick="set_background()">
   <p>hi</p>
   <p>hello</p>
@@ -132,12 +132,12 @@ translation_of: >-
 
 
    JavaScript
    
 
-
    function set_background() {
-  // body 要素全てのリストを取得します (あるのは 1 つだけですが)
+
    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: >-
 
    この例では、myP 変数を body 中の 2 つ目の p 要素を表す DOM オブジェクトに設定しています。
    
 
 
      
- 
    1. まず、全ての body 要素リストをこのようにして取得します。
-  
      myBody = document.getElementsByTagName("body")[0]
      
+ 
    2. まず、すべての body 要素リストをこのようにして取得します。
+  
      myBody = document.getElementsByTagName("body")[0]
      
   有効な HTML 文書では body 要素は 1 つしかないため、このリストは 1 項目だけを持ちます。そのリストの最初の要素を [0] を使って選択することで取得します。
      3. 
- 
    3. 次に、 body の子である全ての p 要素をこのようにして取得します。
-  
      myBodyElements = myBody.getElementsByTagName("p");
      
+ 
    4. 次に、 body の子であるすべての p 要素をこのようにして取得します。
+  
      myBodyElements = myBody.getElementsByTagName("p");
      
  
      5. 
- 
    5. そして p 要素のリストから二つ目の項目をこのようにして取得します。
-  
      myP = myBodyElements[1];
      
+ 
    6. そして p 要素のリストから 2 つ目の項目をこのようにして取得します。
+  
      myP = myBodyElements[1];
      
  
      7. 
 
    
 
-
    Image:sample2a2.jpg
    
+
    
 
 
    一旦 HTML 要素に対応する DOM オブジェクトを取得すれば、そのプロパティを設定することできます。例えば、背景色のスタイルプロパティを設定したいのであればこのように加えるだけです。
    
 
@@ -173,51 +173,51 @@ translation_of: >-
 
 
    document オブジェクトを使用して createTextNode メソッドを呼び出し、テキストノードを生成します。テキスト内容を渡す必要があるだけです。返値はそのテキストノードを表すオブジェクトとなります。
    
 
-
    myTextNode = document.createTextNode("world");
+
    myTextNode = document.createTextNode("world");
 
    
 
 
    これはそのテキストデータが「world」である TEXT_NODE 型 (テキスト断片) のノードを生成し、myTextNode がこのノードオブジェクトへの参照だということです。このテキストを HTML ページに挿入するには、このテキストノードを何か他のノード要素の子供にする必要があります。
    
 
 
    appendChild(..) による要素の挿入
    
 
-
    そこで myP.appendChild({{ mediawiki.external('ノード要素') }}) を使って、その要素を 2 つ目の <p> 要素の子とします。
    
+
    そこで myP.appendChild(node_element) を使って、その要素を 2 つ目の <p> 要素の子とします。
    
 
-
    myP.appendChild(myTextNode);
+
    myP.appendChild(myTextNode);
 
    
 
-
    例を見て頂いたところで、単語 hello と world が一緒になっていることに注目して下さい: helloworld。ご覧のように外見的には、HTML ページを見ると 2 つのテキスト hello と world は単一ノードのように見えますが、ドキュメントモデルでは 2つのノードがあるのです。 2つ目のノードは TEXT_NODE 型の新しいノードで、2つ目の <p> タグの 2つ目の子供です。以下の図は文書ツリー中につい先程生成された Text Node オブジェクトを表しています。
    
+
    例を見て頂いたところで、単語 hello と world が一緒になっていることに注目して下さい: helloworld。ご覧のように外見的には、HTML ページを見ると 2 つのテキスト hello と world は単一ノードのように見えますが、ドキュメントモデルでは 2つのノードがあるのです。2 つ目のノードは TEXT_NODE 型の新しいノードで、2つ目の <p> タグの 2つ目の子供です。以下の図は文書ツリー中につい先程生成された Text Node オブジェクトを表しています。
    
 
-
    Image:sample2b2.jpg
    
+
    
 
-
    
-
    createTextNode() と appendChild は、 hello と world という単語の間にホワイトスペースを入れる簡単な方法です。もう一つの重要な注意点は、 hello の後に world という単語が追加されたように、 appendChild メソッドは最後の子の後に子を追加するということです。ですから、 hello と world の間にテキストノードを追加したい場合は、 appendChild の代わりに appendChild を使用する必要があります。
    
+
    
+
    createTextNode() と appendChild は、hello と world という単語の間にホワイトスペースを入れる簡単な方法です。もう 1 つの重要な注意点は、hello の後に world という単語が追加されたように、appendChild メソッドは最後の子の後に子を追加するということです。ですから、hello と world の間にテキストノードを追加したい場合は、appendChild の代わりに appendChild を使用する必要があります。
    
 
    
 
 
    文書オブジェクトと createElement(..) メソッドによる新しい要素の生成
    
 
-
    createElement を使って、新しい HTML 要素やその他の任意の要素を作成することができます。例えば、 <body> 要素の子として新しい <p> 要素を作成したい場合は、先ほどの例の myBody を使用して、新しい要素ノードを追加します。ノードを作成するには、単に document.createElement("タグ名") を呼び出すだけです。例えば、以下のようになります。
    
+
    createElement を使って、新しい HTML 要素やその他の任意の要素を作成することができます。例えば、<body> 要素の子として新しい <p> 要素を作成したい場合は、先ほどの例の myBody を使用して、新しい要素ノードを追加します。ノードを作成するには、単に document.createElement("タグ名") を呼び出すだけです。例えば、以下のようになります。
    
 
-
    myNewPTAGnode = document.createElement("p");
+
    myNewPTAGnode = document.createElement("p");
 myBody.appendChild(myNewPTAGnode);
 
    
 
-
    Image:sample2c.jpg
    
+
    
 
 
    removeChild(..) メソッドによるノードの削除
    
 
-
    ノードを削除することができます。以下のコードは、テキストノード myTextNode ("world" という単語を含む) を2番目の <p> 要素である myP から削除します。
    
+
    ノードを削除することができます。以下のコードは、テキストノード myTextNode ("world" という単語を含む) を 2 番目の <p> 要素である myP から削除します。
    
 
-
    myP.removeChild(myTextNode);
+
    myP.removeChild(myTextNode);
 
    
 
-
    テキストノード myTextNode ("world" という単語を含む) はまだ存在しています。以下のコードは、 myTextNode を最近作成された <p> 要素である myNewPTAGnode に割り当てています。
    
+
    テキストノード myTextNode ("world" という単語を含む) はまだ存在しています。以下のコードは、myTextNode を最近作成された <p> 要素である myNewPTAGnode に割り当てています。
    
 
-
    myNewPTAGnode.appendChild(myTextNode);
+
    myNewPTAGnode.appendChild(myTextNode);
 
    
 
 
    最終的に変更されたオブジェクトツリーはこのような状態なります。
    
 
-
    Image:sample2d.jpg
    
+
    
 
 
    表の動的生成 (Sample1.html に戻って)
    
 
@@ -225,7 +225,7 @@ myBody.appendChild(myNewPTAGnode);
 
 
    HTML 表構造の再確認
    
 
-
    Image:sample1-tabledom.jpg
    
+
    
 
 
    要素ノードの生成とその文書ツリーへの挿入
    
 
@@ -233,12 +233,12 @@ myBody.appendChild(myNewPTAGnode);
 
 
      
  
    • body オブジェクトを取得する (document オブジェクトの最初の項目)。
      • 
- 
    • 全ての要素を生成する。
      • 
- 
    • 最後に、各子供を (上の図のように) table 構造に従って付加していきます。以下のソースコードは sample1.html のコメント付き版になります。
      • 
+ 
    • すべての要素を生成する。
      • 
+ 
    • 最後に、各子要素を (上の図のように) table 構造に従って付加していきます。以下のソースコードは sample1.html のコメント付き版になります。
      • 
 
    
 
-
    
-
    start 関数の最後には新たなコードがあります。 DOM のメソッド setAttribute() を用いて table の border プロパティが設定されており、 setAttribute() は属性名と属性値という 2 つの引数を取ります。 setAttribute メソッドを用いて任意の要素の任意の属性を設定することができます。
    
+
    
+
    start 関数の最後には新たなコードがあります。DOM のメソッド setAttribute() を用いて table の border プロパティが設定されており、setAttribute() は属性名と属性値という 2 つの引数を取ります。setAttribute メソッドを用いて任意の要素の任意の属性を設定することができます。
    
 
    
 
 
    <head>
@@ -252,7 +252,7 @@ myBody.appendChild(myNewPTAGnode);
         mytable = document.createElement("table");
         mytablebody = document.createElement("tbody");
 
-        // 全てのセルを生成します
+        // すべてのセルを生成します
         for(var j = 0; j < 2; j++) {
             // <tr> 要素を生成します
             mycurrent_row = document.createElement("tr");
@@ -288,19 +288,19 @@ myBody.appendChild(myNewPTAGnode);
 
 
    表からのテキスト取得
    
 
-
    この例では、2つの新しい DOM 属性を導入しています。まず、 childNodes 属性を使用して mycel の子ノードのリストを取得します。 childNodes リストには、名前やタイプに関係なく、すべての子ノードが含まれます。 getElementsByTagName() と同様に、ノードのリストを返します。
    
+
    この例では、2 つの新しい DOM 属性を導入しています。まず、childNodes 属性を使用して mycel の子ノードのリストを取得します。childNodes リストには、名前やタイプに関係なく、すべての子ノードが含まれます。getElementsByTagName() と同様に、ノードのリストを返します。
    
 
-
    違いは、(a) getElementsByTagName() が指定したタグ名の要素のみを返すことと、 (b) getElementsByTagName() が直系の子だけでなく、任意のレベルの子孫を返すことです。
    
+
    違いは、(a) getElementsByTagName() が指定したタグ名の要素のみを返すことと、(b) getElementsByTagName() が直系の子だけでなく、任意のレベルの子孫を返すことです。
    
 
-
    返されたリストを手に入れたら、 [x] メソッドを使って目的の子項目を取得します。この例では、表の2行目の2番目のセルのテキストノードを myceltext に格納しています。
    
+
    返されたリストを手に入れたら、[x] メソッドを使って目的の子項目を取得します。この例では、表の 2 行目の 2 番目のセルのテキストノードを myceltext に格納しています。
    
 
-
    そして、この例では結果を表示するために、内容が myceltext のデータである新しいテキストノードを作成し、 <body> 要素の子として追加します。
    
+
    そして、この例では結果を表示するために、内容が myceltext のデータである新しいテキストノードを作成し、<body> 要素の子として追加します。
    
 
-
    
+
    
 
    オブジェクトがテキストノードである場合、data 属性を使用して当該ノードのテキスト内容を得ることができます。
    
 
    
 
-
    mybody = document.getElementsByTagName("body")[0];
+
    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);
 
 
    JavaScript 変数にオブジェクトを納めさえすれば、スタイルプロパティを直接設定できます。以下のコードは 2 列目の各セル非表示とされ 1 行目の各セルが赤い背景色を持つように変更された sample1.html です。style プロパティが直接設定されていることに注意して下さい。
    
 
-
    <html>
+
    <html>
 <body onload="start()">
 </body>
 <script>
-- 
cgit v1.2.3-54-g00ecf