LoginSignup
1557

More than 5 years have passed since last update.

ライブラリを使わない素のJavaScriptでDOM操作

Last updated at Posted at 2015-05-28

jQueryやその他ライブラリを使わない、素のJavaScriptでのDOM操作関連をまとめてみました。

要素の検索

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

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

//タグ指定
document.getElementsByTagName('div');

//cssセレクタで指定
document.querySelector('#main .posts h1'); //最初の一つを取得
document.querySelectorAll('a'); //すべて取得

親子兄弟要素へのアクセス

//親要素
element.parentNode;

//子要素
element.firstElementChild; //最初の子要素
element.lastElementChild;  //最後の子要素
element.children; //子要素リスト

//1つ前の要素
element.previousElementSibling;

//1つ後の要素
element.nextElementSibling;

要素の作成・追加

//要素の作成
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);

//子要素を全て削除(part2)
element.textContent = null;

属性の操作

//属性の存在チェック
element.hasAttribute('href');

//属性の取得 (存在しない場合はnullもしくは空文字を返す)
element.getAttribute('href');

//属性を設定
element.setAttribute('href', 'http://localhost:3000');

//属性を削除
element.removeAttribute('href');

スタイル関連操作

//class追加
element.classList.add('active');

//class削除
element.classList.remove('active');

//classをトグル
element.classList.toggle('active');

//スタイルを直接指定
element.style.backgroundColor = '#ff0000';

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1557