マッスル・メモリー

筋肉エンジニアのブログ

【js】DOM 要素の検索まとめ

DOM(Document Object Model)はHTMLをJavascriptから操作できるようにしたインターフェイスのことです。

JavascriptからはDOM APIを通じてHTMLの情報を取得、変更、イベントの登録などができます。

今回は情報を取得するために要素の検索についてまとめます。

コードを使用したページ

Qiita

id指定

指定したIDを持つ要素をElementオブジェクトとして返します。

document.getElementById('globalHeader');
// <div class=<200b>"st-Header" id=<200b>"globalHeader"><200b>…<200b></div><200b>

タグ名指定

タグ名をキーに要素を取得します。

document.getElementsByTagName('form');
// HTMLCollection(2) [form.st-Header_search, form.st-Header_searchModal]
// length: 2
// 0: form.st-Header_search
// 1: form.st-Header_searchModal
// __proto__: HTMLCollection

idをキーにする場合と異なり、複数の要素を取得する可能性があるので、getElementsByTagNameの戻り値は要素の集合になります。

また、引数に*を指定することで全ての要素を取得することもできます。

const allTag = document.getElementsByTagName('*');
// HTMLCollection(1040) [html, head, meta, title, meta, meta, meta, link, link, meta,,,,,

// リストに含まれる要素数
allTag.length
// 1040

// i番目の要素を取得(allTag[0]でも取得可能)
allTag.item(0)
// <html><200b><head><200b>…<200b></head><200b><body data-__gyazo-extension-added-paste-support=<200b>"true"><200b>…<200b></body><200b></html><200b>

// id,またはname属性が一致する要素を取得
allTag.namedItem('globalHeader');
// <div class=<200b>"st-Header" id=<200b>"globalHeader"><200b>…<200b></div><200b>

// 属性にアクセスする
allTag[11]
// <link rel=<200b>"shortcut icon" type=<200b>"image/<200b>x-icon" href=<200b>"https:<200b>/<200b>/<200b>cdn.qiita.com/<200b>assets/<200b>favicons/<200b>public/<200b>production-c620d3e403342b1022967ba5e3db1aaa.ico"><200b>
allTag[11].type
// "image/x-icon"

getElementsByTagNameメソッドの戻り値であるHTMLCollectionオブジェクトはlength, item(i), namedItem(name)が利用できます。

name属性指定

document.getElementsByName('q');
// NodeList(2) [input.st-Header_searchInput, input.st-Header_searchModalInput]

getElementsByNameメソッドでは戻り値がNodeListですが、namedItemメソッドが利用できないくらいで、ほぼHTMLCollectionと同じです。

class指定

class属性をキーに要素群(HTMLCollection)を取得します。

document.getElementsByClassName('st-Header st-Footer');
// HTMLCollection [div#globalHeader.st-Header, globalHeader: div#globalHeader.st-Header]

document.getElementsByClassName('class1 class2');のように空白区切りで複数のクラス名を記述することで、class1, class2両方が指定された要素だけを検索します。

document.getElementsByClassName('st-HeaderAlert st-HeaderAlert-warning');
// HTMLCollection [div.st-HeaderAlert.st-HeaderAlert-warning]

cssセレクターで指定

これまでのgetHogehogeメソッドが特定の名前、属性値をキーに要素を検索していたのに対して、

より、複雑な条件での検索を可能にするのが、querySelector, querySelectorAllメソッドです。

querySelectorは合致した最初の要素を返しquerySelectorAllは合致した全ての要素を返します。

// 最初に合致した要素を取得
document.querySelector('.tr-Item');
// div.tr-Item

// 合致した全ての要素を取得
document.querySelectorAll('.tr-Item');
// NodeList(30) [div.tr-Item, div.tr-Item, div.tr-Item, div.tr-Item,,,,
// 全ての要素を取得 *
document.querySelectorAll('*');
// NodeList(1040) [html, head, meta, title, meta, meta, meta, link,,,,,

// 指定したIDの要素を取得 #id
document.querySelector('#globalHeader');
// <div class=<200b>"st-Header" id=<200b>"globalHeader"><200b>…<200b></div><200b>

// 指定したクラス名の要素を取得 .class
document.querySelectorAll('.tr-Item');
// NodeList(30) [div.tr-Item, div.tr-Item, div.tr-Item, div.tr-Item,,,,

// 指定したタグ名を取得 elem
document.querySelectorAll('form');
// NodeList(2) [form.st-Header_search, form.st-Header_searchModal]

// parent要素の子要素childを取得
document.querySelectorAll('.st-Header_start > form');
// NodeList [form.st-Header_search]

// ancestor要素の子孫要素descendantを全て取得
document.querySelectorAll('html form');
NodeList(2) [form.st-Header_search, form.st-Header_searchModal]

// prev要素の直後のnext要素を取得
document.querySelector('.tr-Item + div');
// <div class=<200b>"tr-Item"><200b>…<200b></div><200b>

// prev要素の以降のsiblings兄弟要素を取得
document.querySelectorAll('.tr-Item ~ div');
// NodeList(29) [div.tr-Item, div.tr-Item, div.tr-Item, div.tr-Item,,,,,

// 指定した属性を持つ要素を取得
document.querySelector('input[type]');
// <input class=<200b>"st-Header_searchInput" placeholder=<200b>"キーワードを入力" type=<200b>"search" autocomplete=<200b>"off" name=<200b>"q" required><200b>

// 属性がvalue値に等しい要素を取得
document.querySelector('input[type= "text"]');
// <input class=<200b>"st-Header_searchModalInput" type=<200b>"text" autocomplete=<200b>"off" placeholder=<200b>"キーワードを入力" name=<200b>"q" required><200b>

// 属性がvalueから始まる値をもつ要素を取得
document.querySelector('a[href^="http"]');
// <a class=<200b>"st-Header_dropdownItem st-RealmItem" href=<200b>"https:<200b>/<200b>/<200b>qiita.com/<200b>"><200b>…<200b></a><200b><200b>

// 属性がvalueで終わる値をもつ要素を取得
document.querySelector('img[src$=".png"]');
// <img alt=<200b>"COTOHA API" src=<200b>"/<200b>/<200b>cdn.qiita.com/<200b>assets/<200b>public/<200b>qiita-x-cotoha-4424ecc70ff95b4106a44dab2749eade.png"><200b>

// 属性がvalueを含む値をもつ要素を取得
document.querySelector('[title*="Qiita"]');
// <link href=<200b>"/<200b>opensearch.xml" rel=<200b>"search" title=<200b>"Qiita" type=<200b>"application/<200b>opensearchdescription+xml"><200b>

// 複数の属性フィルタ全てにマッチする要素を取得
document.querySelector('img[src][alt]');
<img src=<200b>"https:<200b>/<200b>/<200b>qiita-user-profile-images.imgix.net/<200b>https%3A%2F%2Fpbs.twimg.com%2Fprofile_images%2F1050777844039573504%2FP4feUgGa_bigger.jpg?ixlib=rb-1.2.2&auto=compress%2Cformat&lossless=0&w=48&s=ca8cb412d7885df16ba5dbae92cba870" alt=<200b>"t_fit_engineer"><200b>