記述場所

bodyセクションの最後かheadセクション内。headセクションに置く場合はDOM生成後に必要な処理は以下の中に記述。

window.onload = function() { ... }

無名関数はアロー関数() => {}でもよい。

DOMの操作

DOMの取得

bodyの取得

document.body

要素名で取得

var element = document.getElementsByTagName('要素名');

'Elements'と複数形であることに注意。結果は配列になる。

idで取得

var element = document.getElementById('ID名');

ID名は#を付けない。結果は単体のDOM。

DOMの内容

要素.innerHTML

innerHTMLプロパティーで直接参照・設定

DOMの作成

var element = document.createElement('要素名');

DOMの追加

body内の指定要素の前に追加

document.body.insertBefore(追加要素, 指定要素)；

body内の最後に追加

document.body.appendChild(追加要素);

指定要素の中の最後に追加

指定要素.appendChild(追加要素);