MENU
未経験からコーダーに転職した主婦のブログです
  1. ホーム
  2. Web制作
  3. 【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！⑩

【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！⑩

広告
Web制作

コーダーさんが時給単価アップするなら

つるぴよ
つるぴよ
もりけん塾に入塾しました！

JavaScriptを勉強してフロントエンジニアを目指しています！
今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

 

[blogcard url=”https://tsurupiyoblog.com/moriken-javascript-9″]

 

目次

マンガJavaScript第１７話　Webページの書き換え

つるぴよ
つるぴよ
JavaScriptからみたWebページは階層構造になっているよ！

【階層構造の仕組み】
「window」オブジェクト←頂点
|-alert
|-……..
|__document
|-write
|-title
|__….

図に表すと上記のような感じになっています。
これらは全てオブジェクトなので通常同様の使い方ができます。
（プロパティやメソッドを持っていて、プログラムで操作できる）

WebページではHTMLタグを元に「DOM」と呼ばれる部品（element）の階層構造を作っています。

「DOM」とは？？
Document　Object　Model　の略

JavaScriptでは「document」の各種メソッドを利用して目的の部品を
「element」オブジェクトで取得できます！
この「element」オブジェクトに対して各種操作ができます。

「DOM」でのオブジェクト操作

「DOM」→HTMLファイルのタグから作られたWebページの部品（element）
にアクセスする方法のこと。

例えば‥「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ページでユニークな値（他に同じ値がない値→オンリーワン！）
ユニークな値なので要素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"; //画像ファイルのパスを変更

getElementsByTagNameメソッド

先ほど学んだ「getElementById」を使う場合、HTMLファイルの全てのタグに「id」属性を指定しておかねばならないのでちょっと大変です。

こういった場合には別の方法がいくつかあります。

「getElementByTagName」とは？
「タグ」の種類から要素を選択するメソッド。
「タグ」の名前を引数に設定することで、その「タグ」の全要素の配列を取得できます。

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

 

「Elements」と複数形で書くこと！「s」を忘れる場合が多い
取得した要素の配列は「for」文で順次処理していくことで操作できます。
// 配列に格納された各要素に対して処理を実行
for (var i = 0; i < imgs.length; i ++) {
    // 『width』（横幅）の値を書き換える
    imgs[i].width = (1 + i) * 32;
}

上記の例では全ての画像の「width」属性の値を書き換えて、画像の横幅を変更しています。

getElementsByClassNameメソッド

クラス名から要素を選択する「getElementsByClassName」メソッドを学んでいきます。
「クラス」属性は「id」属性と違い、同じWebページ内に複数設置することができます。

簡単な例を書いていきます。

<div class="target">目標の文字列1</div>
<div class="target">目標の文字列2</div>
<div class="target">目標の文字列3</div>
// 『class』属性が『target』の要素を、配列として選択
var targets = document.getElementsByClassName("target");
 
// 配列に格納された各要素に対して処理を実行
for (var i = 0; i < targets.length; i ++) {
    // 内部のHTMLを書き換える
    targets[i].innerHTML = i + ". 書き換え！";
}

「querySelector」「querySelectorAll」メソッド

つるぴよ
つるぴよ
「セレクタ」と呼ばれる特殊な記法で要素を選択するメソッドを学ぶよ！

「セレクタ」とは？
「CSS」などで、要素を指定するための書き方。

「querySelector」→セレクタにマッチした最初の要素を戻す。
「querySelectorAll」→セレクタにマッチした全ての要素を戻す。

簡単な例を書いてみます

<div class="animal">犬</div>
<div class="animal">猫</div>
<div class="animal">猿</div>
// 『class』属性が『target』の要素を、配列として選択
var animals = document.querySelectorAll(".animal");
 
// 配列に格納された各要素に対して処理を実行
for (var i = 0; i < animals.length; i ++) {
    // 内部のHTMLを書き換える
    animals[i].innerHTML = "＼" + animals[i].innerHTML + "／";
}

DOMで操作できる代表的なメソッド

代表的なメソッドを表にまとめました！

式 意味
document.getElementById(id) 「document」から指定「ID」の要素を取得
element.getElementsByTagName(タグ名) 指定タグ名の要素の配列を取得
element.getElementsByTagName(nameの値) 指定「name」属性の要素の配列を取得
element.getElementsByClassName(classの値) 指定「class」属性の要素の配列を取得
element.querySelector(セレクタ) 指定「セレクタ」の要素の配列を取得
element.parentNode 親要素を取得
element.childNodes 子要素の配列を取得
element.firstChild 最初の子要素を取得
element.lastChild 最後の子要素を取得
element.previousSibling 1つ前の要素を取得
element.nextSibling 1つ後の要素を取得

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

式 意味
element.innerHTML 要素内のHTMLの文字列
element.textContent 要素内の文字列のみ

サンプルのプログラムをみてみましょう

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        aaa<div>bbb</div>ccc
 
        <script>
        alert(document.body.innerHTML);
        alert(document.body.textContent);
        </script>
    </body>
</html>
『document.body.innerHTML』は

結果
①「document.body.innerHTML」はHTMLファイルの「body」タグ内のHTML文字列です（以下の画像のようになります）
②「document.body.textContent」はHTMLファイルの「body」タグ内の内部テキストです（以下の画像のようになります）
要素内の属性にアクセス（例は「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」の要素として追加する

２種類の方法で要素を取得するプログラム例を書いていきます！

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="a"></div>
        <div id="b"></div>
 
        <script>
        var a = document.getElementById("a");
        var b = document.getElementById("b");
 
        a.innerHTML = '<div style="color: red">red</div>';
 
        var textEle = document.createTextNode("blue");
        var newEle = document.createElement("div");
        newEle.appendChild(textEle);
        newEle.setAttribute("style", "color: blue;");
        b.appendChild(newEle);
        </script>
    </body>
</html>

結果
解説
2つのメソッドを使って新しい要素を生成しています。
・createTextNode
・createElement
また「appendChild」メソッドで、要素を子要素として親要素に追加しています。

上記のメソッドを表にまとめます！

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

フォームの操作

つるぴよ
つるぴよ
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>チェックボタン１
<br>
<input type="radio" name="radio1" value="r1" checked>ラジオボタン１
<input type="radio" name="radio1" value="r2">ラジオボタン２
<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>

結果

これらの要素にアクセスしてみましょう。
「document.(「フォーム」の「name」の値).(「フォーム部品」の「name」の値)」と書くことで、その要素を取得できます。

var element = document.form1.text1;

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

文字列を入力する部品は「value」プロパティを使って、内部の文字列を取得したり、書き換えたりできます。

文字列を入力する部品とは？
「<input type=”text”>」「<textarea>」「<input type=”hidden”>」など
var element = document.form1.text1;
alert("text1 : " + element.value);
element.value = "新しい値";

 

チェックボタンやラジオボタンは「checked」プロパティを使って、選択状態を取得したり変更したりできます。
チェックボタンやラジオボタンとは？
「<input type=”checkebox”>」「<input type=”radio”>」
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」を使ってもアクセスできます

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <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>
        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>

location オブジェクト

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

式 意味 中身の例
location.href URL http://www.google.com/hoge/hoge/index.cgi?q=search#result
location.protocol プロトコル http:
location.host ホスト www.google.com:800
location.hostname ホスト名 www.google.com
location.port ポート 8000
location.pathname パスとファイル名 /hoge/hoge/index.cgi
location.search 検索などのCGIの値 ?q=search
location.hash #以降の内部リンク #result
つるぴよ
つるぴよ
「location.href」に新しいURLを入れるとそのページに移動が出来るよ！
location.href = "http://crocro.com/";

このプログラムを実行するとWebページのUR Lが「http://crocro.com/」に書き換わります。

第１７話　まとめ

ここまでの内容をまとめます！
Webページの書き換え
DOMでのオブジェクト操作
フォームの操作
locationオブジェクト

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア（@terrace_tech）のフォローは👇

フォローはこちら

Web制作

関連記事

目次