JavaScript で DOM を操作する方法
要素の検索
CSS セレクタの id
で検索したい場合は、以下のように記述します。見つからない場合は、null
を返します。
// id 指定
document.getElementById('id');
// <div id="hoge">...</div>
id
名で指定) CSS セレクタの class
で検索したい場合は、以下のように記述します。見つからない場合は、空の HTMLCollection
を返します。
// class 指定
document.getElementsByClassName('class');
// HTMLCollection(10)[...]
class
名で指定) HTML のタグで検索したい場合は、以下のように記述します。見つからない場合は、空の HTMLCollection
を返します。
// タグ指定
document.getElementsByTagName('div');
// HTMLCollection(10)[...]
CSS セレクタ指定で最初の一つを取得したい場合は、以下のように記述します。document.getElement...
と異なり、CSS セレクタの #
や .
も含めて記述する必要があります。見つからない場合は、null
を返します。
// css セレクタで指定 (最初の一つを取得)
document.querySelector('#main h1');
// <h1>...</h1>
CSS セレクタ指定ですべての要素を取得したい場合は、以下のように記述します。document.getElement...
と異なり、CSS セレクタの #
や .
も含めて記述する必要があります。見つからない場合は、空の NodeList
を返します。
// css セレクタで指定 (すべてを取得)
document.querySelectorAll('.item');
// NodeList(10)[...]
親子兄弟要素へのアクセス
親要素に対してアクセスしたい場合は、以下のように記述します。
// 親要素
element.parentNode;
// <div>...</div>
子要素に対してアクセスしたい場合は、以下のように記述します。firstElementChild
、および lastElementChild
によるアクセスで見つからない場合は、null
を返します。children
によるアクセスで見つからない場合は、空の HTMLCollection
を返します。
// 子要素
element.firstElementChild; //最初の子要素
// <div>...</div>
element.lastElementChild; //最後の子要素
// <div>...</div>
element.children; //子要素リスト
// HTMLCollection(10)[...]
1つ前、または1つ後の要素に対してアクセスしたい場合は、以下のように記述します。見つからない場合は、空の null
を返します。
// 1つ前の要素
element.previousElementSibling;
// <div>...</div>
// 1つ後の要素
element.nextElementSibling;
// <div>...</div>
要素の作成・追加
要素を作成し、他の要素に追加したい場合は、以下のように記述します。
// 要素の作成
var div = document.createElement('div');
div.textContent = 'hoge';
// 最後の子要素として追加
element.appendChild(div);
// 最初の子要素として追加
element.insertBefore(div, element.firstChild);
// 要素の直前に追加
element.parentNode.insertBefore(div, element);
// 要素の直後に追加
element.parentNode.insertBefore(div, element.nextSibling);
要素の削除
要素を削除したい場合は、以下のように記述します。
// 特定の子要素削除
element.removeChild(child);
// 自分を削除
element.parentNode.removeChild(element);
// 子要素を全て削除
while (element.firstChild) element.removeChild(element.firstChild);
// 子要素を全て削除 (null)
element.textContent = null;
属性の操作
属性が存在しているかチェックしたい場合は、以下のように記述します。hasAttribute
は true
または false
を返します。getAttribute
は null
を返します。
// 属性の存在チェック
element.hasAttribute('href');
// 属性の取得
element.getAttribute('href');
属性を設定したい場合は、以下のように記述します。すでに属性が存在する場合は上書きされます。
// 属性を設定
element.setAttribute('href', 'https://murashun.jp');
属性を削除したい場合は、以下のように記述します。
// 属性を削除
element.removeAttribute('href');
スタイル関連操作
class
を追加、削除、変更したい場合は、以下のように記述します。classList.add
は、同じクラスがすでに存在した場合、無視されます。classList.remove
は、存在しないクラスを指定してもエラーを返しません。classList.toggle
は、同じクラスがすでに存在した場合、除去して false
を返します。クラスが存在しない場合、追加して true
を返します。
// class 追加
element.classList.add('active');
// class 削除
element.classList.remove('active');
// class を変更
element.classList.toggle('active');
// スタイルを直接指定
element.style.backgroundColor = '#fff';