DOM(Document Object Model)はHTMLをJavascriptから操作できるようにしたインターフェイスのことです。
JavascriptからはDOM APIを通じてHTMLの情報を取得、変更、イベントの登録などができます。
今回は情報を取得するために要素の検索についてまとめます。
コードを使用したページ
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>