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

HTML DOMのnodeNameプロパティとは？使い方と戻り値をわかりやすく解説

HTML DOMのnodeNameプロパティとは

HTML DOMのnodeNameプロパティは、ノードの名前に対応する文字列を返します。要素ノード、属性ノード、コメントノードなど、ノードの種類に応じて異なる値が返されるため、DOM操作の際にノードの種類を判別したい場合に非常に役立ちます。

nodeNameプロパティの構文

nodeNameプロパティの構文は以下のとおりです。

文字列値を返します。

Node.nodeName

このプロパティは読み取り専用で、呼び出すだけでノード名を文字列として取得できます。

ノードの種類ごとの戻り値

nodeNameプロパティの戻り値は、ノードの種類によって以下のように異なります。

  • 要素ノード：大文字のタグ名（例：DIV、INPUT）
  • 属性ノード：属性の名前
  • コメントノード：「#comment」
  • ドキュメントノード：「#document」
  • テキストノード：「#text」

注意：HTML内の空白（ホワイトスペース）もテキストノードとして扱われます。

nodeNameプロパティの使用例

以下は、HTML DOMのnodeNameプロパティを使った具体的なサンプルコードです。ボタンをクリックすると、body要素・input要素・コメントノードそれぞれのnodeNameが画面に表示されます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM nodeName</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-nodeName</legend>
            <label for="example">Example site: </label>
            <input id="urlSelect" type="url" name="urlAddress" value="https://www.example.com" disabled>
            <input type="button" onclick="getNodeNames()" value="Get all names">
            <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 getNodeNames() {
        divDisplay.textContent = 'Body: '+document.body.nodeName;
        divDisplay.textContent += ' & input: '+urlSelect.nodeName;
        divDisplay.textContent += ' & comment: '+commentNode.nodeName;
    }
</script>
</body>
</html>

実行結果

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

HTML DOMのnodeNameプロパティとは？使い方と戻り値をわかりやすく解説

「Get all names」ボタンをクリックした後の画面です。body要素は「BODY」、input要素は「INPUT」、コメントノードは「#comment」と、それぞれのノード名が表示されます。このように、nodeNameプロパティを使えばノードの種類に応じた名前を簡単に取得できることが確認できます。

HTML DOMのnodeNameプロパティとは？使い方と戻り値をわかりやすく解説

  1. HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

    HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー

  2. 【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

    offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな