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

JavaScriptで要素の値を変数に抽出する方法

JavaScriptで要素の値を変数に抽出するには

SVGの<text>要素のテキスト値を変数に抽出したい場合は、textContentプロパティを使用します。基本的な書き方は以下の通りです。

document.getElementById("yourTextIdValue").textContent

getElementById()メソッドで対象の要素をIDから取得し、そのtextContentプロパティを参照することで、要素内のテキストを文字列として変数に格納できます。

textContentとinnerHTMLの違い

なお、SVG要素の場合はinnerHTMLよりもtextContentを使う方が確実です。textContentはマークアップを含まない純粋なテキストのみを返すため、値の抽出に適しています。

サンプルコード

実際に動作する完全なHTMLコードの例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<svg>
  <text id="myText" x="100" y="100">This is the JavaScript....</text>
</svg>
<script>
    var originalText = document.getElementById("myText").textContent;
    console.log(originalText);
</script>
</body>
</html>

この例では、IDが「myText」の<text>要素を取得し、そのテキスト内容を変数originalTextに代入しています。その後、console.log()でコンソールに出力して確認できます。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名をanyName.html（index.html）として保存し、VS Codeエディタでファイルを右クリックして「Open with Live Server」を選択してください。ブラウザが起動し、ページが表示されます。

実行結果

コードを実行すると、ブラウザの開発者ツール（コンソール）に以下のテキストが出力されます。

This is the JavaScript....

このように、textContentプロパティを使えば、わずか1行のコードで<text>要素の値を簡単に変数へ抽出できます。ボタンクリックなどのイベントと組み合わせれば、動的にテキストを取得して処理することも可能です。

  1. JavaScriptでHTMLのdiv要素内のテキストを一括置換する方法

    Webページ上の複数の要素に対して、特定のテキストをまとめて差し替えたいケースはよくあります。たとえば、見出し（h2タグなど）に入っている文字列を、ページ内のすべてのspan要素に反映させたい場合などが該当します。 このような処理を実現するには、document.querySelectorAll() を使用します。あわせて getElementsByClassName() を組み合わせることで、クラス名を指定して対象のテキストを取得できます。 実装のポイント document.querySelectorAll(.my-main-div-class span) で、親要素（div）の中にあるす

  2. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要