Jump to the content

DOMを再入門して理解を深める 【種類編】

JavaScript

    DOMを再入門して理解を深める 【種類編】

    どうも、イソップです。

    DOMについての連載第2回目です。

    今回も前回に引き続き、DOMの基本的な部分を紹介します。

    ノード

    DOMを理解する上で外せないのが、ノードという概念です。
    説明するより見たほうが早いので、前回説明したDOMツリーのイメージを見てみましょう。

    DOMツリー

    この、Documentオブジェクトの下にあるもの全てが、DOMの中ではノードと呼ばれます。 タグではありませんよ、ノードです。

    ノードには、主に次のような種類があります。

    ノードノードタイプ定数ノードタイプの値インターフェース
    要素ノードELEMENT_NODE1Element
    属性ノードATTRIBUTE_NODE2Attr
    テキストノードTEXT_NODE3Text
    コメントノードCOMMENT_NODE8Comment
    文書ノードDOCUMENT_NODE9Document

    要素ノードはHTMLのタグ、テキストノードはタグ内のテキスト、コメントノードはHTMLのコメント、とイメージしてもらうとわかりやすいですね。 驚くべき事実は、テキストもノードのひとつなんです。

    また、上記の各ノードのことを要素と、呼ぶこともあります。

    上記の表をDOMツリーに照らしあわせてみると、次のようになります。

    ノードの種類

    DOMを取得して、スタイルを変更したり、テキストを書き換えたりするということは、 このノードにアクセスするということなんですね。

    なんとなくイメージ湧いてきましたか?

    上で紹介したイメージはくれぐれも忘れないでください。

    Documentオブジェクト

    DOMツリーの一番上にあるのがDocumentオブジェクトです。 DOMでは、全てのHTML要素はDocumentオブジェクトに属しています。 つまり、HTMLドキュメント全体を表します。

    Documentオブジェクトは window オブジェクトのプロパティです。 window は省略可能なので、次のようにアクセスできます。

    • document

    ちなみに、このDocumentオブジェクトには、html要素とbody要素が必ずオブジェクトのプロパティとして含まれています。 htmlにアクセスするには、 document.documentElementbody にアクセスするには document.body でアクセス可能です。 無駄にDOMを取得する必要が無いので、覚えておくと役立ちます。

    次回に続きます。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×