jqueryを使わないDOM関連（getElementById / querySelector）

基本

取得

id指定：ひとつめ（同一IDが複数存在するときは一つ目）

var element = document.getElementById('id_HOGE');

class指定：すべて

var elements = document.getElementsByClassName('class_HOGE');

タグ指定：すべて

var elements = document.getElementsByTagName('h1');

cssセレクタ指定

var element  = document.querySelector('#hoge h1'); // 一つ目
var elements = document.querySelectorAll('a');     // すべて

親子・兄弟

▼対象を指定：「id=id_HOGE」の場合。

var element = document.getElementById('id_HOGE');

親のみ

var hoge = element.parentNode;

親（祖先要素）

var hoge = element.closest('xxxx');

子

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

前

var hoge = element.previousElementSibling;

後

var hoge = element.nextElementSibling;

要素の作成

作成するだけで、追加はされない（HTMLに追加する場合は別途処理が必要）

作成：divタグを作って、テキストを追加

var elm_div = document.createElement('div');
elm_div.textContent = 'hoge';

要素の追加

作成した要素を追加する。

最後の子要素として追加

element.appendChild(elm_div);

最初の子要素として追加

element.insertBefore(elm_div, element.firstChild);

要素の直前に追加

element.parentNode.insertBefore(elm_div, element);

要素の直後に追加

element.parentNode.insertBefore(elm_div, element.nextSibling);

HTMLの追加

要素を作って追加じゃなくて、HTMLをそのまま追加する感じ

var html = '<div>〇〇〇</div>';
element.insertAdjacentHTML('beforeend', html);
// afterbegin：親要素内の最初、beforeend：親要素内の最後、beforebegin：親要素の直前、afterend：親要素の直後

要素の削除

特定の子要素削除：対象をfirstElementChildで指定した場合

var child = element.firstElementChild;
element.removeChild(child);

自身を削除

element.parentNode.removeChild(element);

子要素を全て削除：１

while (element.firstChild) {
  element.removeChild(element.firstChild);
}

※常に一つ目を削除。対象がなくなるまで繰り返す

子要素を全て削除：２

element.textContent = null;

属性の操作

属性の存在チェック

element.hasAttribute('href');

属性の取得 (存在しない場合はnull or 空文字)

element.getAttribute('href');

属性を設定

element.setAttribute('href', '〇〇〇');

属性を削除

element.removeAttribute('href');

スタイル関連操作

classの追加

element.classList.add('〇〇〇');

classの削除

element.classList.remove('〇〇〇');

classがあれば削除、無ければ追加

element.classList.toggle('〇〇〇');

スタイルの直接指定

element.style.backgroundColor = '#ff0000';

その他

一発で取ってそのあと、使わないならいいんだけど・・・使い回す場合は変数に格納しておく。

var elm_hog       = document.getElementById('id_HOGE');
var elms_div      = elm_hog.getElementsByTagName('div');
var elm_child_1st = elm_hog.firstElementChild;