DOMとは　入門【超初心者向け】

JavaScriptで大活躍するDOM編です。ただしDOMとはなにかといわれると実際本当の説明がのっている文献はありません。いちおうノードとかオブジェクトとか解説しますが、プログラミング初心者の方はこのページはパスして下さい。

DOMの仕組み

DOMとは「Document Object Model」の略称です。

Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。

https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction

以上が説明です。

ね。だから初心者の方は飛ばしたほうがいいっていったでしょ？？？

以下は、初心者の方が覚えるべき事柄です。これなら大丈夫でしょ？

DOMとは、htmlのテキストボックスの値を取得したり文字や画像を書き換えたり、ボタンのいろを変更したりする仕組みのことです。

これなら大丈夫っぽい

実際にやってみる

DOMを使ったコードです。

<body>
<p id="ptag">ココの文字を変更する</p>
<button onclick="ck()">変更</button>
<script>
function ck() {
document.getElementById("ptag").style.color = "red"
}
</script>
</body>

サンプル（別窓）

「document.getElementById(“ptag”).style.color = “red”」←1文で色を変更できます。プログラムを作成するのは超簡単ですね

DOMの構造とは

htmlファイルはノードで構成されています。ノードとはhtmlの各要素やエレメントのこと。

<!DOCTYPE html>
<html lang=“ja”>
<head>
    <meta charset=“UTF-8”>
    <title>DOMの学習</title>
</head>
<body>
    <div>
        <h1>
            DOMとは
        </h1>
        <p>
            本当はめっちゃ簡単
        </p>
    </div>
    <div>
        <p>
            けどまわりくどい
        </p>
    </div>
</body>
</html>

うえのhtmlのノードを図にするとこんな感じ

このような構造をDOMという人もいます。最上位はdocumentノードになります。その下に階層てきに連なっています。上記で「要素ノード」はhtmlのページ（ファイルじゃない）そのものです。要素ノードの中に記述されている文章がテキストノードです。タグのなかにあるノードは属性ノードですね。

だからなんなのっていうことになりますが、だいたいこんなもんです。結局なんのことだかわからないです。

DOMにかんしてはこのくらいにしておきます。

 

今回はこれでおしまいです。

お疲れ様でした！

INDEX　 次のページ

ホーム