JavaScript での getAttribute の使用の概要

私たちの開発プロセスでは、JavaScript の getAttribute() メソッドが関数であり、getAttribute() にはパラメーターが 1 つだけあることは誰もが知っていると思います。つまり、属性の名前をクエリしたいと考えています。 JavaScript での getAttribute の使い方を紹介しましょう。

getAttribute() メソッド

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

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

上記のコードを前述の「ショッピング リスト」に挿入すると、サンプル ドキュメントの最後を選択して Web ブラウザでページをリロードすると、変更ダイアログ ボックスが画面にポップアップし、「優しいリマインダー」というテキスト メッセージが表示されます。
「ショッピングリスト」ドキュメントには、title 属性を持つ e388a4556c0f65e1904146cc1a846bee 要素が 1 つだけあります。このドキュメントに、title 属性のない 1 つ以上の e388a4556c0f65e1904146cc1a846bee 要素がある場合、対応する getAttribute("title") 呼び出しは null を返します。 null は JavaScript 言語の null 値で、「話している内容は存在しない」ことを意味します。これを自分で確認したい場合は、まずショッピング リスト ドキュメントの既存のテキスト段落の後に次のテキストを挿入します:

<p>This is just test</p>

次に、ページをリロードします。今回は 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(attribute , value)
以下の例では、最初のステートメントは 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"));

上面这些语句将在屏幕上弹出两个alert对话框：第一个alter对话框出现在setAttribute()方法被调用之前，它将是一片空白或显示着单词“null”；第二个出现在title属性值被设置之后，它将显示着“a list of goods”消息。
在上例中，我们设置了一个现有节点的title属性，但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作：先把这个属性创建出来，然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。
在“购物清单”示例文档里，e388a4556c0f65e1904146cc1a846bee元素已经有了一个title属性，这个属性的值是a gentle reminder。我们可以用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属性值全部修改为brand new title text。具体到“购物清单”文档，属性值a gentle reminder将被覆盖。
这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

总结：

相信小伙伴们通过本文的认真学习以后，对JavaScript中getAttribute的使用有了进一步的了解和认识，希望通过本文介绍对你的工作有所帮助！

相关推荐：

javascript setAttribute, getAttribute 在不同浏览器上的不同表现

js中 aaa.style 和 aaa.getAttribute('style') 等价吗，有无区别？

有趣的script标签用getAttribute方法来自脚本吧

以上がJavaScript での getAttribute の使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。