More than 1 year has passed since last update.

JavaScriptでDOMツリーを表示してNode,Elementを理解する

Posted at 2023-06-09

はじめに

CSSやHTMLの勉強をしていると、よくNode、Elementという言葉が出てくるのですがいまいち理解できなかったので、整理してみました。

結論

適当なhtmlを作成して、それのDOMツリー(もどき)を見て理解するのが一番分かりやすかったです。

sample.js

//ページ読み込み時にDOMツリー(もどき)を表示
window.addEventListener("DOMContentLoaded", () => {

    //すべてのNodeを表示
    let domTreeView = (i, node) => {
        //Nodeタイプ番号
        let types = [
            "",//0
            "ELEMENT_NODE",//1
            "ATTRIBUTE_NODE",//2
            "TEXT_NODE",//3
            "CDATA_SECTION_NODE",//4
            "ENTITY_REFERENCE_NODE",//5非推奨
            "ENTITY_NODE",//6非推奨
            "PROCESSING_INSTRUCTION_NODE",//7
            "COMMENT_NODE",//8
            "DOCUMENT_NODE",//9
            "DOCUMENT_TYPE_NODE",//10
            "DOCUMENT_FRAGMENT_NODE",//11
            "NOTATION_NODE",//12非推奨
        ];

        //自分自身
        console.log(
            String(i).padStart(i + 1, " "),//階層
            node,//Node
            node.nodeType,//Nodeタイプ番号
            types[node.nodeType]//Nodeタイプ文字列
        );

        //NodeがElementの場合はAttributeNodeも表示  
        if (node.nodeType == Node.ELEMENT_NODE) {
            node.getAttributeNames().forEach(name => {
                let attr = node.getAttributeNode(name);
                console.log(
                    "-> attr".padStart(i + 2 + "-> attr".length, " "),//階層
                    attr,//Node
                    attr.nodeType,//Nodeタイプ番号
                    types[attr.nodeType]//Nodeタイプ文字列
                );
            });
        }

        //すべての子Nodeについて処理
        node.childNodes.forEach(child => {
            //Nodeを再帰的に表示
            domTreeView(i + 1, child);
        });
    };

    //documentのNodeを表示
    domTreeView(0, document);
});

適当なhtmlを作成して、

sample.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="sample.js"></script>
</head>

<body>
    <div id="box">Hello</div>
    <!-- コメント -->
</body>

</html>

ブラウザで表示させたときの結果

document自身はDocumentノードであり、直下（先頭に1と表示されているもの）に2つのNodeがあります。

1つのDocumentTypeノード （<!DOCTYPE html>のこと）
1つのElementノード （<html>...</html>のこと）

つまり直下のElementノードとしては<html>...</html>の1つのみです。また<html>...</html>の中には、更に複数のNodeが階層的に存在します。

Elementノード <head>要素、<body>要素、<div>要素など
Textノード Helloだけでなく改行やスペースも含む
Commentノード

以下に示すようにElementはあくまでNodeを継承しているものの1つにすぎないということです。

継承関係

ノードの種類	例	nodeTypeの名前	数値
Element	<div>など	ELEMENT_NODE	1
Attribute		ATTRIBUTE_NODE	2
Text	<div>Hello</div>のHelloやhtml内の1行ごとの改行など	TEXT_NODE	3
CDATASection	<!CDATA[[ … ]]>	CDATA_SECTION_NODE	4
ProcessingInstruction	<?xml-stylesheet … ?>	PROCESSING_INSTRUCTION_NODE	7
Comment	<!-- -->	COMMENT_NODE	8
Document		DOCUMENT_NODE	9
DocumentType	<!DOCTYPE html>	DOCUMENT_TYPE_NODE	10
DocumentFragment		DOCUMENT_FRAGMENT_NODE	11

参考URL

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up