Webページ上のテキストや属性などを取得する
Updated
2021/8/8 9:36
Author
Jumpei Ikegamiorder
10
あるページ上でJavaScriptを実行することで、そのページ上の情報を取得し利用することができます。
特定のHTML要素を取得する
JavaScriptでWebページ上の情報を扱うためには、その情報が含まれるHTML要素をまず取得する必要があります。取得したいデータが広いページ上のどこにあるかを、そのデータが含まれるHTML要素によって指定します。
ページ上の要素を特定するには、その要素の場所を示す手がかりが必要です。その手がかりにはいくつかの種類がありますが、最も汎用的なのはCSSセレクタです。なお、CSSセレクタ自体の説明はCSSのリファレンスで詳しく紹介します。
1つの要素を取得する
CSSセレクタを使って1つの要素を取得する場合は、
document.querySelector()というメソッドを使います。JavaScript
たとえばチュートリアルでは、Amazonの商品詳細ページの中から商品名を含む要素を取得する次のようなプログラムを紹介していました。
2. ワンクリックでAmazonの商品名をGoogle検索するボタンを作る2021/6/20 4:332021/8/8 8:00JavaScript
ここでは、
id属性を使った"#productTitle"というCSSセレクタによってHTML要素を取得しています。
複数の要素を取得する
基本的には、ページ上の1つの要素を取得できればやりたいことが実現できるケースがほとんどかと思います。もしもページ上の複数要素をまとめて取得したい場合は、
document.querySelectorの最後にAllを付けた、document.querySelectorAll()というメソッドを代わりに使います。JavaScript
たとえば次の例は、ページ上のすべての
a要素（リンク）を取得し、そのリンク先をコンソールにログとして出力するプログラムです。JavaScript
以上が、HTML要素の取得に関する説明でした。ちなみに、
document.querySelector()やdocument.querySelectorAll()より汎用性は下がりますが、id属性やclass属性を手がかりにして要素を取得するための専用のメソッドも存在します。JavaScript
取得したHTML要素からデータを取り出す
ここまで紹介した方法でHTML要素を取得できたら、その中に入っているデータを取り出しましょう。どこに入っているデータかに応じて、取り出し方が異なります。
要素の中身である文字列を取り出す
HTML要素の中には、タグ中にテキストを含めることができるものがあります。たとえば、次の
aタグで表現される要素を考えます。HTML
このうち、リンクテキストである
"Google"を取得したい場合は、次のように要素のinnerTextプロパティを参照します。JavaScript
要素の属性値を取り出す
上記と同じ次の
aタグで、今度は属性hrefの値（つまり"https://www.google.com/"）を取得したい場合を考えます。HTML
基本的には、ある要素の属性の値は、「その属性と同じ名前のプロパティ」に格納されます。たとえば
href属性であれば、要素のhrefプロパティに格納されています。JavaScript
href属性に限らず、大抵の属性については、要素の同じ名前のプロパティに値が格納されています。
input系の要素の入力値を取り出す
テキストボックスなどにユーザーが入力した値を取得したいというケースもよくあります。一般には、要素の
valueプロパティを参照することで、その時点での入力値を取得することができます。たとえば、次のような
typeがtextであるinput要素の入力値を取得したいとします。HTML
そのとき、次のようなJavaScriptによってユーザーが現在入力した値を取得できます。
JavaScript
複数行のテキスト入力を取る
textarea要素や、セレクトボックスを表すselect要素についても、同様にvalueプロパティで入力値を取得することができます。一方、ラジオボタンやチェックボックスの場合は、
input要素が選択肢の数だけ複数存在します。その場合は、それぞれの選択肢に対応したinput要素に対して、checkedプロパティでその選択肢が選択されているかどうかを取得できます。結果は、選択されていればtrue、されていなければfalseで返ってきます。次の
radioボタンを考えます。HTML
単一選択で選択肢が2つであれば、次のように片方の選択肢がチェックされているかを調べることで、ユーザーの入力を知ることができます。
JavaScript
複数選択だったり選択肢が3つ以上ある場合は、選択肢に対応するすべての
input要素を取得して、checkedプロパティを調べる必要があります。なお、これらユーザーの入力を保持している要素について、JSで取得できるのはあくまでも「JS実行時点での入力値」になります。ユーザーが入力を変更する度にJS側でその入力値を使って処理をしたい場合は、イベントハンドラの知識が必要になります。イベントハンドラについては、別のリファレンスで詳しく説明します。
data-xxx属性の値を取り出す
HTMLを見ていると、たまに
'data-'で始まる謎の属性が含まれていることがあります。これは「カスタムデータ属性」と呼ばれる特別な属性です。カスタムデータ属性を使うことで、HTML要素に対して自由にデータを紐付けることができます。紐付けられたデータは、通常はユーザーに見えることはありません。主にJavaScriptによる処理のために利用されます。'data-'で始まるカスタムデータ属性は特別な扱いを受けており、上述した属性値取得の方法では取得することができません。取得するには、要素のdatasetプロパティを使います。たとえば次のHTML要素を考えます。
HTML
li要素には、それぞれ商品IDがitemidというカスタムデータ属性によって紐付けられています。これらをJSで取得するには、次のようにdataset['itemid']を参照します。JavaScript
なお次の例のようにカスタムデータ属性の名前がハイフン区切り（例では
item-sku-id）の場合、JSで取得するには名前をキャメルケースに変換（例ではitemSkuId）してから指定する必要があります。だいぶ気持ち悪いですが、歯を食いしばって慣れましょう。HTML
JavaScript