🏗
【DOM】要素の取得・作成・追加・削除
はじめに
この記事は学習ノートです。
JavaScriptのDOMについて、学んだことをまとめました。
DOMとは
- Document Object Model(ドキュメントオブジェクトモデル)
- HTML文書を家系図のようにツリーで表現する
- 「DOM = JavaScript言語の一部」ではなく、「DOM = ウェブサイトを構築するために使用されるWeb APIの1つ」
- JavaScriptで書かれているけど、DOMを使用してウェブページとその要素にアクセスしているって感じ
要素を取得する
Document.querySelector()
- 指定されたセレクターまたはセレクター群に一致する、文書内の最初のElement(要素)を返す
index.html
<body>
<h1 id="test">Hello World.</h1>
<p class="sample">Hi.</p>
</body>
script.js
const h1 = document.querySelector("h1");
console.log(h1);
// <h1 id="test">Hello World.</h1>
const test = document.querySelector("#test");
console.log(test);
// <h1 id="test">Hello World.</h1>
const sample = document.querySelector(".sample");
console.log(sample);
// <p class="sample">Hi.</p>
Document.getElementById()
- 指定されたidが一致する要素を返す
index.html
<body>
<h1 id="test">Hello World.</h1>
</body>
script.js
const test = document.getElementById("test"); // #はつけない
console.log(test);
// <h1 id="test">Hello World.</h1>
Document.getElementsByClassName()
- 指定されたクラス名に一致するすべての要素を返す
index.html
<body>
<h1 class="sample">Hello World.</h1>
<p class="sample">Hi</p>
</body>
script.js
const sample = document.getElementsByClassName("sample"); // .はつけない
console.log(sample);
// HTMLCollectionに複数の要素が格納された状態で取得できる
👇 getElementsByClassNameの取得結果
Document.querySelectorAll()
- 指定されたセレクターに一致するすべての要素を返す
index.html
<body>
<p>Hello</p>
<p>Hi</p>
</body>
script.js
const p = document.querySelectorAll("p");
console.log(p);
// NodeListに複数の要素が格納された状態で取得できる
👇 querySelectorAllの取得結果
要素の作成
Document.createElement()
- 引数で指定した要素を作成する
script.js
const div = document.createElement("div");
console.log(div);
// <div></div>
要素の追加
Node.appendChild()
- 指定した親ノードに対して、子ノードの末尾に要素を追加する
script.js
const ul = document.createElement("ul");
const li = document.createElement("li");
li.textContent = "test";
ul.appendChild(li);
console.log(ul);
// <ul>
// <li>test</li>
// </ul>
要素の削除
Node.removeChild()
- 指定した親ノードの子ノードを削除する
index.html
<ul>
<li>test</li>
</ul>
script.js
const ul = document.querySelector("ul");
const li = document.querySelector("li");
ul.removeChild(li);
console.log(ul);
// <ul></ul>
DOM・Node・Elementの違い
- DOM：ツリー状のデータ構造のこと
- Node：DOMツリーを構成するひとつひとつのデータのこと
- Element：Nodeの種類の一種で、HTMLの要素を表すNodeのこと
参考
Discussion