東京都で開催する初心者向けのJavaScriptとjQueryを使ってホームページ制作の1日集中セミナーです。 JavaScript・jQueryの入門講座なら、神田ITスクール!

4.2 DOMを操作してみよう

DOMを操作してみよう

4.2 DOMを操作してみよう

 それでは、DOMを使ってHTMLとCSSを操作してみましょう。
 この節での目標は、DOMを扱ってHTMLの要素を動的に変更する方法を学ぶことです。

4.2.1 テキストの書き換えを行うプログラム

 テキストを含むHTML要素を取得し、中身のテキストを書き換えてみましょう。

ファイル名      :change_text.html

➢ change_text.html

<html>
      <head>
          <title>テキストの書き換えを行うプログラム</title>
      </head>
      <body>
            <h1>テキストの書き換えを行うプログラム</h1>
            <p id="hoge">テキストの書き換え</p>
            <button id="btn">テキストを変更</button>
            <script type="text/javascript">

            	// ボタンを押したら
            	document.getElementById('btn').onclick = function() {
                      var element = document.getElementById('hoge');
                      element.innerHTML = "テキストを書き換えました";
            		}

            </script>
    </body>
</html> 

実行結果
ボタンを押す前の画面

ボタンを押した後の画面

解説

 まず12行目、15行目の「document.getElementById(‘btn’).onclick = function() { ~ }」部分は、button要素をid名「btn」で取得し、クリックイベントを指定しています。イベントについては、5章で詳しく説明いたします。こうすることで、ボタンが押されたときに、処理が実行されるようになります。

   12: document.getElementById('btn').onclick = function() {

 13行目は、document.getElementByIdメソッドを使って、id名「hoge」のHTML要素を取得し、変数elementに代入しています。document.getElementByIdメソッドは、与えられたid名を持つ要素を返しすので、id名「hoge」の要素「<p id=”hoge”>テキストの書き換え</p>」を取得して変数elementに代入していることになります。

   13: var element = document.getElementById('hoge');

 14行目では、innerHTMLプロパティを使用して、取得した要素のHTMLを「テキストを書き換えました」に変更しています。

   14:   element.innerHTML = "テキストを書き換えました";
   15: }

 テキストを変更する際の基本構文は下記のようになります。

書式:テキスト変更の基本構文

 DOMを使ってHTMLの要素が動的に変更されるイメージができたでしょうか?

4.2.2 画像の書き換えを行うプログラム

 続いて、HTMLのimg要素を取得し、src属性を変更して画像を書き換えてみましょう。
 画像を使うので、先ほどよりもDOMを使うイメージが沸きやすいかもしれません。

①ソースフォルダ    :javascript/ch04
②ファイル名      :change_image.html

 使用する画像を下記のURLにアクセスし、ダウンロードを行ってください。
 http://www.stepbystep-approach.com/element/javascript/img.zip
 ダウンロードを行い、解凍したimgフォルダは「javascript」フォルダの中に移動してください。

➢ change_image.html

<html>
      <head>
            <title>画像の書き換えを行うプログラム</title>
      </head>
      <body>
            <h1>画像の書き換えを行うプログラム</h1>
            <img src="../img/cat.jpg" id="cat">
            <button id="btn">画像を変更</button>
            <script type="text/javascript">

                  // ボタンを押したら
                  document.getElementById('btn').onclick = function() {
                      var element = document.getElementById('cat');
                      element.src = "../img/dog.jpg";
                  }
            
            </script>
      </body>
</html>

実行結果
ボタンを押す前の画面

ボタンを押した後の画面

解説
 12行目でbutton要素をid名「btn」で取得し、クリックイベントを指定しています。

   12: document.getElementById('btn').onclick = function() {

 13行目は、document.getElementByIdメソッドを使って、id名「cat」のHTML要素を取得し、変数elementに代入しています。今回のサンプルでは、「<img src=”cat.jpg” id=”cat”>」を取得して変数elementに代入しています。

   13: var element = document.getElementById('cat');

 14行目では、srcプロパティを使用して、取得した要素のsrc属性を「dog.jpg」に変更しています。

   14:   element.src = "../img/dog.jpg ";
   15: }

 画像を変更する際の基本構文は下記のようになります。

書式:画像変更の基本構文

4.2.3 文字色の変更を行うプログラム

 スタイルを操作して、文字色を変更してみましょう。

①ソースフォルダ   :javascript/ch04
②ファイル名     :change_text_color.html

➢ change_text_color.html

<html>
      <head>
            <title>文字色の変更を行うプログラム</title>
      </head>
      <body>
            <h1>文字色の変更を行うプログラム</h1>
            <p id="hoge">文字色が変わります</p>
            <button id="btn">文字色を変更</button>
            <script type="text/javascript">
  
                  // ボタンを押したら
                  document.getElementById('btn').onclick = function() {
                        var element = document.getElementById('hoge');
                        element.style.color = "red";
                  }
 
           </script>
      </body>
</html>

実行結果
ボタンを押す前の画面

ボタンを押した後の画面

