【JavaScript】よく使うDOM操作サンプルまとめ

JavaScriptでよく使うDOMの操作のサンプルをまとめて紹介します。

idで要素を取得する

// SampleIdで要素を取得
var elem = document.getElementById('SampleId');

// 取得した要素のinnerTextをコンソール出力
console.log(elem.innerText);

Classで要素を取得する

// SampleClassで要素を取得
var elems = document.getElementsByClassName('SampleClass');

// 取得した要素のinnerTextをコンソール出力
console.log(elems[0].innerText);

注意点としては、合致するDOMオブジェクトの配列が返されることです。
idと異なりClassはページ内に複数設定することが可能だからです。
メソッド名も「Elements」と複数形になっています。

CSSセレクタで要素を取得

CSSセレクタで取得する方法は以下の2種類があります。
・querySelectorAll…合致するすべての要素を取得
・querySelector…合致する最初の要素を取得

CSSセレクタで要素を取得

// CSSセレクタに合致する要素を全て取得
var elems = document.querySelectorAll('.SampleClass p');

// CSSセレクタに合致する最初の要素を取得
var elem = document.querySelector('#SampleId > Div');

CSSセレクタについては以下を参照ください。

属性(attribute)を取得、設定

var elem = document.getElementById('SampleId');

// 属性を取得
var attr = elem.getAttribute('Sample');

// 属性を設定
elem.setAttribute('href', data.product_link); // hrefを設定
elem.setAttribute('style', 'height:100px;width:100px;');  // styleを設定

Classを追加・削除

var elem = document.getElementById('SampleId');

// SampleClassを追加
elem.classList.add('SampleClass');

// SmapleClassを削除
elem.classList.remove('SampleClass');

要素を生成してdocumentに追加

createElementでDOM要素を生成し、appendChildでドキュメントに追加できます。

要素を生成してdocumentに追加

// DOM要素を生成。以下の要素が生成される。
// <a href="http://sample.com" target="_blank" rel="noopener noreferrer">sample</a>
var elem = document.createElement('A');
elem.setAttribute('href', 'http://sample.com');
elem.setAttribute('target', '_blank');
elem.setAttribute('rel', 'noopener noreferrer');
elem.innerText = 'sample';

// body要素に追加
document.body.appendChild(elem);