チートシート
そもそもDOMって何?
DOMを知らない方やHTMLの要素の情報の見方がわからない方はこちらをご覧ください
documentの要素取得API
document.querySelector
| querySelector |
説明 |
| document.querySelector('button[type="submit"]') |
type属性がsubmitのbutton要素のうち, 最初の一つを取得する |
| document.querySelectorAll('button[type="submit"]') |
type属性がsubmitのbutton要素の全てを取得する |
document.getElement
| セレクタ |
説明 |
| document.getElementById('SearchBox') |
id属性がSearchBoxの要素を取得する |
| document.getElementsByClassName('reservation') |
クラス属性がSearchBoxの要素を全て取得する |
| document.getElementsByName('title') |
name属性がtitleの要素を全て取得する |
CSSセレクタ
型セレクタ
| CSSセレクタ |
説明 |
| button |
button 要素 |
IDセレクタ
| CSSセレクタ |
説明 |
| #draft |
id="draft" の要素 |
classセレクタ
| CSSセレクタ |
説明 |
| .SearchBoxTextEditor |
class="SearchBoxTextEditor" の要素 |
| div.SearchBoxTextEditor |
class="SearchBoxTextEditor" の div 要素 |
| div.SearchBoxTextEditor.textInput |
SearchBoxTextEditorクラスとtextInputクラスの両方に属するdiv属性 |
属性セレクタ
| CSSセレクタ |
説明 |
| input[value="test"] |
value属性が[test]のinput属性 |
| input[value="test"]（n) |
value属性が[test]のinput属性のn番目の要素 |
| a[title="test"] |
title属性が[test]のa要素 |
| [title="test"] |
title属性が[test]の要素 |
| input[name='radio'][value='on'] |
nama属性が[radio]&vlue属性が[on]のinput要素 |
正規表現的なセレクタ
| CSSセレクタ |
説明 |
| input[value^="test"] |
value属性が[test]で始まるinput要素 |
| input[value$="test"] |
value属性が[test]で終わるinput要素 |
| input[value*="test"] |
value属性に[test]を含むinput要素 |
子セレクタ
| CSSセレクタ |
説明 |
| #root > div |
id[root]の要素の直下にあるdiv要素 |
| #root > div > a |
id[root]の要素の直下にあるdiv要素の直下にあるa要素 |
子孫セレクタ
| CSSセレクタ |
説明 |
| #root div |
id[root]の要素の下にあるdiv要素 |
| #root div.content |
id[root]の要素の下にあるdiv要素の下にあるcontentクラスの要素 |
nthを使った セレクタ
| CSSセレクタ |
説明 |
| #root > div.nth-of-type(2) |
id[root]の要素の下にあるdiv要素のうち2番目のもの |
変数を利用してエレメントを取得する
let serviceId
Document.querySelector('a[href$="/${serviceId}"]')
//セレクタを囲っているのがダブルコーテーションではなくバッククオートであることに注意
子孫node, elementの指定方法
| 取得方法 |
説明 |
| parentNode |
親ノードを指定する |
| parentElement |
親要素を指定する |
| childNode |
子ノードを指定する |
| firstChild |
ノードの最初の子要素を取得する |
| firstElementChild |
ノードの最初の要素子要素を取得する |
| lastChild |
ノードの最後の子要素を取得する |
| lastElementChild |
ノードの最後の要素子要素を取得する |
| nextSibling |
ノードの次の要素兄弟要素を取得する |
| previousSibling |
ノードの前の兄弟要素を取得する |
| previousElementSibling |
ノードの前の要素兄弟要素を取得する |
要素のテキストを取得する
| 取得方法 |
説明 |
| textContent |
要素のテキストを取得する |
| innerText |
要素のテキストとHTMLタグを一緒に取得する |
パフォーマンス観点でのCSSセレクタ取得
