JavaScript で DOM を操作する方法

要素の検索

CSS セレクタの id で検索したい場合は、以下のように記述します。見つからない場合は、null を返します。

// id 指定
document.getElementById('id');

// <div id="hoge">...</div>

CSS セレクタの class で検索したい場合は、以下のように記述します。見つからない場合は、空の HTMLCollection を返します。

// class 指定
document.getElementsByClassName('class');

// HTMLCollection(10)[...]

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)[...]

１つ前、または１つ後の要素に対してアクセスしたい場合は、以下のように記述します。見つからない場合は、空の null を返します。

// １つ前の要素
element.previousElementSibling;
// <div>...</div>

// １つ後の要素
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';