getElementsByTagName / getElementsByClassName
getElementsByTagName メソッドは、要素のタグ名を指定して一致する要素をすべて取得します。
document.getElementsByTagName(tagname)
例えば、divタグ、段落要素のpタグや画像要素のimgタグなどの要素を全て取得できます。
実際に確認してみましょう。
ある架空のウェブサイトのpタグ要素を全て取得できます。
また配列ではないですがfor〜ofでループ処理ができ、画像要素も取得できます。
const allImages = document.getElementsByTagName('img');
for (let img of allImages) {
console.log(img.src)
}
一方で、getElementsByClassName メソッドは、要素の class 属性の値を指定して一致する要素をすべて取得します。
document.getElementsByClassName(classnames)
ある架空のウェブサイトのsquareクラスがあります。
上記のようにsquareクラスがついた要素を取得できます。
最後に存在しない値を入れた場合と、その時のgetElementByIdとの違いを見てみましょう。
getElementsByTagName / getElementsByClassName は「空のHTMLCollection」 が返ってきます。
getElementByIdの時は「null」が返ってきます。この違いがあります。
getElementsByTagName / getElementsByClassNameは用途によって使い分けが必要です。
ちなみに「HTMLCollection」の中身は「Element」という要素になります。
要素を表すオブジェクトです。
