JavaScriptからHTMLを操作する方法を紹介します。

HTML要素の取得

特定のHTMLの要素(タグ)を取得する方法です。 その要素が、id属性を持っている場合は、document.getElementByIdで取得できます。 例えば、HTMLファイルに、以下のような要素があったとします。

<div id="chart"></div>

この場合、以下のように取得できます。

var chart = document.getElementById("chart");

さらに、その要素の値を取得するには、".value"などを使います。

var chartValue = document.getElementById("chart").value;

例えば、以下のようなformのinputがあったとします。

<input id="T" type="text">

JavaScriptで、テキストボックスに入力された値を取得するためには、以下のようにします。

var inputValue = document.getElementById("T").value;

selectで選択された値を取得することも、もちろんできます。

<select id="color">
  <option value="blue">blue</option>
  <option value="red">red</option>
  <option value="green">green</option>
</select>

select要素のidを指定して、value変数を取得すればOKです。

var selectValue = document.getElementById("color").value;

HTML要素の設定

HTML要素の値を設定する方法です。 ここで、「値」という表現には注意が必要です。 以下のように、value属性のこと(以下の例では0となっている部分)を「値」と呼ぶこともあります。

<input id="number" type="text" value="0">

value属性の値を変更する場合は、以下のように、取得した要素のvalue変数に値を代入すればよいです。

document.getElementById("number").value = 999;

一方で、以下のように、HTMLの要素の中身(以下の例ではappleの部分)を「値」と呼ぶこともあります。

<span id="msg">apple</span>

この場合は、以下のように、textContent変数やinnerHTML変数に値を代入すれば、HTML要素の中身が変更されます。

document.getElementById("msg").textContent = "Orange";

HTML要素の削除

remove関数を使うことで、HTML要素を削除することも可能です。 以下の例では、ID属性がchartとなっている要素を取得して、削除します。

var chart = document.getElementById("chart");
chart.remove();