標準のdocument、querySelector、querySelectorAllの使い方

更新日：2021-01-04
作成日：2021-01-04
CheatSheet
JavaScript
querySelector

jQueryからネイティブの機能へ

jQueryには様々な便利な機能がありましたが、最近では標準の機能でDOMの取り扱いが簡単に行えるようになりました。ここではネイティブな書き方での各種機能を記載します。

要素の取得、セレクタ

document.querySelectorはマッチする最初の要素、document.querySelectorAllは全ての要素を取得します。

document.querySelectorAllはNodeListを返すので、配列にしたい場合はArray.from(document.querySelectorAll('*****'))のようにします。

//IDの名称から要素を取得
document.getElementById('idName');//document.querySelector('#idName')と同様の取得結果
//クラス名から要素を取得
document.getElementsByClassName('className');//document.querySelectorAll('.className')と同様の取得結果
//タグ名称から要素を取得
document.getElementsByTagName('tagName');//document.querySelectorAll('tagName')と同様の取得結果
//CSSセレクタから要素を取得(単数)
document.querySelector('cssSelector');
//CSSセレクタから要素を取得(複数)
document.querySelectorAll('cssSelector');
//属性を指定して要素を取得
document.querySelectorAll('input[type=text]');
//特定の値の属性以外の要素を取得
Array.from(document.querySelectorAll('input')).filter(node => node.getAttribute('type') !== "text");
//直前の要素(前の兄弟要素)
document.getElementById('idName').previousElementSibling;
//直後の要素(次の兄弟要素)
document.getElementById('idName').nextElementSibling;
//親要素
document.getElementById('idName').parentNode;
//子要素
document.getElementById('idName').children;
//祖先要素
document.getElementById('idName').closest('cssSelector');

DOM

document.querySelector('cssSelector').append(target);//指定した要素またはDOM文字列を末尾に追加
document.querySelector('cssSelector').prepend(target);//指定した要素またはDOM文字列を先頭に追加
document.querySelector('cssSelector').after(target);//指定した要素またはDOM文字列を直後に追加
document.querySelector('cssSelector').before(target);//指定した要素またはDOM文字列を直前に追加
document.querySelector('cssSelector').replaceWith(target);//指定した要素またはDOM文字列に置き換え
document.querySelector('cssSelector').removeChild(target);//指定した要素の除去

代表的な要素

document.head;//ヘッダ
document.body;//ボディ
document.forms;//フォーム
document.all;//全要素

HTML、値

document.querySelector('cssSelector').value;//input等の値
document.querySelector('cssSelector').textContent;//テキストの内容
document.querySelector('cssSelector').innerHTML ;//子要素以下のHTML
document.querySelector('cssSelector').outerHTML;//自身と内部のHTML

値属性の値

document.querySelector('cssSelector').getAttribute('type');//属性値の取得
document.querySelector('cssSelector').setAttribute('type','number');//属性値の設定

スタイル

el.style.color = 'red';

クラス

document.querySelector('cssSelector').classList.add('className');//CSSクラスの追加
document.querySelector('cssSelector').classList.remove('className');//CSSクラスの除外
document.querySelector('cssSelector').classList.contains('className');//CSSクラスを含むかの判定
document.querySelector('cssSelector').classList.toggle('className');//CSSクラスのトグル

イベント設定

document.addEventListener('load', function(){ … });//ロード完了時
document.addEventListener('click', function(){ … });//クリック時
document.addEventListener('mousedown', function(){ … });//マウスでボタンが押された時
document.addEventListener('mouseup', function(){ … });//マウスでボタンが離された時
document.addEventListener('contextmenu', function(){ … });//マウス右クリック時
document.addEventListener('dblclick', function(){ … });///マウスダブルクリック時
document.addEventListener('keydown', function(){ … });//キーが押された時
document.addEventListener('keyup', function(){ … });//キーが話された時
document.addEventListener('keypress', function(){ … });//キーが押された状態の時
document.addEventListener('change', function(){ … });//変更時
document.addEventListener('focus', function(){ … });//フォーカス時
document.addEventListener('blur', function(){ … });//フォーカス喪失時
document.addEventListener('scroll', function(){ … });//スクロール時
document.addEventListener('submit', function(){ … });//サブミット時
document.addEventListener('resize', function(){ … });//ドキュメントサイズ変更時

DOM読み込み完了時

document.addEventListener('DOMContentLoaded', function(){ … });

HTTPリクエスト

fetch('https://example.com/path/')
.then(response => response.json() )
.then(data => console.log(data) )
.catch((error) => {console.error('Error:', error);} );