フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(DOM)HTMLノードタイプについて

DOMの定義では、htmlタグはいつくかのノードタイプに分けられます。よく使いそうなタイプを以下に記述しておきます。
ノード名の左の数値はelement.nodeTypeプロパティで取得できる値です。

// 基本的なノードの表示例。この場合は「1:BODY」と表示される
document.write(
    document.body.nodeType,
    ':',
    document.body.nodeName
);
ノードタイプ一例
1:ELEMENT_NODE
htmlのタグは全てElementノードになります。タグ名はnodeNameプロパティで取得できます。
2:ATTRIBUTE_NODE
属性値はこのノードタイプになります。但し、このタイプのノードを取得するには、element.attributesで取得する必要があります。
3:TEXT_NODE
タグ間に入るテキストは全てこのノードタイプになります。
8:COMMENT_NODE
html内に記述されたコメントはこのノードタイプになります。
9:DOCUMENT_NODE
htmlの最上位のノードです。1つのhtmlファイルに1つしか存在しないルートノードです。
ノードタイプを取得して表示するスクリプトのサンプル

以下のサンプルはhtmlタグをDOMを使用して、そのノードタイプを表示した場合の結果です。一番下に実際のスクリプトを記述しています。

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>学習用ページ</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!-- サンプルhtml -->
        <h1 id="header1" class="red" name="header_1">表示テスト</h1>
        <p>
        <ul>
            <li><a href="link_a.html" name="mylink">LINK A</a></li>
            <li><a href="link_b.html" name="mylink">LINK B</a></li>
        </ul>
        <form>
            <input type="text">
            <input type="submit">
        </form>
        </p>
    </body>
</html>

// 結果
// 9:#document
// 1:HTML
// 1:HEAD
// 1:META
// 1:META
// 1:TITLE
// 3:#text「学習用ページ」
// 1:LINK
// 1:BODY
// 8:#comment「サンプルhtml」
// 1:H1
// 3:#text「表示テスト」
// 1:P
// 1:UL
// 1:LI
// 1:A
// 3:#text「LINK A」
// 1:LI
// 1:A
// 3:#text「LINK B」
// 1:FORM
// 1:INPUT
// 1:INPUT
// 1:P

 

// 引数の子孫のノードタイプを表示する
function showNodeList(documentNode)
{
    // 引数として渡されたノードのタイプを表示
    if(documentNode.nodeType >= 0)
    {
        showNodeType(documentNode);
    }

    // 子孫が存在すれば、そのタイプも表示する
    if(documentNode.hasChildNodes)
    {
        var children = documentNode.childNodes;
        for(var i in children)
        {
            showNodeList(children[i]);
        }
    }
                   
    // 渡されたノードのタイプを書き出す
    //対象のノードエレメント
    function showNodeType(nodeElement)
    {
        // テキストノードで中身がからの場合は対象外にする
        if(nodeElement.nodeType == 3 && nodeElement.data.trim() == '')
        {
            return;
        }
        
        // ノード番号、ノードタイプ名、内容がある場合は内容も取得。
        var result = [];
        result[0] = nodeElement.nodeType + ':';
        result[1] = nodeElement.nodeName;
        if(nodeElement.data)
        {
            result[2] = '「' + nodeElement.data.trim() + '」';
        }
        result[3] = '<br />';

        // 書き出し
        document.write(result.join(""));
    }
}