Webページの書き換え

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第3部 Webページのプログラミング
第17話:Webページの書き換え

目次



マンガ


















マンガ台詞

【1Page】
先生:今日は Webページの書き換え について説明する
遊:ゴクリ
    サイトを 改竄するの?
先生:いやいや そんな大それた ことはしない
    Webページの オブジェクトを 操作するだけだ
麗:オブジェクト?
    プログラムだけでなく Webページにも オブジェクトが あるんですか?
先生:そうだ
【2Page】
先生:Webページは ブラウザから見ると 1枚のシートみたいに見える
    これは プログラムから見ると 違うように見えるんだ
麗:違うように?
先生:プログラムからの 見え方を図で示そう
    『Window』の中に 『document』 その中に 『element』という 階層構造に なっている
        window
            document
                element
                    element
                        element
                        element
                            element
                        element
                    element
                    :
守:あれ?
    『document』って 『document.write()』の 『document』ですか?
先生:ああ いいところ に気付いたな
    『window』はブラウザを 『document』はWebページを 表すオブジェクトだ
    『window』は 省略可能で
    『window.document.write()』
    が本来の書き方なんだ
【3Page】
守:そうだったんだ
遊:ははーん 分かったわ
    このオブジェクトの プロパティを変更すれば 
    ブラウザの内容が 書き換わるのね!
先生:よく分かったな
遊:当然よ!
    私って 天才!
先生:それじゃあ やってみろ
遊:任せなさい!
遊:(いろいろと考える)
    すみません 分かりません
【4Page】
先生:そうだろう 教えてないからな
    じゃあ 今日の 本題に入るぞ
    HTMLファイルは タグでツリー状に なっている
        <html>
            <head>
            <body>
                <h1>
                    文字列
                <br>
                <div>
                    文字列
    まずは この各要素を 指定する方法を 知る必要がある
    その方法を 『DOM』と言う
        DOM = Document Object Model
    それじゃあ 一番簡単な方法で 指定してみる
    タグに指定した『id』属性の値が 『target』の要素を選択して 書き換えてみるぞ
        <div id="target">
        『id』属性 『id』属性の値
【5Page】
        <html>
            <body>
                <div id="target">目標の文字列</div>

                <script type="text/javascript">
                <!--
                // 『id』が『target』の要素(<div id="target">目標の文字列</div>)を選択
                var ele = document.getElementById("target");    

                // 要素の内部のHTML(ここでは『目標の文字列』)を書き換え
                ele.innerHTML = "書き換えたよ!";
                // -->
                </script>
            </body>
        </html>
    『書き換えたよ!』と表示
守:『getElementById』で オブジェクトを 得ているんですね
先生:そうだ
    Webページ内の 各要素には 『innerHTML』という プロパティがある
    これを書き換えれば 見た目が変わる
        内部のHTMLのテキストを表すプロパティ
        要素(element).innerHTML
【6Page】
先生:また画像などでは 『src』プロパティを 書き換えれば 中身を変えられる
        要素(element).src
        画像などのファイルのパス
        <html>
            <body>
                <img src="pic/a.gif">
                <img id="target" src="pic/a.gif">

                <script type="text/javascript">
                <!--
                var ele = document.getElementById("target");
                ele.src = "pic/b.gif";    // 画像ファイルのパスを変更
                // -->
                </script>
            </body>
        </html>
    (2番目の画像が書き換わった様子)
    『id』が『targer』の画像を…
    『pic/b.gif』に変更!
遊:なるほど 便利ね
    でも 全部のタグに IDを書くのは面倒ね
