【JavaScript・学習ログ4】DOM操作について

　教材:侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters

DOMの基本

HTMLドキュメントをオブジェクトのように扱える仕組みのこと。
JavaScriptからHTMLを操作できる。

// Documentオブジェクトを使用し、HTMLにアクセスする。
console.log(document.head); //headを呼び出し
console.log(document.body); //bodyを呼び出し

documentの１つ上の階層はwindowオブジェクトで、さまざまなオブジェクトやメソッドがこれに含まれる。

要素の取得

(1) getElementById()

HTML要素をIDで取得する。
同じidの複数設定はできない。

【出力】

console.log(document.getElementById('first-list'));

(2) getElementByClassName()

HTML要素をクラスで取得する。
idとは違い複数のHTML要素に設定できる。

【出力】

console.log(document.getElementsByClassName('heading'));

※またforループで複数の要素を１つずつ取り出すことも可能。

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

(3)quarySelector()

HTML要素をCSSセレクタ（.や#）で取得する。※最初に合致した要素のみ取得ｑ

console.log(document.querySelector('h1'));
console.log(document.querySelector('#second-heading'));
console.log(document.querySelector('.list'));

(4)quarySelectorAll()

HTML要素をCSSセレクタで取得する。※合致した要素すべて取得

console.log(document.querySelectorAll('.heading'));
console.log(document.querySelectorAll('li'));

要素の追加

(1)createElement()メソッド

HTML要素を新しく作成する。引数には追加したい要素名を記述。

(2)textContent / innerHTMLプロパティ

HTMLに追加した文字列（HTMLタグ）をプロパティに代入。
・textContent 文字列
・innerHTML 文字列とHTMLタグ

(3)appendChild()メソッド

追加した要素を子要素として末尾に追加する。

// li要素を新しく作成
const li = document.createElement('li');
// 要素に値を代入
li.textContent = '新しく作成したリスト';
// ul要素の末尾に子要素としてliを追加
document.querySelector('ul').appendChild(li);

【追加前】

【追加後】

---

(まとめ)

• getで取得、queryでCSS指定して取得
• createで要素作成
• textContent 文字列、innerHTML 文字列とタグ
• appendChild 子要素として追加する