JavaScript Element関連チートシート(jQueryなし)

前提としてエレメントが取得されているものとして話を進めます。

var my_element = document.getElementById('my-element');

取得系

IDで取得

var my_element = document.getElementById('my-element');

セレクタの場合

var my_element = document.querySelector('#my-element');

Classで取得

var my_element = document.getElementsByClassName('my-element');

※forEachが回せない

セレクタの場合

var my_element = document.querySelector('.my-element');

※ 孫要素が取れない、最初に見つかるクラスしかとれない

全部取得するセレクタ

var my_element = document.querySelectorAll('.my-element');

※forEachが回せる

Tagで取得

var my_element = document.getElementsByTagName("div");

生成系

エレメント作成

var new_element = document.createElement('div');

エレメント複製

var clone_element = my_element.cloneNode(true);

※引数はtrueが子要素も全部クローン,falseが外側だけクローン

変化形

属性の追加

my_element.setAttribute("style", "diplay:none;");

属性の削除

my_element.removeAttribute('id');

要素追加系

テキストを追加

my_element.textContent = 'テキスト';

HTML丸ごと追加

my_element.innerHTML = '<span>ｽﾊﾟｰｰｰﾝ!!!</span><span>ｽﾎﾟｰｰｰﾝ!!!</span>';

子要素追加

my_element.appendChild(child_element);