現役エンジニア・デザイナーの備忘録ブログ

2021.10.20 / 更新日: 2022.9.18
JQuery・PHP

【js】JavaScriptのDOM操作について基本用語などまとめ

DOM操作とは

webページを読み込むと、ブラウザ内でDOM (ドム)と呼ばれるデータ構造が作られます。そのデータ構造に従って、内容が画面に表示されます。そして、このDOMをJavaScriptなどで操作することがDOM操作です。つまり“HTML文書などのマークアップ言語を自由に操作するための仕組み”ということです。DOM操作によって様々なことを実装できるようになり、表現の幅が広がります。

JavaScriptで操作しているのはあくまでもDOMです。JavaScriptで操作してもHTMLファイルが書き換えられるわけではありません。

JavaScriptのDOM操作について基本用語などまとめ

 

DOMのデータ構造について

webページを読み込んだ際に作られるデータ構造は、HTMLファイルと同じ構造になっています。構造内にある各データのことをNode(ノード)と呼び、このNodeで作られたツリー状のかたまりをDOMツリー(もしくはNodeツリー)と言います。

JavaScriptのDOM操作について基本用語などまとめ

 

Nodeには種類があり、HTMLの要素を表すElementノード、テキストや改行・空白を表すTextノードなどがあります。

 

DOMを操作してみよう

DOMはドキュメントという特殊なオブジェクトで扱うことができ、要素を取得するためのプロパティやメソッドが定義されています。セレクタ指定で取得するquerySelector()や、要素に指定されたidを元に取得すgetElementById()などがそれに該当します。

例えば、

<script>
const h1 = document.getElementById(“name”);
</script>

とすると、nameというidを持ったh1要素をまるごと取得することができます。

 

まとめ

・ブラウザ内でツリー状の階層構造を定義する

・webページとJavaScriptなどのプログラミング言語を繋げる

・階層構造の各オブジェクトをNode(ノード)と呼ぶ

 

ややこしい単語がたくさん出てきてこんがらがりますが、DOMの仕組みについて理解するお役に立てれば幸いです。

関連記事