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

JavaScriptでHTMLのH1要素のテキストを変数に取得する方法

HTML内の <h1> 要素のテキストをJavaScriptの変数に格納したい場合は、document.getElementById() と innerHTML を組み合わせて使用するのが基本です。

H1の値を取得する基本的な方法

document.getElementById('id名').innerHTML と記述することで、指定したIDを持つ要素の内容（テキスト）を取得できます。

例として、次のようなH1見出しがHTMLにあると仮定しましょう。

<h1 id="demo">これはJavaScriptのデモプログラムです……</h1>

このH1の値を取得するには、以下のようにコードを書きます。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<h1 id="demo">これはJavaScriptのデモプログラムです……</h1>
<script>
    var data = document.getElementById('demo').innerHTML;
    console.log("取得したデータは = " + data);
</script>
</body>
</html>

コードのポイント

  • document.getElementById('demo'): IDが「demo」である要素を取得します。
  • .innerHTML: 取得した要素の中身（テキストやHTML）を文字列として返します。
  • console.log(): 変数に格納した値をブラウザの開発者ツール（コンソール）に出力して確認できます。

プログラムの実行方法

上記のプログラムを実行するには、ファイルを「index.html」などの任意のファイル名で保存し、そのファイルを右クリックしてください。VS Codeエディターの場合は、「Open with Live Server」を選択すると、ブラウザ上で簡単に動作確認ができます。

実行結果

プログラムを実行すると、ブラウザにはH1見出しのテキストが表示され、開発者ツールのコンソールには以下のように取得したデータが出力されます。

取得したデータは = これはJavaScriptのデモプログラムです……

このように、getElementById() と innerHTML を使えば、わずか1行のコードでH1要素の値をJavaScriptの変数へ取得することができます。同様の手法は <p> や <div> など、他のHTML要素にも応用可能です。

  1. JavaScriptでテキストボックスの入力値を取得して表示する方法

    JavaScriptでは、valueプロパティを使ってテキストボックスに入力された値を取得し、innerHTMLを使うことでその値を段落（<p>要素）に表示することができます。この仕組みは、フォームの入力内容をリアルタイムに画面へ反映させたい場合などによく使われる基本的なテクニックです。 コード例 以下が実際のサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">  

  2. HTMLのvalue属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのvalue属性は、HTMLドキュメント内で要素の初期値（デフォルト値）を定義するための属性です。この属性は、button、input、meter、li、option、progress、paramといったHTML要素に対して使用できます。value属性はフォームやUIコンポーネントにおいて重要な役割を果たします。例えば、input要素では入力欄にあらかじめ表示されるテキストを指定でき、meter要素やprogress要素では現在の進捗状況を数値で表現できます。構文value属性の基本的な構文は以下のとおりです。<tagname value="text">