DOM

DOM（Document Object Model）

HTMLドキュメントをオブジェクトのように扱える仕組み。

DOM操作の仕組み

ブラウザがHTMLファイルを読み込むと、自動的にDOMツリーを生成する
↓
DOMツリーが生成されると、documentオブジェクトが使えるようになる
↓
documentオブジェクトを使うと、JavaScriptでDOM操作ができる

主なメソッド4種類

1 getElementById()

：HTML要素をidで取得する
(idは同じHTML内で1回しか設定できない固有の値なので、取得できるHTML要素も当然1つ)

// HTML要素をidで取得し、中身を出力する
console.log(document.getElementById('first-list'));

2 getElementsByClassName()

：HTML要素をclassで取得する(一覧でHTMLcollectionとして配列風に表示されるので1つずつ取り出したい場合はfor文を使う)

// 複数のHTML要素を取得し、定数に代入する
const headings = document.getElementsByClassName('heading');
 
// 複数のHTML要素を1つずつ取得し、中身を出力する
for (let i = 0; i < headings.length; i++) {
  console.log(headings[i]);
 }

結果↓

3 querySelector()

：HTML要素をCSSセレクタで取得する（指定したCSSセレクタに最初に合致したHTML要素を取得する。最初の１つだけを取得）

// HTML要素をCSSセレクタで取得し、中身を出力する（最初の1つ）
console.log(document.querySelector('h1'));
console.log(document.querySelector('#first-heading'));
console.log(document.querySelector('.heading'));

4 querySelectorAll()

：HTML要素をCSSセレクタで取得する（指定したCSSセレクタに合致したHTML要素すべてを取得する。必要に応じてfor文を使う。）

// HTML要素をCSSセレクタで取得し、中身を出力する（すべて）
console.log(document.querySelectorAll('.heading'));
console.log(document.querySelectorAll('li'));

戻り値はNodeListなので、getElementsByClassName()の時と同じように必要に応じてfor文を使う。

《まとめ》

該当する複数の要素を一括で取得したいとき
querySelectorAll()
getElementsByClassName()

該当する要素を1つ(固有の要素を1つ)取得するとき
getElementById()
querySelector()

HTMLへの追加

1. createElement()メソッド：HTML要素を新しく作成する
2. textContent / innerHTMLプロパティ：HTML要素にテキストを追加する
3. appendChild()メソッド：作成したHTML要素を子要素として末尾に追加する

// 新しくli要素を作成し、定数に代入する
const li = document.createElement('li');
// 作成したli要素にテキストを追加する
li.textContent = 'JavaScriptで新しく作成したリスト3';
// li.innerHTML = '<a href="#">JavaScriptで新しく作成したリスト3</a>';
// ul要素の末尾にli要素を追加する
document.querySelector('ul').appendChild(li);