DOMとは
・webサイトに動きをつけるにはDOM動作の理解が必要
DOMとは、HTMLドキュメントをオブジェクトのように扱える仕組みのこと。
DOMを使えばJavaScriptからHTML要素を取得・作成・更新・削除するといった操作ができるようになる。
DOM操作の仕組み
ブラウザはHTMLファイルを読み込むと、自動的に以下のようなDOMツリーを生成する
DOMツリーを構成する各要素はノードと言われる
JavaScriptは各種メソッドを使ってこれらのノードにアクセスすることで、HTML要素の取得・作成・更新・削除などを行うことができます。これがDOM操作の仕組みです。
DOM操作の仕組みをまとめると、
①ブラウザがHTMLファイルを読み込むと、自動的にDOMツリーを生成する
②DOMツリーが生成されると、documentオブジェクトが使えるようになる
③ documentオブジェクトを使うと、JavaScriptでDOM操作ができる
※windowオブジェクトはJavaScriptが扱うオブジェクトの最上位に位置している
中には様々なオブジェクトやメソッドが入っている
DOM操作を行うときはまず、「どのHTML要素に動きを加えるか」という「操作の対象」を取得しなければならない＝HTML要素を取得しないとDOM操作ができないということです。
★HTML要素を取得するための主なメソッド★
・getElementById()：HTML要素をidで取得する
・getElementsByClassName()：HTML要素をclassで取得する
・querySelector()：HTML要素をCSSセレクタで取得する（最初の１つ）
・querySelectorAll()：HTML要素をCSSセレクタで取得する（すべて）
★DOM操作でHTML要素を作成するためのメソッド
・createElement()メソッド：HTML要素を新しく作成する
//新しくli要素を作成し、定数に代入する
const li = document.createElement('li');
・textContent/ innerHTMLプロパティ：HTML要素にテキストを追加する
JavaScriptでHTML要素を作成した場合、ブラウザに表示するにはそのHTML要素を
documentオブジェクトに追加する必要がある
//作成したli要素にテキストを追加する
li.textContent = 'VavaScriptで新しく作成したリスト';
li.innerHTML = '<a href="#">JavaScriptで新しく作成したリスト3</a>';
・appendChild()メソッド：作成したHTML要素を子要素として末尾に追加する
作成したHTML要素をdocumentオブジェクトに追加するには上記のメソッドを使用する
//ul要素の末尾にli要素を追加する
document.querySelector('ul').appendChild('li');