忘れがちなJavascriptによるDOM操作

DOM操作をすぐに忘れてしまうので、よく使うものをまとめておきます。

【HTML】

<p id="text"></p>

【Javascript】

// id="parent" を指す
const parent = document.getElementById('text');

// 指定した要素に含まれる最初の要素
const child = parent.firstChild;

// 指定した要素に含まれる子の要素を削除する
parent.removeChild(子の要素);

// 要素を作る
const header = document.createElement('h1');

// 要素の文字を設定する
header.innerText = '文字';

// 要素に追加する
parent.appendChild(header);

// a要素を作成し、値を設定する
const anchor = document.createElement('a');
anchor.setAttribute('href', 'https://www.google.co.jp/');
anchor.className = 'google';