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

JavaScriptのHTML DOM「nodeValue」プロパティの使い方を解説

nodeValueプロパティとは

JavaScriptのDOM（Document Object Model）におけるnodeValueプロパティは、指定したノードの値を取得または設定するために使用されます。このプロパティを使うことで、テキストノードの内容や属性ノードの値などにアクセスできます。

nodeValueプロパティを使用する際は、対象となるノードを明示的に指定する必要があります。たとえば、要素の子ノードであるテキストノードの値を取得したい場合は、childNodesコレクションを経由して目的のノードにアクセスします。

主なポイント

  • 要素ノード（ELEMENT_NODE）の場合、nodeValueはnullを返します
  • テキストノード（TEXT_NODE）の場合、そのテキスト内容が返されます
  • 値の設定も可能なため、動的にテキストを変更することもできます

nodeValueプロパティの使用例

以下のコードは、ボタン要素内のテキストノードからnodeValueプロパティで値を取得する例です。実際にブラウザで実行して、動作を確認してみてください。

<!DOCTYPE html>
<html>
   <body>
      <p>ノードの値を取得します</p>
      <button>デモボタンのテキスト</button>
      <script>
         var val = document.getElementsByTagName("BUTTON")[0];
         var res = val.childNodes[0].nodeValue;
         document.write("<br>Node Value: " + res);
      </script>
   </body>
</html>

コードの解説

  1. getElementsByTagName("BUTTON")[0]：ドキュメント内の最初のbutton要素を取得します。
  2. val.childNodes[0]：button要素の子ノード（テキストノード）にアクセスします。
  3. .nodeValue：そのテキストノードの値、つまりボタンに表示されている文字列を取得します。

このコードを実行すると、「Node Value: デモボタンのテキスト」という結果が表示され、button要素が持つテキストの内容が正しく取得できていることが確認できます。

なお、nodeValueは読み取り専用ではなく書き込みも可能です。例えば node.nodeValue = "新しいテキスト"; のように代入することで、テキストノードの内容を動的に更新できます。DOM操作の基礎として、ぜひ覚えておきましょう。

  1. HTML DOMのtagNameプロパティとは？要素のタグ名を取得する方法を解説

    HTML DOMのtagNameプロパティは、HTMLドキュメント内の指定した要素のタグ名（要素名）を文字列として返します。JavaScriptで要素の種類を判別したり、動的に処理を分岐させたりする際に役立つ基本的なプロパティです。 構文 tagNameプロパティの基本的な構文は以下の通りです。 element.tagName 押さえておきたいポイント HTMLドキュメントの場合：tagNameは常に大文字で返されます（例：<div>なら「DIV」）。 XMLドキュメントの場合：ソースコードに記述された元の大文字・小文字がそのまま保持されます。 nodeNameとの違い：no

  2. HTML DOMのnodeValueプロパティとは？ノード値の取得・設定方法を実例付きで解説

    HTML DOMのnodeValueプロパティは、ノードの値に対応する文字列を取得または設定するために使用されます。DOM操作において、テキストノードや属性ノードの中身を扱う際に非常に便利な基本プロパティです。構文（値の取得）ノードの値を文字列として取得する場合は、以下のように記述します。Node.nodeValue取得される戻り値は、ノードの種類によって以下のように異なります。ドキュメントノードおよび要素ノード：「null」が返される属性ノード：その属性の「value」の値が返されるテキストノードおよびコメントノード：それぞれの内容（テキストやコメント文）が返される構文（値の設定）nodeV