先生:そういった場合は タグ名を使って 配列で取得すればよい
【7Page】
        <html>
            <body>
                <img src="pic/a.gif">
                <img src="pic/a.gif">
                <img src="pic/a.gif">
                <img src="pic/a.gif">
                <img src="pic/a.gif">

                <script type="text/javascript">
                <!--
                // 『<img>』タグの要素を、配列として選択
                var imgs = document.getElementsByTagName("img");

                // 配列に格納された各要素に対して処理を実行
                for (var i = 0; i < imgs.length; i ++) {
                    // 『width』(横幅)の値を書き換える
                    imgs[i].width = (1 + i) * 32;
                }
                // -->
                </script>
            </body>
        </html>
    注意点は 『getElement"s"ByTagName』と 複数形になっていることだ
    また 『DOM』ではないが 『location』を 変更すれば
    表示しているページを 移動できる
【8Page】
        <html>
            <body>
                <script type="text/javascript">
                <!--
                // 『location』の『href』を変更して
                // ブラウザで表示されているページを変更する
                window.location.href = "http://crocro.com/";
                // -->
                </script>
            </body>
        </html>
    (ページが変わる)
    表示されている ページが変わる
遊:へー 面白いわね
麗:でも ページが 表示された瞬間に 書き換わるから あまり意味がないですね
先生:そうだな
    というわけで次回は イベントを利用して
    ユーザーの操作で Webページを加工していくぞ



説明

この章では、『Webページの書き換え』について学びます。

JavaScriptから見たWebページは、『window』オブジェクトを頂点とした、階層構造を持っています。

 ○window
 ┣○document
 ┃┣○element
 ┃┣○element
 ┃┃┣○element
 ┃┃┣○element
 ┃┃┗ :
 ┃┣○element
 ┃┣○element
 ┃┗ :

これらは全てオブジェクトですので、通常のオブジェクトと同じように、プロパティやメソッドを持っており、プログラムで操作することができます。

これまでも『window.alert』や『document.write』メソッド、『document.title』といったプロパティを利用してきました。

さて、このWebページのオブジェクトですが、多くの場合、プログラムを書く人が操作したいのは、『ブラウザに表示されている画面』です。この『ブラウザに表示されている文字列や画像』などの部品は、『document』オブジェクトの配下にある『element』オブジェクトを通して操作できます。

WebページのJavaScriptでは、この『element』オブジェクトを利用するための仕組みが用意されています。この仕組みは『DOM』と呼ばれます。『DOM』を使えば、プログラムからWebページの部品にアクセスして、画面を書き換えたり、情報を得たりできます。

それでは以下、『DOM』を使ってWebページを書き換える方法を学んでいきましょう。



『DOM』でのオブジェクト操作

『DOM』(Document Object Model)は、Webページのオブジェクトにアクセスする方法です。

『DOM』では、『getElementById』などのメソッドを使い、オブジェクトの内部にある子オブジェクトを取得します。このオブジェクトは、『Element』(要素)オブジェクトと呼ばれます。

以下、簡単な例を示します。

『getElementById』メソッド

<div id="target">目標の文字列</div>
// 『id』が『target』の要素(<div id="target">目標の文字列</div>)を選択
var ele = document.getElementById("target");

// 要素の内部のHTML(ここでは『目標の文字列』)を書き換え
ele.innerHTML = "書き換えたよ!";

『id』は、タグの中に書く属性の1つです。この『id』属性の値には、そのWebページでユニークな値(他に同じ値がない値)を記入します。ユニークな値を記入しているので、『getElementById』メソッドを使うことで、その要素1つだけを特定して、取り出すことができます。

上記のプログラムでは、変数『ele』に格納した要素(『element』オブジェクト)の『innerHTML』プロパティの値を書き換えています。『innerHTML』プロパティは、その要素の配下にあるHTMLを、テキストとして読み込んだり、書き換えたりするためのプロパティです。

このプログラムでは、『書き換えたよ!』という文字列を入れています。そのため、画面内の『目標の文字列』は『書き換えたよ!』という文字列に書き換わります。

『src』プロパティ

要素の中には、画像のように『src』属性を持つものがあります。

<img src="pic/a.gif">
<img id="target" src="pic/a.gif">

『img』タグでは、『Element』オブジェクトの『src』プロパティの値を書き換えることで、画像ファイルのパスを変更できます。パスを変更すると、画面に表示される画像が差し替わります。

var ele = document.getElementById("target");
ele.src = "pic/b.gif";    // 画像ファイルのパスを変更

上記のプログラムでは、id『target』の画像のパスが、『pic/a.gif』から『pic/b.gif』に書き換わります。

『getElementsByTagName』メソッド

さて、これまでの例では、要素は全て『getElementById』メソッドを使って取得してきました。しかし、HTMLファイルの全てのタグに『ID』属性を指定するのは大変です。実際のHTMLファイルでは、ほとんどのタグには『id』属性を設定していないでしょう。そういった場合は、要素を選択することはできないのでしょうか?

こういった場合は、『タグの種類』から要素を選択する『getElementsByTagName』メソッドを使います。以下のように、タグの名前を引数に設定することで、そのタグの全要素の配列を取得することができます。

// 『<img>』タグの要素を、配列として選択
var imgs = document.getElementsByTagName("img");

注意するのは、『getElementsByTagName』と、『Element』が複数形になっていることです。この『s』を忘れる人が多いので注意してください。取得した要素の配列は、『for』文で順次処理していくことで操作できます。

// 配列に格納された各要素に対して処理を実行
for (var i = 0; i < imgs.length; i ++) {
    // 『width』(横幅)の値を書き換える
    imgs[i].width = (1 + i) * 32;
}

ここでは、全ての画像の『width』属性の値を書き換えて、画像の横幅を変更しています。



『DOM』で使用できる代表的なメソッド

以下、『DOM』操作で使用できるメソッドのうち、代表的なものを挙げておきます。

注:以下、『element』と書いてあるオブジェクトは、『document』もしくは『その他の要素』になります。

要素の取得

意味
document.getElementById(id)『document』から、指定『ID』の要素を取得
element.getElementsByTagName(タグ名)指定タグ名の要素の配列を取得
element.getElementsByName(nameの値)指定『name』属性の要素の配列を取得
element.parentNode親要素を取得
element.childNodes子要素の配列を取得
element.firstChild最初の子要素を取得
element.lastChild最後の子要素を取得
element.previousSibling1つ前の要素を取得
element.nextSibling1つ後の要素を取得

要素内のHTMLやテキストにアクセス

意味
element.innerHTML要素内のHTMLの文字列
element.innerText要素内の文字列のみ(IE、Chrome、Opera)
element.textContent要素内の文字列のみ(FireFox、Chrome、Opera)

以下、プログラムのサンプルです。

<html>
    <head>
    </head>
    <body>
        aaa<div>bbb</div>ccc

        <script type="text/javascript">
        <!--
        alert(document.body.innerHTML);

        alert((document.body.innerText||document.body.textContent));
            // 『document.body.innerText』か
            // 『document.body.textContent』を取得
        // -->
        </script>
    </body>
</html>

『document.body.innerHTML』は、HTMLファイルの『<body>』タグ内のHTML文字列です。

また、上記のプログラムで、『document.body』の内部テキストである『innerText』と『textContent』を、『||』で分岐させている点に注意してください。Internet Explorerならば『document.body.innerText』がそのまま実行されて、FireFoxならば『document.body.textContent』が実行されます。

これは、Internet ExplorerとFireFoxで、内部テキストへのアクセス方法が違うためです。

要素内の属性にアクセス(例は『id』へのアクセス)

意味使い方説明
element.属性名属性の参照a = element.id;変数『a』に『id』の値を入れる
element.id = a;『id』に変数『a』の値を入れる
element.getAttribute(属性名)属性の取得a = element.getAttribute("id");変数『a』に『id』の値を入れる
element.setAttribute(属性名,値)属性の設定element.setAttribute("id",a);『id』に変数『a』の値を入れる

要素の追加

要素の追加は、『innerHTML』の値に、文字列を設定することで行えます。また、要素を作成して、『DOM』の要素として追加することもできます。

以下、2種類の方法で、要素を追加する例を示します。

