今更はじめるJavaScript DOMの操作チートシート

（この記事は無料で最後までお読みいただける投げ銭方式の記事です）

今までJavaScriptを雰囲気で書いていたので改めて勉強中です。勉強の中で出てきた構文等のチートシートを作りたいと思います。わかりにくい箇所は構文と例示を両方載せました。

今回は素のJavaScriptによるDOM操作のチートシートです。
最近は素のJavaScriptでDOM操作をせずにjQueryを使うことが多いかと思いますが、DOMの構成の復習もかねて。

前回まではこちら。

今更はじめるJavaScript 基本構文チートシート

DOMの構成

DOMの構成図は以下。windowオブジェクトの下にdocumentオブジェクトがあり、documentオブジェクトの下にelementオブジェクトの集まりがある。elementオブジェクトの下にさらにelementオブジェクトがつくこともある。
JavaScriptでDOMを操作する際はwindowオブジェクトは省略可。

windowオブジェクト
   └documentオブジェクト
      ├elementオブジェクト
      ├elementオブジェクト
       …
      └elementオブジェクト
          ├elementオブジェクト
          └elementオブジェクト

DOM操作 要素の取得

DOM操作をするにはまず変更したい要素を取得する必要がある。

/*
    elementオブジェクトのIDからオブジェクトを取得する
    var 変数名 = document.getElementById(取得したいelementオブジェクトのID);
*/
var hoge = document.getElementById('fuga');

/*
    elementオブジェクトのCSSセレクタからマッチするオブジェクトを取得する。
    複数ある場合は最初にマッチしたものが取得される。
    var 変数名 = document.querySelector(取得したいelementオブジェクトのCSSセレクタ);
*/
var hoge = document.querySelector('.fuga')

/*
    elementオブジェクトのCSSセレクタからマッチするオブジェクトをすべて取得する。
    複数取得できるので、取得結果はNodeListオブジェクトになる。
    var 変数名 = document.querySelectorAll(取得したいelementオブジェクトのCSSセレクタ);
*/
var hoge = document.querySelectorAll('.fuga');
var firstHoge = hoge[0]; // 取得したオブジェクトの先頭のもの

DOM操作 要素の追加

追加したい要素を作り、追加先の親要素・ターゲット要素を取得してから追加する。

/*
    まず追加したい要素を作る。
    var 追加する要素の変数名 = document.createElement(タグ名);
    属性を設定する。
    追加する要素の変数名.setAttrivute(属性名, 属性値);

    追加先となる親要素・ターゲット要素を取得する。ターゲット要素の前に追加される。
    親要素の最後に追加する場合はターゲット要素の取得は不要。
    なお、親要素・ターゲット要素の取得方法は問わない。
    var 親要素の変数名 = document.getElementById(親要素のID);
    var ターゲット要素の変数名 = document.getElementById（ターゲット要素のID);

    新しい要素をDOMに追加する。最後に追加する場合はターゲット要素はnullにする。
    親要素の変数名.insertBefore(追加する要素の変数名, ターゲット要素の変数名);
*/

// 追加したい要素を作る
var addElement = document.createElement('h1');
addElement.setAttribute('Id', 'addElement');

// 追加先の親要素・ターゲット要素を取得する
var parentElement = document.getElementById('parentElement');
var targetElement = document.getElementById('targetElement');

// DOMに追加する
parentElement.insertBefore(addElement, targetElement);

DOM操作 要素の変更

変更対象の要素を取得後、各種プロパティを変更する。

/*
    変更したい要素を取得する。要素の取得方法は問わない。
    var 変更したい要素の変数名 = document.getElementById(変更したい要素のID);

    要素の内容を変更する。
    要素.innerHTML = 変更後の内容;
*/
var updateElement = document.getElementedById('updateElement ');
updateElement .innerHTML = 'piyo'; // innnerHTMLを書き換える

/*
    変更したい要素を取得する。要素の取得方法は問わない。
    var 変更したい要素の変数名 = document.getElementById(変更したい要素のID);

    要素のスタイルを変更する。
    要素.style.CSSプロパティ名 = プロパティ値;
*/
var updateElement = document.getElementedById('updateElement');
updateElement .style.color = '#FF0000'; // CSSプロパティを書き換える

DOM操作 要素の削除

削除したい要素とその親要素を取得して削除する。

/*
    削除したい要素を取得する。要素の取得方法は問わない。
    var 削除したい要素の変数名 = document.getElementById(削除したい要素のID);

    削除したい要素の親要素を取得する。
    var 削除したい要素の親要素の変数名 = 削除したい要素の変数名.parentElement;

    親要素から要素を削除する。
    削除したい要素の親要素の変数名.removeChild(削除したい要素の変数名);  
*/

// 削除したい要素を取得する
var removeElement = document.getElementById('removeElement ');
// 親要素を取得する
var parentElement = removeElement.parentElement;
// 親要素から要素を削除する
parentElement.removeChild(removeElement);

DOM操作 イベントの追加

イベントを追加する対象の要素を取得し、イベントリスナーを設定する。

/*
    イベント追加先の要素を取得する。取得方法は問わない。
    var イベント追加先の要素の変数名 = document.getElementById(イベント追加先の要素のID);
  
    イベントリスナーを追加する。
    イベント追加先の要素の変数名.addEventListener(イベントタイプ名, 実行したい関数名);

    実行する関数に引数を渡したい場合はイベントリスナーに無名関数を追加する。
    イベントオブジェクトの変数にはイベントが発生した要素が入る。使わない場合は省略可。
    イベント追加先の要素の変数名.addEventListener(イベントタイプ名, function(イベントオブジェクトの変数) {
        実行したい処理
    });
*/

// イベントの追加先の要素を取得する
var eventElement = document.getElementById('eventElement');

// イベントリスナーを追加する
// クリック時にclickFunc関数を実行する。clickFuncは引数なしの関数
eventElement.addEventListener('click', clickFunc);

// 実行する関数に引数を渡したい場合はイベントリスナーに無名関数を追加する
// ダブルクリック時にダブルクリックされた要素のIDとメッセージを表示する
eventElement.addEventListener('dblclick', function(event) {
    var message = event.target.id + 'がダブルクリックされました。';
    alert(message);
});

// 実行する関数に引数を渡したい場合はイベントリスナーに無名関数を追加する
// イベントの発生元の要素に用が無い場合は無名関数の引数は省略可。
// 右クリック時にメッセージを表示する。
eventElement.addEventListener('contextmenu', function() {
    var message = '右クリックされました。';
    alert(message);
});

今回はここまで。jQuery・Ajaxはまた今度。

いちばんやさしいJavaScriptの教本 第2版 ECMAScript 2017(ES8)対応 人気講師が教えるWebプログラミング入門 (「いちばんやさしい教本」シリーズ)