解説

 12行目でbutton要素をid名「btn」で取得し、クリックイベントを指定しています。

   12: document.getElementById('btn').onclick = function() {

 13行目は、document.getElementByIdメソッドを使って、id名「hoge」のHTML要素を取得し、変数elementに代入しています。今回のサンプルでは、「<p id=”hoge”>文字色が変わります</p>」を取得して変数elementに代入しています。

   13: var element = document.getElementById('hoge');

 13行目では、styleプロパティのcolorプロパティを使用して、文字色を変更することができるため、文字色を「red」に変更しています。

   14:   element.style.color = "red";
   15: }

 文字色を変更する際の基本構文は下記のようになります。

書式:文字色変更の基本構文

4.2.4 表示・非表示を行うプログラム

 スタイルを操作して、HTML要素を非表示にしてみましょう。

①ソースフォルダ   :javascript/ch04
②ファイル名     :change_display.html

➢ change_display.html

<html> 
      <head>
            <title>表示・非表示を行うプログラム</title>
      </head>
      <body>
            <h1>表示・非表示を行うプログラム</h1>
            <img src="../img/cat.jpg" id="cat">
            <button id="btn">非表示</button>
            <script type="text/javascript">

         // ボタンを押したら
                  document.getElementById('btn').onclick = function() {
                        var element = document.getElementById('cat');
                        element.style.display = "none";
                  }

            </script>
      </body>
</html>

実行結果
ボタンを押す前の画面

ボタンを押した後の画面

解説
 12行目でbutton要素をid名「btn」で取得し、クリックイベントを指定しています。

   12: document.getElementById('btn').onclick = function() {

 13行目は、document.getElementByIdメソッドを使って、id名「cat」のHTML要素を取得し、変数elementに代入しています。今回のサンプルでは、「<img src=”cat.jpg” id=”cat”>」を取得して変数elementに代入しています。

   13: var element = document.getElementById('cat');

 14行目では、styleプロパティのdisplayプロパティを使用して、非表示にすることができるため、非表示に変更しています。

   14:   element.style.display = "none";
   15: }

 表示・非表示を変更する際の基本構文は下記のようになります。

書式:非表示の基本構文

書式:表示の基本構文

4.2.5 その他のスタイルを指定を行うプログラム

 複数のスタイルを操作して、見た目を変更してみましょう。

①ソースフォルダ   :javascript/ch04
②ファイル名     :other_style.html

➢ other_style.html

<html>
      <head>
            <title>その他のスタイルを指定を行うプログラム</title>
      </head>
      <body>
            <h1>その他のスタイルを指定を行うプログラム</h1>
            <p id="hoge">Sample</p>
            <button id="btn">スタイルを変更</button>
            <script type="text/javascript">
 
                  // ボタンを押したら
                  document.getElementById('btn').onclick = function() {
                        var element = document.getElementById('hoge');

                        // styleプロパティのcolorプロパティに「rgb(255, 255, 255)」を代入
                        element.style.color= "rgb(255, 255, 255)";
 
                        // styleプロパティのfontSizeプロパティに「60px」を代入
                        element.style.fontSize= "60px";
                        
                        // styleプロパティのborderプロパティに「3px solid orange」を代入
                        element.style.border = "3px solid orange";
                        
                        // styleプロパティのfontStyleプロパティに「italic」を代入
                        element.style.fontStyle= "italic";
                        
                        // styleプロパティのpaddingプロパティに「20px」を代入
                        element.style.padding= "20px";
                        
                        // styleプロパティのbackground-colorプロパティに「#cccccc」を代入
                        element.style.backgroundColor = "#cccccc";
                  }
   
          </script>
      </body>
</html>

実行結果
ボタンを押す前の画面


ボタンを押した後の画面

解説

 12行目でbutton要素をid名「btn」で取得し、クリックイベントを指定しています。

   12: document.getElementById('btn').onclick = function() {

 13行目は、document.getElementByIdメソッドを使って、id名「hoge」のHTML要素を取得し、変数elementに代入しています。今回のサンプルでは、「<p id=”hoge”>Sample</p>」を取得して変数elementに代入しています。

   13: var element = document.getElementById('hoge');

 16~31行目では、styleプロパティのcssのプロパティを使用して、スタイルを変更しています。

   16: element.style.color= "rgb(255, 255, 255)";
   19: element.style.fontSize= "60px";
   22: element.style.border = "3px solid orange";
   25: element.style.fontStyle= "italic";
   28: element.style.padding= "20px";
   31: element.style.backgroundColor = "#cccccc";

◉ポイント

・ “font-size”のような場合、JavaScriptでは変数名やプロパティ名にハイフンを使えないため、”fontSize”のように、ハイフンを無くして、ハイフンの直後の文字を大文字にして書かなければいけません。

NEXT>> 4.3 本章のまとめ

ご不明点はお問い合わせフォームからご連絡ください。

セミナー一覧

法人向けプログラミング研修

Java、PHPの社員研修|新人研修

chromeデベロッパーツール

他のJavaScript講座・スクールのご紹介

ホームページ制作・保守

ホームページ制作・保守

HTML&CSSセミナーも人気!

HTML&CSSセミナーも人気!

まずはHTMLとCSSの知識が必要な方は、こちらのセミナーがおすすめです。
HTML&CSSセミナーはこちら

当JavaScript講座を受講前に受講するHTML講座

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

PAGETOP
Copyright © 株式会社FusionOne 神田ITスクール All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.