js_javascriptスキルでのgetAttributeメソッドの使用例

getAttribute() メソッド

これまで、特定の要素ノードを取得する 2 つの方法を紹介しました。1 つは getElementById() メソッドを使用する方法、もう 1 つは getElementsByTagName() メソッドを使用する方法です。その要素を見つけたら、 getAttribute() メソッドを使用して、そのさまざまな属性の値をクエリできます。
getAttribute() メソッドは関数です。パラメータは 1 つだけです - クエリする属性の名前:
object.getAttribute(属性)
ただし、これまでに紹介した他のメソッドとは異なり、getAttribute() メソッドはドキュメント オブジェクトを通じて呼び出すことはできません。要素ノード オブジェクトを通じてのみ呼び出すことができます。
たとえば、次のように getElementsByTagName() メソッドと組み合わせて、各 e388a4556c0f65e1904146cc1a846bee 要素の title 属性をクエリできます。

var text=document.getElementsByTagName("p")
for (var i=0;i<text.length;i++)
{
alert(text[i].getAttribute("title"));
}

前述の「ショッピング リスト」サンプル ドキュメントの最後に上記のコードを挿入し、Web ブラウザでページをリロードすると、「優しいリマインダー」というテキスト メッセージが画面にポップアップ表示されます。 。

"Shopping List" ドキュメントには、title 属性を持つ e388a4556c0f65e1904146cc1a846bee 要素が 1 つだけあります。このドキュメントに、title 属性のない 1 つ以上の e388a4556c0f65e1904146cc1a846bee 要素がある場合、対応する getAttribute("title") 呼び出しは null を返します。 null は JavaScript 言語の null 値で、「話している内容は存在しない」ことを意味します。これを自分で確認したい場合は、まずショッピング リスト文書の既存のテキスト段落の後に次のテキストを挿入します:
e388a4556c0f65e1904146cc1a846beeこれは単なるテストです94b3e26ee717c64999d7867364b1b4a3
次に、ページをリロードします。今回は 2 つの変更ダイアログ ボックスが表示され、Web ブラウザでの null 値の表示方法に応じて、2 番目のダイアログ ボックスは空白になるか、単に「null」という単語が表示されます。
title 属性が存在する場合にのみメッセージをポップアップするようにスクリプトを変更できます。 getAttribute() メソッドの戻り値が null かどうかを確認する if ステートメントを追加します。この機会を利用して、スクリプトの読みやすさを向上させるためにいくつかの変数も追加しました。

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text!=null)
{
alert(text)
}
}

このページをリロードすると、以下に示すように、「優しいリマインダー」というメッセージを含む変更ダイアログ ボックスのみが表示されます。

このコードをさらに短くすることもできます。データ項目が null かどうかをチェックするとき、実際にはそのデータ項目が存在するかどうかをチェックしています。このチェックは、チェック対象のデータを if ステートメントの条件として直接使用することで簡素化できます。 if (something) は if (something != null) と完全に同等ですが、前者の方が明らかに簡潔です。この時点で、何かが存在する場合、if ステートメントの条件は true になり、何かが存在しない場合、if ステートメントの条件は false になります。
この例に特有ですが、if (title_text != null) を if (title_text) に置き換えるだけで、より簡潔なコードを取得できます。さらに、コードの可読性をさらに高めるために、この機会に alter ステートメントと if ステートメントを同じ行に記述することもできます。これにより、日常生活で使用される英語の文に近づけることができます。

var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{text=ts[i].getAttribute("title");
if(text) alert(text)
}

3.4.2 setAttribute() メソッド

これまでに紹介したすべての方法は、情報を取得するためにのみ使用できます。 setAttribute() メソッドには、それらとの重要な違いが 1 つあります。それは、属性ノードの値を変更できることです。
getAttribute() メソッドと同様に、setAttribute() メソッドも要素ノード オブジェクトを通じてのみ呼び出すことができる関数ですが、setAttribute() メソッドでは 2 つのパラメーターを渡す必要があります:
obiect.setAttribute(属性,値)
次の例では、最初のステートメントは id 属性値が Purchase である要素を取得し、2 番目のステートメントはこの要素の title 属性値を商品のリストに設定します。

var shopping=document.getElementById("purchases")
shopping.setAttribute("title","a list of goods")

getAttribute() メソッドを使用すると、この要素の title 属性の値が実際に変更されたことを証明できます。

var shopping=document.getElementById("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));

上記のステートメントは、画面上に 2 つの警告ダイアログ ボックスを表示します。最初の変更ダイアログ ボックスは setAttribute() メソッドが呼び出される前に表示され、2 番目の変更ダイアログ ボックスは空白または「null」という単語が表示されます。 title 属性値を設定すると「商品一覧」メッセージが表示されます。

上記の例では、既存のノードの title 属性を設定していますが、この属性は元々存在しませんでした。これは、発行した setAttribute() 呼び出しが実際に 2 つの操作を完了したことを意味します。最初に属性を作成し、次にその値を設定します。要素ノードの既存の属性に対して setAttribute() メソッドを使用すると、この属性の現在の値は上書きされます。
「ショッピング リスト」サンプル ドキュメントでは、e388a4556c0f65e1904146cc1a846bee 要素にすでに、その値が優しいリマインダーである title 属性があります。 setAttribute() メソッドを使用して、現在の値を変更できます:

<script type="text/javascript">
var ts=document.getElementsByTagName("li");
for (var i=0; i<ts.length;i++)
{
var text=ts[i].getAttribute("title");
alert(ts[i].getAttribute("title"))
if(text)
{
ts[i].setAttribute("title","我会成功！")
alert(ts[i].getAttribute("title"))
}
}

上記のコードは、まずドキュメントから title 属性を持つすべての e388a4556c0f65e1904146cc1a846bee 要素を取得し、次にそれらのすべての title 属性値を新しいタイトル テキストに変更します。 「ショッピング リスト」ドキュメントに特有の、穏やかなリマインダーの属性値はオーバーライドされます。
ここで注目に値する詳細があります。 setAttribute() メソッドを使用してドキュメントを変更すると、ブラウザ ウィンドウ内のドキュメントの表示効果や動作がそれに応じて変更されますが、ブラウザのビューを使用するときは、 source オプションを使用してドキュメントのソース コードを編集すると、元の属性値が表示されます。つまり、setAttribute() メソッドによる変更はドキュメント自体のソース コードには反映されません。この「外観と内部の不一致」現象は、DOM の動作モードに起因します。つまり、最初にドキュメントの静的コンテンツをロードし、次にそれらを動的に更新しても、ドキュメントの静的コンテンツには影響しません。これが DOM の真の力であり魅力です。ページ コンテンツを更新する場合、エンド ユーザーはブラウザでページ更新操作を実行する必要がありません。