用語
DOM(Document Object Model)
読み方
ディーオーエム
説明
DOM(Document Object Model)は、ブラウザがHTMLやXML文書を解析し、ツリー構造として内部的に表現したものです。
JavaScriptがWEBページを操作するときは、必ずこのDOMを経由して要素を取得・変更します。
DOMのポイント
- ページ内のすべての要素は「ノード(node)」として扱われる
- JavaScriptは
document.getElementById()やquerySelector()を使ってDOMにアクセスする - 新しい要素の追加・削除、テキスト変更、クラス操作などが可能
使用例(JavaScript)
const title = document.querySelector('h1');
title.textContent = '変更後のタイトル';
こんなときに使う
- ボタンをクリックしたら表示を切り替えたい
- スクロールに応じてヘッダーの色を変えたい
- 動的にリスト要素を追加・削除したい
参考サイト・引用元
- MDN Web Docs: Document Object Model (DOM)
https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model - WHATWG HTML Standard
https://html.spec.whatwg.org/
