プロデミア

JS_DOM操作

13DOM操作

13-1 DOMとは？

「Document Object Model」の略で、Web上の文書のコンテンツと構造からなるオブジェクトのデータ表現です。
もう少し噛み砕いて説明すると、JavaScriptを用いてHTMLの要素を操作するための仕組みです。
DOMを利用することで、特定の目印を付けているHTMLの要素に対して、「こういう事をしたい」という処理が可能となります。

これまで学んできたように、HTMLは階層構造で記述を行います。 DOMも同様に、オブジェクトが以下のような階層構造を取ります。

ツリーを構成する個々の要素のことを「ノード」といいます。 ノードは「オブジェクト指向言語におけるオブジェクト」と同様に、それぞれ「メソッド」「プロパティ」といった属性を持っています。

また、階層構造の上位に位置するノードを「親ノード」、親ノードの下位に属するノードを「子ノード」と呼びます。

13-2 要素の選択と操作

それでは、いくつか具体的な例を見てみましょう。 「Lesson5_JavaScript」フォルダに新しく「dom」フォルダを作成し、その中にindex.html を用意し以下のコードをコピーしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <input type="text" name="input_name"></input>
    <input type="button" id="button" value="押してみて！">
    <ul class="list_class" type="circle">
        <li>listA</li>
        <li>listB</li>
        <li>listC</li>
    </ul>
    <script src="./main.js"></script>
</body>
</html>

main.js

var button = document.getElementById('button');
button.addEventListener('click', () => {
// ①セレクターを指定して要素を取得：querySelector()
var input_name = document.querySelector("input[name='input_name']");
console.log(input_name.value);
// ②子要素を取得
var list = document.querySelector('ul');
var child_nodes_count = list.childElementCount; // 子要素の数を取得
for(var i = 0; i < child_nodes_count; i++) {
console.log(list.children[i].textContent);
}
// ③子要素を追加：appendChild()
var li = document.createElement('li')
li.textContent = 'listD';
list.appendChild(li);
// ④属性値の取得と更新：getAttribute()/setAttribute()
var button = document.getElementById('button');
var button_value = button.getAttribute('value');
console.log(button_value);
button.setAttribute('value', 'click me!');
});

よく使われるメソッドを紹介します。

①セレクターを指定して要素を取得：querySelector()

指定されたセレクターまたはセレクター群に一致する、文書内の最初の要素を返します。 セレクターとは、任意のエレメントをDOMから選び出すための書式です。 例では「input_name」というname属性があるinput要素を指定しています。 セレクターの詳細はLesson6のjQueryの講座で説明します。

②子要素の取得

querySelector()で取得した要素に含まれる子要素を取得しています。 list.childrenに子要素が配列で格納されているので、for分を用いてループして1件ずつ出力しています。

③子要素を追加：appendChild()

ulタグに新しく「listD」のliタグを追加しています。 appendChile()は子要素の最後尾に追加するメソッドとなります。

④属性値の取得と更新：getAttribute() / setAttribute()

button タグのvalue 属性を取得、更新しています。 今回はボタンをクリックすることで、ボタンの表記を更新しています。 value 属性以外にも使用することができるメソッドです。

13-3 HTML・CSS操作

13-3-1 HTMLを操作する

JavaScriptはHTMLやCSSなどの要素を書き換えたり、削除追加したりできます。
まずはinputタグの取得を例として説明していきます。
「Lesson2_JavaScript」フォルダに新しく「operation」フォルダを作成し、その中にindex.htmlとmain.jsを新しく用意し以下のコードをコピーしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <input type="hidden" name="hello" id="hello" value="こんにちは">
    <script src="./main.js"></script>
</body>
</html>

main.js

let hello = document.getElementById('hello').value;
console.log(hello);

実行するとConsoleに”こんにちは”と表示されるはずです。
document.getElementById(‘hello’).value;この部分について順を追って説明します。

① documentについて

documentは表示されているブラウザのオブジェクトのことをいいます。
これは決まり文句みたいなところがあるのでそうなんだくらいで大丈夫です。

② getElementById(’id名’)について

HTMLのなかでidが設定されている場合対象のidの名前を（）に入れることによって対象の要素を取得できます。
今回であれば<input type=”hidden” name=”hello” id=”hello” value=”こんにちは”>が取得できています。

③ valueについて

valueは文字通り取得した要素のvalueを取得します。
document.getElementById(‘hello’).valueで<input type=”hidden” name=”hello” id=”hello” value=”こんにちは”>のvalueである”こんにちは”が取得できます。

まとめると、document.getElementById(‘hello’).valueというコードは、ブラウザの中にあるidがhelloの要素を取得してその中のvalueをとってくるという意味になります。

メソッドチェーン

