- 公開日: 2018年04月26日
JavaScriptによるHTML要素の変更を徹底解説
ユーザーの入力に合わせてページの内容を変えたい。処理が終わったら、結果を表示したい。Web制作では、「状況に応じてページの内容を変更する」必要が出てくる機会も多いでしょう。 JavaScriptでは、「HTML要素のオブジェクト」を取得し属性などにアクセスできるので、こうした機能も簡単に実現できます。
HTML要素へのアクセス
JavaScriptでは、埋め込まれているページのHTML要素をオブジェクトとして取得し操作することができます。HTML要素のid属性を指定するなどの形でHTML要素を取得（検索）し、属性（プロパティとして保持している各種状態）を参照・変更したり、メソッドを呼び出すことができるのです。
HTML要素にidを付けてJavaScriptから扱えるようにするには、JavaScriptから参照できるdocumentオブジェクトのgetElementById()を使います。
まず
<p id="test_line">test</p>
のようにJavaScriptから扱うHTML要素にid属性を設定して、JavaScriptのコードでdocument.getElementById()にidの文字列を渡すと、HTML要素を取得できます。
var elm = document.getElementById("test_line");
JavaScritpでHTML要素の属性を変更する
このHTML要素（Element）オブジェクトには、たくさんのプロパティがありますが、まずは文字列（textContent）とスタイルシート（style）のプロパティをいじってみましょう。
以下のテスト用HTMLファイルを作成して、Webブラウザで開いてみてください。
<!DOCTYPE html>
<html>
<body>
<script>
function test() {
var elm = document.getElementById('test_line');
elm.textContent = 'test change';
elm.style.background = '#ffcccc';
}
</script>
<p id="test_line">test</p>
<button onclick="test()">change</button>
</body>
</html>
下のボタンをクリックすると、ボタン上の文字列と背景色が変更されます。
HTML要素のtextContentは、HTML要素が持つ文字列としての内容を保持しています。JavaScriptから変更することも可能で、textContentを変更するとp要素であれば表示されている文字列も変更されます。
ただし、textContentに文字列を設定する場合は<>を含むタグなどを記述しても文字列として扱われるので、pタグの中にリンクやspan要素を入れる、といったことはできません。
つまり、「<」「>」も、そのまま表示されるわけです。上のコードでelm.textContentに設定する文字列を「test <span>change</span>」などと変更して確かめてみてください。
続いてstyleプロパティは、HTML要素のスタイルシート（css）を保持しています。こちらを変更する場合は、cssの値を属性（項目）ごとに変更することになります。背景色（cssのbackgroud）であれば、「style.background」としてアクセスするわけです。
ただし、「-」を含む項目はそのままではなく「-を除いて次の文字を大文字にする」ので、注意が必要です。
たとえば、margin-leftを設定するなら、以下のようにする必要があります。
elm.style.marginLeft = '64px';
さて、textContentではHTMLタグが無効化されましたが、innerHTMLプロパティを使うとHTMLタグも含めた内容（HTML要素が保持する内部のHTML全体）にアクセスできます。
textContentを変更する部分を以下のように変えて試してみましょう。
elm.innerHTML = 'test <span style="color: #0000ff;">change</span>';
今度は、changeの部分のタグが認識され、文字列もスタイルシートで設定した青で表示されるようになりました。
textContentよりもinnerHTMLの方が汎用性がありますが、設定する内容によっては意図しない表示になったりセキュリティ上の問題を生じする可能性もあります。特にユーザーが入力した文字列や外部から取得したデータをinnerHTMLに設定する際は、問題がないか慎重に確認するようにしましょう。
さらに「タグ全体」にアクセスできるouterHTML属性もありますが、こちらはあまり使う機会もないかもしれませんね（outerHTMLを変更することで、ページ内のp要素をdiv要素に変更したりできますが、そのような処理を行う必要が出てくる場面はほとんどないでしょう）。
続いて、ボタンを無効化してみましょうか。
ボタン（button要素）に限らずHTML要素の有効（操作可能）状態は、disabled属性で設定できます。disabledにtrueを設定すれば無効、falseなら有効、というわけです。
以下のHTMLファイルを作成し、Webブラウザで開いてみてください。
<!DOCTYPE html>
<html>
<body>
<script>
function test() {
alert("button clicked");
var elm = document.getElementById('test_line');
elm.innerHTML = 'test <span style="color: #0000ff;">change</span>';
elm.style.background = '#ffcccc';
var btn = document.getElementById('test_button');
btn.disabled = true;
}
</script>
<p id="test_line">test</p>
<button id="test_button" onclick="test()">change</button>
</body>
</html>
今度は、ボタンをクリックするとalert()でメッセージ表示ダイアログを表示してから文字列と背景色を変更するようにしてみました。さらに、ボタンのdisabledをtrueにすることで無効化しています。
ボタンをクリックしてメッセージ表示が出てくると、ボタンが無効（Webブラウザ上では灰色の無効表示）になったはずです。クリックが無効になっているのでボタンを押しても、メッセージ表示は行われませんね。
実際の応用では、一度処理ボタンをクリックしたらボタンのdisabledをtrueに設定して再度処理ボタンをクリックできないようにする、といったことができそうです（これはブラウザ上の表示・ユーザーインターフェースレベルの処理なので、コード上でも複数回の処理を防ぐ仕組みを入れるべきです）。
HTML要素にクラスを設定する
HTML要素のスタイル設定では、「クラス（class）」ごとにまとめてスタイルを設定することも多いでしょう。複数のHTML要素に同じクラス名を付けることで、「クラスに設定されているスタイルシート」が適用されるようにするわけです。
cssで
.text1 {
color: #ff0000;
background: #00ffff;
}
.text2 {
color: #0000ff;
background: #ffff00;
}
のようにしておくと、HTML要素のクラス属性にtext1を設定すれば「水色地に赤字」で、text2を設定すれば「黄色地に青字」で表示されます。
JavaScriptでは、HTML要素のクラスにもclassNameプロパティでアクセスできるため、JavaScriptからクラスを変更して適用されるスタイルシートを変えることができます。
<!DOCTYPE html>
<html>
<head>
<style>
.text1 {
color: #ff0000;
background: #00ffff;
}
.text2 {
color: #0000ff;
background: #ffff00;
}
</style>
<body>
<script>
function test() {
var elm = document.getElementById('test_line');
elm.className = 'text2';
}
</script>
<p id="test_line" class="text1">test</p>
<button onclick="test()">change</button>
</body>
</html>
このHTMLをブラウザで開いてボタンをクリックしてみてください。
文字列には最初「text1」のクラスが設定されていますが、ボタンをクリックしたときに実行するJavaScriptでクラスをtext2に変更するようになっているため、文字の色と背景が変わります。
属性を直接設定するsetAttribute()
HTML要素のクラスは、setAttribute()で設定することもできます。これは、HTML要素の各種属性を直接変更するメソッドで、属性名と値を引数に指定します。
試しに
elm.className = 'text2';
の部分を
elm.setAttribute('class', 'text2');
としてみてください。同じ結果になりましたね。setAttribute()を使うと、間をスペースで区切って複数のクラスを設定することができます。
階層的なクラス・スタイルシート設計を行うページでHTML要素に複数のクラス名を割り当てる場合は、setAttribute()でクラスの変更を行うことになるでしょう。
setAttribute()は汎用的な「HTML要素に対する属性設定」を行う機能があるので、これまでstyleプロパティの個別項目から試してきたスタイルシートの変更も、setAttribute()でstyle属性を変更する形で行うことができます。
elm.setAttribute('style', 'color: #cccccc; background: #000000;');
とすると、elmが参照するHTML要素に対して「文字（前景）色を灰色、背景色を黒」とするスタイル設定を適用できるわけです。
複雑なスタイルシートの切り替えを行う場合は、予め切り替えるスタイル設定をcssの文字列として作成しておいてsetAttribute()で設定すると、効率的な処理を実現できる場合もあります。
addEventListener()によるイベントハンドラ追加
これまで、「クリックされたらtest()を呼び出す」といったイベント処理は、onclick属性に関数呼び出しを行うJavaScritp文を設定する形で行ってきました。これを、addEventListener()というメソッドで行うこともできます。
このaddEventLister()の一番簡単な使い方は
addEventListener(イベント名, 関数);
という形で、指定イベントが起きたときに実行される関数を「追加」できます（一つのイベントに対し、複数の関数を設定できるわけです）。
イベント名は、クリックされた時なら「click」、マウスカーソルが上に来た時なら「mouseover」などとします。onclik属性には「JavaScriptの文」を設定しましたが、addEventListener()では「関数」を設定する点に注意してください。
クリックされたらtest()を実行する場合は、「addEventListener('click', test)」のように関数名のみを指定します。
addEventLister()では関数を指定する形になるので、直接「イベント時に行う処理」を設定するonclickなどの属性よりも柔軟な「イベント処理システム」を構築できます（この辺りは、JavaScript関数の扱いに慣れないと活かしにくい利点ではありますが）。
今回は、JavaScriptからHTML要素の状態を変更する処理を試してみました。イベント処理と組み合わせることで、ユーザーが「迷わない」快適なWebページを作れるようになるので、ぜひ試してみてください。
- この記事を書いた人
- 宍戸輝光