<html>
    <head>
    </head>
    <body>
        <div id="a"></div>
        <div id="b"></div>

        <script type="text/javascript">
        <!--
        var a = document.getElementById("a");
        var b = document.getElementById("b");

        a.innerHTML = "<font color=\"red\">red</font>";

        var textEle = document.createTextNode("blue");
        var newEle = document.createElement("font");
        newEle.appendChild(textEle);
        newEle.setAttribute("color", "blue");
        b.appendChild(newEle);
        // -->
        </script>
    </body>
</html>

ここでは、『createTextNode』『createElement』というメソッドで新しい要素を作成しています。また、『appendChild』メソッドで、要素を子要素として、親要素に追加しています。

以下、それぞれのメソッドの意味を表に示します。

意味
element.createElement(タグ名)『タグ名』の要素の作成
element.createTextNode(文字列)文字列要素の作成
element.appendChild(要素)要素を、子要素として追加

『DOM』は、それだけで本になるぐらい、様々なテクニックがあります。詳しく知りたければ、インターネットや書籍で調べてください。


参考:JavaScript DOM リファレンス
参考:DOMから始めるJavaScriptモダン・スクリプティング



『フォーム』の操作

Webページには、『フォーム』と呼ばれるオブジェクトがあります。これは、ボタンやリスト、ラジオボタンや、チェックボックスなどです。

<form name="form1" method="get" action="index.cgi">
テキスト:
<input type="text" name="text1" value="text value" size=30>
<br>
テキスト エリア:<br>
<textarea name="tarea1" cols=40 rows=4></textarea>
<br>
<input type="checkbox" name="cbox1" checked>チェックボタン1
<br>
<input type="radio" name="radio1" value="r1" checked>ラジオボタン1
<input type="radio" name="radio1" value="r2">ラジオボタン2
<br>
<select name="select1">
<option value="1">セレクト1</option>
<option value="2">セレクト2</option>
<option value="3" selected>セレクト3</option>
</select>
<br>
<input type="hidden" name="hidden1" value="隠れた値">
<br>
<input type="submit" value="実行">
<input type="reset" value="取消">
</form>

これらの要素には、『DOM』以外の簡易な方法でもアクセスできます。

『document.(『フォーム』の『name』の値).(『フォームの部品』の『name』の値)』と書くことで、その要素を取得できます。

var element = document.form1.text1;

こうやって取得した要素は、部品の種類によって、操作方法が異なります。

文字列を入力する部品(『<input type="text">』『<textarea>』『<input type="hidden">』など)は、『value』プロパティを使って、内部の文字列を取得したり、書き換えたりできます。

var element = document.form1.text1;
alert("text1 : " + element.value);
element.value = "新しい値";

チェックボタン(『<input type="checkbox">』)や、ラジオボタン(『<input type="radio">』)は、『checked』プロパティを使って、選択状態を取得したり、変更したりできます。

var ele = document.form1.cbox1;
alert("cbox1 : " + ele.checked);
ele.checked = false;

var ele = document.form1.radio1;
if (ele.length) {
    // 配列の場合
    for (var i = 0; i < ele.length; i ++) {
        alert("radio1[" + i + "] : " + ele[i].checked);
    }
} else {
    // 1つしかない場合
    alert("radio1 : " + ele.checked);
}

セレクト(『<select>』)は、『selectedIndex』プロパティを使って、選択要素の番号を取得したり、変更したりできます。

var ele = document.form1.select1;
alert("select1 : " + ele.selectedIndex);
ele.selectedIndex = 0;

また『options』を利用して、セレクト配下の『<option>』の配列を取得できます。この配列は、『selected』プロパティを使って、選択状態を取得したり、変更したりできます。

var ele = document.form1.select1;
for (var i = 0; i < ele.length; i ++) {
    alert("select1[" + i + "] : " + ele[i].selected);
}

これらの要素には、『DOM』を使ってもアクセスできます。