JavaScriptでは「.」でメソッドや要素を繋げます。これをメソッドチェーンといいます。 メソッドチェーンは、オブジェクトのメソッドを連続して呼び出す手法です。 これにより、コードが読みやすく、効率的になります。
今回の例では、「document」「getElementById」「value」が
メソッドチェーンにより連続で呼び出されているということになります。

13-3-2 HTML要素を追加してみる

「Lesson2_JavaScript」フォルダに新しく「html」フォルダを作成し、その中に以下のように新しくindex.html と main.js を用意し、ひな形をコピーしてみてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <div id="text-area"></div>
    <script src="./main.js"></script>
</body>
</html>

main.js

document.getElementById('text-area').textContent = "こんにちは";

document.getElementById(‘text-area’)の部分は先ほどと同じです。ブラウザの中にあるidがtext-areaである要素を取得します。

textContent は対象の要素に対してHTMLを差し込むというメソッドです。
なので今回はidがtext-areaの要素に対し”こんにちは”という文章を差し込んでいます。

上のようにブラウザで表示されたらOKです。

13-3-3 クリックイベント

クリックイベントはJavaScriptの中でもトップレベルに使うことが多いです。
ボタンが押された時の処理などを制御することができます。
「Lesson2_JavaScript」フォルダに新しく「click」フォルダを作成しその中に新しくindex.html と main.js を作成しひな形をコピーしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <input type="button" id="button" value="押してみて！">
    <script src="./main.js"></script>
</body>
</html>

main.js

const button = document.getElementById('button');
button.addEventListener('click', () => {
  alert('ドカーン！爆発した');
});

JavaScriptのaddEventListenerメソッドを使うと特定のイベントが起きるたびに呼び出される関数を設定することができます。

第一引数にイベントの種類（今回はクリックイベント）そして、第２引数にイベントが実行されたときに動く関数を設定します。

イベントの種類
①　クリックイベント
②　changeイベント　inputなどの値が変わったときに発生するイベント
③　submitイベント　フォームに値が送信された時のイベント
④　mouseenterイベント　マウスポインターが乗ったときに発生するイベントなど

もっと見たい方はこちらを参照してください　→　https://javascript.programmer-reference.com/js-list-event/

13-3-4 CSSを操作する

JavaScriptはHTML要素だけでなくCSSも操作することができます。
たとえば押されたら背景色が変わるボタンや画像や要素を回転させたりできます。
実務でもしばしばJavaScriptでCSSを操作するタイミングがあります。ここでマスターしましょう。
「Lesson2_JavaScript」フォルダに新しく「css_operation」フォルダを作成し、その中にindex.html を用意し以下のコードをコピーしてください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body id="body">
    <input type="button" value="赤" onclick="changeBackgroundColor('#eb4034')">
    <input type="button" value="青" onclick="changeBackgroundColor('#6473f5')">
    <input type="button" value="緑" onclick="changeBackgroundColor('#2bb559')">
    <script>
        function changeBackgroundColor(color){
            document.getElementById('body').style.backgroundColor = color;
        }
    </script>
</body>
</html>

ブラウザで読み込んでみるとボタンが３つ出現するはずです。
自由に押してみてください。ボタンに書かれた色に背景色が変化するはずです。

以下、コードの説明をします。

今回はscriptタグをHTMLの中に記述しました。
JavaScriptではchangeBackgroundColorという関数を作成しています。中身を見てみましょう。

document.getElementById(‘body’).style.backgroundColor = color;この部分の説明をします。
document.getElementById(‘body’)はブラウザの中からbodyというidのついた要素を取得します。
今回はこれでbodyタグが取得できています。
そしてstyleプロパティは要素のスタイル(CSS)を設定、取得するために使用します。
これでCSSをいじれるようになりました。
最後にbackgroundColorを指定することで背景色を設定できるようになりました。
さらに今回はaddEventListenerを用いないクリックイベントを利用しています。このことについても説明します。
HTMLのinputタグの中にonclick=”changeBackgroundColor(‘#eb4034’)”を記述しています。
タグの中にonclick=””を指定することで要素がクリックされたときに””の中に指定された関数を実行することができます。

流れは以下のとおりです。
ボタンが押される→onclickが発火しchangeBackgroundColorが実行される

また今回は引数に色コードをしているため、たとえば赤のボタンが押されたときは引数が”#eb4034”と設定されておりcolorに代入されます。
そして省略.backgroundColor = color部分で背景色に#eb4034が設定され色が変わります。
以下二つをこのセクションで学びました。

①JavaScriptでCSSを操作するときに用いるstyleプロパティ
②addEventListener以外のクリックイベント

投稿日

カテゴリー:

投稿者:

prodemia-admin-user

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です