JSでgetattributeメソッドを使用する例

getattribute（）メソッド

これまでに、特定の要素ノードを取得する2つの方法を導入しています。1つはgetElementByID（）メソッドを使用することであり、もう1つはgetElementsByTagname（）メソッドを使用することです。その要素を見つけた後、getattribute（）メソッドを使用して、そのさまざまな属性の値を照会できます。

getattribute（）メソッドは関数です。パラメーターは1つだけです - クエリを計画している属性の名前：

object.getAttribute（属性）

ただし、getattribute（）メソッドは、以前に導入した他のメソッドとは異なるドキュメントオブジェクトを介して呼び出すことはできません。 1つの要素ノードオブジェクトを介してのみ呼び出すことができます。

たとえば、以下に示すように、各<P>要素のタイトル属性を照会するために、getElementsByTagname（）メソッドと組み合わせることができます。

 var text = document.getElementsByTagname（ "P"）for（var i = 0; i <text.length; i ++）{alert（text [i] .getattribute（ "title"））;}

上記のコードを「ショッピングリスト」のサンプルドキュメントの最後に挿入して、以前に与えられたドキュメントをWebブラウザーにページをリロードすると、テキストメッセージ「A Gentle Reminder」のあるAlterダイアログボックスが画面に表示されます。

ショッピングリストドキュメントには、タイトル属性を備えた1つの<p>要素のみがあります。ドキュメントにタイトル属性のない1つ以上の要素がある場合、対応するgetattribute（ "title"）コールはnullを返します。 NullはJavaScript言語のヌル値であり、その意味は「あなたが言ったことは存在しない」です。これを個人的に確認する場合は、ショッピングリストドキュメントの既存のテキスト段落に次のテキストを挿入してください。

<p>これは単なるテスト</p>です

次に、ページをリロードします。今回は、2つのALTERダイアログが表示され、2番目のダイアログは空白になるか、「null」という単語のみを表示します。特定の状況は、WebブラウザーがNULL値を表示する方法に依存します。

スクリプトを変更して、タイトルプロパティが存在するときにのみメッセージをポップアップできるようにすることができます。 IFステートメントを追加して、getattribute（）メソッドの返品値がnullかどうかを確認します。この機会を利用して、スクリプトの読みやすさを改善するためにいくつかの変数も追加しました。

 var ts = document.getElementsByTagname（ "li"）;

このページをリロードすると、以下に示すように、「穏やかなリマインダー」メッセージを示すダイアログボックスのみが表示されます。

このコードを短いコードに減らすこともできます。特定のデータがヌル値であるかどうかを確認するとき、実際にそれが存在するかどうかを確認しています。この種のチェックは、IFステートメントの条件としてチェックデータを直接使用するように簡素化できます。 if（何か）はif（何か！= null）と完全に同等ですが、前者は明らかに簡潔です。この時点で、何かが存在する場合、IFステートメントの状態は真実になります。何かが存在しない場合、IFステートメントの条件は虚偽になります。

この例として、if（title_text！= null）をif（title_text）に置き換える限り、より簡潔なコードを取得できます。さらに、コードの読みやすさをさらに向上させるために、この機会を利用して変更声明を書くこともできます。

 var ts = document.getElementsByTagname（ "li"）;

3.4.2 SetAttribute（）メソッド

以前に紹介したすべての方法は、情報を取得するためにのみ使用できます。 SetAttribute（）メソッドは、それらと本質的な違いがあります。属性ノードの値を変更することができます。

getattribute（）メソッドと同様に、setattribute（）メソッドは、要素ノードオブジェクトを介してのみ呼び出すことができる関数でもありますが、setattribute（）メソッドでは、2つのパラメーターを渡す必要があります。

obect.setattribute（属性、値）

次の例では、最初のステートメントはID属性値が購入である要素を取得し、2番目のステートメントはこの要素のタイトル属性値を商品のリストに設定します。

 var Shopping = document.getElementById（ "購入"）Shopping.setattribute（ "Title"、 "A Goods of Goods"））

getattribute（）メソッドを使用して、この要素のタイトル属性値が実際に変更されたことを証明できます。

 var Shopping = document.getElementById（ "購入"）; alert（shopping.getattribute（ "title"））; shopping.setattribute（ "title"、 "a goods"）; alert（shopping.getattribute（ "title"））;

上記のステートメントは、画面に2つのアラートダイアログをポップアップします。SetAttribute（）メソッドが呼び出される前に最初のAlterダイアログが表示されます。 2番目は、タイトル属性値が設定された後に表示され、「商品のリスト」メッセージが表示されます。

上記の例では、既存のノードのタイトル属性を設定しますが、この属性はそもそも存在しませんでした。これは、SetAttribute（）コールが実際に2つの操作を完了することを意味します。最初にこの属性を作成し、次にその値を設定します。要素ノードの既存の属性でsetattribute（）メソッドを使用すると、この属性の現在の値が上書きされます。

「買い物リスト」のサンプルドキュメントでは、<P>要素にはすでにタイトル属性があり、この属性の値は穏やかなリマインダーです。 Setattribute（）メソッドを使用して、現在の値を変更できます。

 <script type = "text/javascript"> var ts = document.getElementsbytagname（ "li"）;成功！ "）アラート（ts [i] .getattribute（" title "））}}

上記のコードは、最初にドキュメントからタイトル属性を既に持っているすべての<P>要素をすべて取得し、次にすべてのタイトル属性値を新しいタイトルテキストに変更します。特に「買い物リスト」ドキュメントでは、穏やかなリマインダーが上書きされます。

非常に注目に値する詳細は次のとおりです。Setattribute（）メソッドを介したドキュメントの変更により、ドキュメントはブラウザウィンドウに効果や動作を表示しますが、ブラウザのビューソースを介してドキュメントのソースコードを表示すると、元の属性値が表示されます。 「内側と外側の一貫性がない」というこの現象は、DOMの動作モードから来ています。最初にドキュメントの静的コンテンツをロードしてから、動的に更新します。動的リフレッシュは、ドキュメントの静的コンテンツに影響しません。これはまさにDOMの真のパワーと誘惑です。更新されるページコンテンツでは、エンドユーザーがブラウザでページを更新することを実行する必要はありません。