<html>
    <body>
        <input type="text" id="input" value="AAA"><br>
        <select id="select">
            <option>0 : BBB</option>
            <option>1 : CCC</option>
        </select><br>
        <input type="checkbox" id="check" value="DDD">

        <script type="text/javascript">
        <!--
        var input = document.getElementById("input");
        input.value = "入力";

        var select = document.getElementById("select");
        select.selectedIndex = 1;

        var check = document.getElementById("check");
        check.checked = true;
        // -->
        </script>
    </body>
</html>

さらに詳しく知りたい場合は、下記を参考にしてください。


参考:とほほのJavaScriptリファレンス - フォーム(Form)



『location』オブジェクト

WebページのURLが保持されているオブジェクトです。『window.location』『location』のどちらの書き方でも利用できます。

以下、よく利用するプロパティを示します。

意味中身の例
location.hrefURLhttp://www.google.com/hoge/hoge/index.cgi?q=search#result
location.protocolプロトコルhttp:
location.hostホストwww.google.com:8000
location.hostnameホスト名www.google.com
location.portポート8000
location.pathnameパスとファイル名/hoge/hoge/index.cgi
location.search検索などのCGIの値?q=search
location.hash#以降の内部リンク#result

この中で、『location.href』は特殊なプロパティです。『location.href』に新しいURLを代入すれば、そのページに移動することができます。

location.href = "http://crocro.com/";

上記のプログラムを実行すると、WebページのURLが『http://crocro.com/』に変わり、表示されているページが、このページに書き換わります。



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(オブジェクト内部の書き換え)を表示

sample2.html』(オブジェクトのプロパティ一覧)を表示

sample3.html』(画像の『src』を書き換え)を表示

sample4.html』(タグ名でオブジェクトを取得)を表示

sample6.html』(『location』の書き換え)を表示

sample7.html』(要素内のHTMLやテキスト)を表示

sample8.html』(要素の追加)を表示

sample5.html』(フォームの操作)を表示

sample9.html』(フォームの操作)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。</option>

		</select><br>
		<input type="checkbox" id="check" value="DDD">
		<script type="text/javascript">
		<!--
		var input = document.getElementById("input");
		input.^1#(value)# = "入力";
		var select = document.getElementById("select");
		select.^1#(selectedIndex)# = 1;
		var check = document.getElementById("check");
		check.^1#(checked)# = true;
		// -->
		</script>
	</body>

</html>

if:start:(==web)#

さらに詳しく知りたい場合は、下記を参考にしてください。


参考:とほほのJavaScriptリファレンス - フォーム(Form)



『location』オブジェクト

WebページのURLが保持されているオブジェクトです。『window.location』『location』のどちらの書き方でも利用できます。

以下、よく利用するプロパティを示します。

意味中身の例
location.hrefURLhttp://www.google.com/hoge/hoge/index.cgi?q=search#result
location.protocolプロトコルhttp:
location.hostホストwww.google.com:8000
location.hostnameホスト名www.google.com
location.portポート8000
location.pathnameパスとファイル名/hoge/hoge/index.cgi
location.search検索などのCGIの値?q=search
location.hash#以降の内部リンク#result

この中で、『location.href』は特殊なプロパティです。『location.href』に新しいURLを代入すれば、そのページに移動することができます。

location.href = "http://crocro.com/";

上記のプログラムを実行すると、WebページのURLが『http://crocro.com/』に変わり、表示されているページが、このページに書き換わります。



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(オブジェクト内部の書き換え)を表示

sample2.html』(オブジェクトのプロパティ一覧)を表示

sample3.html』(画像の『src』を書き換え)を表示

sample4.html』(タグ名でオブジェクトを取得)を表示

sample6.html』(『location』の書き換え)を表示

sample7.html』(要素内のHTMLやテキスト)を表示

sample8.html』(要素の追加)を表示

sample5.html』(フォームの操作)を表示

sample9.html』(フォームの操作)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「顔貌売人 ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2017年8月7日、予約可能)。
プログラマーが探偵役のエンタメ・ミステリー第2弾。
最先端の情報犯罪に安藤と鹿敷堂が挑みます。


「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。