🦁

【JavaScript】DOMについてまとめた

2023/01/16に公開約2,700字

はじめに

この記事は学習ノートです。
JavaScriptのDOMについて、学んだことをまとめました。

DOMとは

  • Document Object Model(ドキュメントオブジェクトモデル)
  • HTML文書を家系図のようにツリーで表現する
  • JavaScriptで操作するのはDOMであって、HTMLではない(HTMLファイルの中身は変わらない)

要素を取得する

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の取得結果
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の取得結果
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のこと

参考

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
https://zenn.dev/sqer/articles/2d4def0f07bf04c5cc47
https://kuroeveryday.blogspot.com/2018/11/difference-between-dom-and-node-and-element.html

Discussion

ログインするとコメントできます