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

JavaScript HTML DOMのnodeNameプロパティとは？使い方とサンプルコードを解説

JavaScriptにおけるnodeNameプロパティは、ノードの名前（タグ名）を取得するために使用されるプロパティです。HTML要素ノードの場合、要素のタグ名が大文字で返されます。例えば、<h1>要素であれば「H1」、<p>要素であれば「P」という文字列が返ります。

nodeNameプロパティの基本仕様

  • 読み取り専用： 値を取得することはできますが、設定することはできません。
  • 戻り値： 要素ノードの場合はタグ名（大文字）、テキストノードの場合は「#text」、ドキュメントノードの場合は「#document」が返されます。

実装例

以下のコードを実行すると、JavaScriptでnodeNameプロパティを使って各要素のノード名を取得し、画面に表示することができます。

<!DOCTYPE html>
<html>
   <body>
      <h1 id="id1">Tutorials</h1>
      <p id="id2">Demo Content</p>
      <p id="id3"></p>
      <p id="id4"></p>
      <script>
         document.getElementById("id3").innerHTML = document.getElementById("id1").nodeName;
         document.getElementById("id4").innerHTML = document.getElementById("id2").nodeName;
      </script>
   </body>
</html>

出力結果

このコードを実行すると、以下のように表示されます。

  • id1（<h1>要素）のnodeName → H1
  • id2（<p>要素）のnodeName → P

まとめ

nodeNameプロパティは、DOM操作においてノードの種類やタグ名を確認したい場合に便利です。特に、条件分岐で特定の要素タイプだけを処理したい場合などに活用できます。なお、関連するnodeTypeプロパティと組み合わせることで、より柔軟なDOMトラバース処理を実現できます。

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

    HTML DOMのnodeNameプロパティとはHTML DOMのnodeNameプロパティは、ノードの名前に対応する文字列を返します。要素ノード、属性ノード、コメントノードなど、ノードの種類に応じて異なる値が返されるため、DOM操作の際にノードの種類を判別したい場合に非常に役立ちます。nodeNameプロパティの構文nodeNameプロパティの構文は以下のとおりです。文字列値を返します。Node.nodeNameこのプロパティは読み取り専用で、呼び出すだけでノード名を文字列として取得できます。ノードの種類ごとの戻り値nodeNameプロパティの戻り値は、ノードの種類によって以下のように異なり

  2. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