HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのnodeTypeプロパティとは？使い方と戻り値の一覧を解説

HTML DOMのnodeTypeプロパティは、ノードの種類に対応する数値を返すプロパティです。JavaScriptでDOMを操作する際、対象のノードが要素なのかテキストなのかコメントなのかを判別したい場面でよく使われます。

nodeTypeプロパティの構文

構文は以下のとおりです。読み取り専用のため、値を取得することしかできません。

Node.nodeType

戻り値の一覧

nodeTypeプロパティが返す主な数値は次のとおりです。

  • 1 … 要素ノード（element node）
  • 2 … 属性ノード（attribute node）
  • 3 … テキストノード（text node）
  • 8 … コメントノード（comment node）

注意： タグ間にある空白や改行などのホワイトスペースも、テキストノードとして扱われる点に留意してください。

HTML DOM nodeTypeプロパティの使用例

それでは、nodeTypeプロパティを使った具体的なサンプルコードを見ていきましょう。この例では、body要素・input要素・コメントノードそれぞれのnodeTypeの値を取得して画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM nodeType</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-nodeType</legend>
            <label for="example">Example site: </label>
            <input id="urlSelect" type="url" name="urlAddress" value="https://www.example.com" disabled>
            <input type="button" onclick="getNodeTypes()" value="Get all Types">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var urlSelect = document.getElementById("urlSelect");
    var commentNode = document.createComment("My Example URL");
    urlSelect.appendChild(commentNode);
    var divDisplay = document.getElementById("divDisplay");
    function getNodeTypes() {
        divDisplay.textContent = 'Body: '+document.body.nodeType;
        divDisplay.textContent += ' & input: '+urlSelect.nodeType;
        divDisplay.textContent += ' & comment: '+commentNode.nodeType;
    }
</script>
</body>
</html>

実行結果

「Get all Types」ボタンをクリックする前の画面は以下のとおりです。

HTML DOMのnodeTypeプロパティとは？使い方と戻り値の一覧を解説

「Get all Types」ボタンをクリックした後には、各ノードの種類を表す数値が表示されます。

HTML DOMのnodeTypeプロパティとは？使い方と戻り値の一覧を解説

このように、document.body.nodeTypeは要素ノードなので「1」、コメントノードに対しては「8」が返されることが確認できます。nodeTypeプロパティを活用すれば、DOMツリー内のノードを種類ごとに柔軟に判別・処理できるようになります。

  1. HTML DOM Input Number value プロパティとは？取得・設定方法を解説

    HTML DOM の Input Number value プロパティは、type=number を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、input 要素の value 属性の値を取得したり、設定したりすることができます。要素の初期値（デフォルト値）を指定する目的でも活用され、ユーザーが入力を行うとその値に更新されます。 構文 value プロパティの構文は以下の通りです。 値を設定する場合 numberObject.value = number; ここで number には、数値フィールドに設定したい値を指定します。 サンプルコ

  2. HTML DOM Input Number type プロパティとは？使い方をわかりやすく解説

    HTML DOM の Input Number type プロパティは、type 属性が「number」に設定された input 要素に関連付けられたプロパティです。このプロパティは、数値入力フィールド（<input type=number>）に対して常に文字列「number」を返します。JavaScript でフォーム要素の種類を動的に確認したい場合などに役立ちます。 構文 Input Number type プロパティの構文は以下のとおりです。 numberObject.type サンプルコード HTML DOM Input Number type プロパティの具体的な使用