ホーム » JavaScript DOM » JavaScriptにおけるドキュメントオブジェクトモデル

JavaScriptにおけるドキュメントオブジェクトモデル

概要: このチュートリアルでは、JavaScriptにおけるドキュメントオブジェクトモデルについて学習します。

ドキュメントオブジェクトモデル（DOM）とは

ドキュメントオブジェクトモデル（DOM）は、HTMLドキュメントを操作するためのアプリケーションプログラミングインターフェース（API）です。

DOMは、HTMLドキュメントをノードのツリーとして表現します。DOMは、ドキュメントの一部を効率的に追加、削除、および変更できる関数を提供します。

DOMは、HTMLおよびXMLドキュメントを操作するためのクロスプラットフォームかつ言語に依存しない方法であることに注意してください。

ノードの階層としてのドキュメント

DOMは、HTMLドキュメントをノードの階層として表現します。次のHTMLドキュメントを考えてみましょう。

<html>
    <head>
        <title>JavaScript DOM</title>
    </head>
    <body>
        <p>Hello DOM!</p>
    </body>
</html>Code language: HTML, XML (xml)

次のツリーは、上記のHTMLドキュメントを表しています。

JavaScript DOM

このDOMツリーでは、ドキュメントがルートノードです。ルートノードには、<html>要素である子ノードが1つあります。<html>要素は、ドキュメント要素と呼ばれます。

各ドキュメントには、ドキュメント要素が1つだけ存在できます。HTMLドキュメントでは、ドキュメント要素は<html>要素です。各マークアップは、ツリー内のノードで表すことができます。

ノードタイプ

DOMツリーの各ノードは、ノードタイプによって識別されます。JavaScriptは、整数を使用してノードタイプを決定します。次の表は、ノードタイプの定数を示しています。

定数値説明
Node.ELEMENT_NODE1<p>や<div>のようなElementノード。
Node.TEXT_NODE3ElementまたはAttr内の実際のText。
Node.CDATA_SECTION_NODE4<!CDATA[[ … ]]>のようなCDATASection。
Node.PROCESSING_INSTRUCTION_NODE7<?xml-stylesheet … ?>のようなXMLドキュメントのProcessingInstruction。
Node.COMMENT_NODE8<!-- … -->のようなCommentノード。
Node.DOCUMENT_NODE9Documentノード。
Node.DOCUMENT_TYPE_NODE10<!DOCTYPE html>のようなDocumentTypeノード。
Node.DOCUMENT_FRAGMENT_NODE11DocumentFragmentノード。

ノードのタイプを取得するには、nodeTypeプロパティを使用します。

node.nodeTypeCode language: CSS (css)

nodeTypeプロパティを上記の定数と比較して、ノードタイプを判別できます。例えば、

if (node.nodeType == Node.ELEMENT_NODE) {
    // node is the element node
}Code language: JavaScript (javascript)

nodeNameプロパティとnodeValueプロパティ

ノードには、ノードに関する特定の情報を提供する2つの重要なプロパティ、nodeNameとnodeValueがあります。

これらのプロパティの値は、ノードタイプによって異なります。たとえば、ノードタイプが要素ノードの場合、nodeNameは常に要素のタグ名と同じであり、nodeValueは常にnullです。

このため、これらのプロパティを使用する前にノードタイプをテストすることをお勧めします。

if (node.nodeType == Node.ELEMENT_NODE) {
    let name = node.nodeName; // tag name like <p>
}Code language: JavaScript (javascript)

ノードと要素

NodeとElementを混同しやすい場合があります。

ノードは、DOMツリー内の任意のオブジェクトの総称です。ドキュメントなどの組み込みDOM要素です。または、<div>や<p>のように、HTMLドキュメントで指定された任意のHTMLタグです。

要素は、特定のノードタイプNode.ELEMENT_NODE（1に等しい）を持つノードです。

言い換えれば、ノードは要素のジェネリックタイプです。要素は、ノードタイプNode.ELEMENT_NODEを持つノードの特定のタイプです。

次の図は、NodeタイプとElementタイプの関係を示しています。

Document Object Model in JavaScript

getElementById()とquerySelector()はElementタイプのオブジェクトを返すのに対し、getElementsByTagName()またはquerySelectorAll()はノードのコレクションであるNodeListを返すことに注意してください。

ノードの関係

どのノードも、DOMツリー内の他のノードとの関係を持っています。関係は、従来の家系図で説明されているものと同じです。

たとえば、<body>は<html>ノードの子ノードであり、<html>は<body>ノードの親です。

<body>ノードは、<head>ノードの兄弟です。これは、両方が同じ直接の親（<html>要素）を共有しているためです。

次の図は、ノード間の関係を示しています。

JavaScript DOM Node Relationships

まとめ

  • HTMLまたはXMLドキュメントは、従来の家系図のように、ノードのツリーとして表すことができます。
  • 各マークアップは、特定のノードタイプを持つノードとして表すことができます。
  • 要素は、ノードタイプNode.ELEMENT_NODEを持つノードの特定のタイプです。
  • DOMツリーでは、ノードは他のノードとの関係を持っています。
このチュートリアルは役に立ちましたか？
JavaScript DOM
前へ
JavaScript DOM
次へ
JavaScript getElementById
JavaScript getElementById