JavaScript初心者がお送りする、JavaScript(基礎編)リファレンスサイトです。

DOMとは

DOM(Document Object Model)とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。
このDOMを操作することによって、要素の値をダイレクトに操作できます。
例えば<p>の中身のテキストを変更したり、<img src="sample.jpg">のsrcの中身を変更して別の画像に差し替えるといったことができます。

DOMツリーとは

xmlやhtmlドキュメントをツリー構造として表現したものです。
以下、サンプルソースのDOMツリーを視覚化してみました。

サンプルソース

<html>
<head>
<title>DOMってなにー? │ JavaScriptのサイト</title>
</head>
<body>
<h1>JavaScriptのサイト</h1>
<h2>DOMってなにー?</h2>
<p><strong>Document Object Model</strong>の略称です。</p>
</body>
</html>

イメージ画像:DOMツリー

イメージ画像:DOMツリー

DOMツリー内の各要素を「ノード」と言います。

イメージ画像:ノード

ぺーじとっぷへ