JavaScriptを使用して HTML や CSS を 操作する方法について学習します。
この方法を学べば、動的にHTML要素を増やしたり、CSSの変更や追加を行うことができるようになります。
今回の学習内容
HTMLやCSSをJavaScriptで操作する
JavaScriptを使ってWebページに動きを与えよう
JavaScriptを使用すれば、Webページに動きを付けることができます。
例えば、ページを閲覧しているユーザーが、クリックしたら開くメニューや何かをきっかけに開くダイアログ（ポップアップ）などがあります。
このように、今までは console.log で実行結果を確認してきましたが、今回からは実際に画面に動きを与える方法について学習していきます。
Windowオブジェクトについて
Windowオブジェクト は、ブラウザが定義しているグローバル変数で、ブラウザのそれぞれのタブごとの画面についての情報を保持しています。
グローバル変数のため、どこからでも参照することが可能で 現在の画面がどのサイズで開かれているか や 現在のページのURL、また 現在表示されているページのすべてのHTMLやCSS 、 JavaScriptなどの文章 を持っています。
Windowオブジェクト の例
// window をコンソールに表示します
console.log( window );
// 現在開かれている画面のサイズを表示します
console.log( '画面の横幅は ' + window.innerWidth + 'px です' );
console.log( '画面の縦幅は ' + window.innerHeight + 'px です' );
// 現在開かれているページのURLを表示します
console.log(window.location.href); // URL
console.log(window.location.port); // ポート番号
console.log(window.location.protocol); // http や https など
console.log(window.location.pathname); // プロトコルとポート番号、検索パラメータを省いたURL
console.log(window.location.search); // 検索パラメータ(?より後の文字列)
window は省略できる
グローバル変数 window は省略して記述することができます。例えば、
window.innerWidth を innerWidth と記述することが可能で、
よく使用する console.log も実は window が省略されており window.console.log と書くこともできます。
Documentオブジェクトについて
Documentオブジェクトは、現在表示しているページのすべてのHTMLやCSS、JavaScriptなどの文章を格納しています。
簡単に言うと、いつも作成している index.html の内容全てがここにあります。
このオブジェクトは window 変数 が保持( window.document )しており document と記述することで、どこからでも参照することができます。
documentの例
// document をコンソールに表示します
console.log( document );
// document 内のリンク(aタグ要素)全てを取得してコンソールに表示します
console.log( document.links );
for( let i = 0; i < document.links.length; i++ ) {
console.log(document.links[i].href);
}
// headタグ要素 をコンソールに表示します
console.log(document.head);
// titleタグ要素内の文字列 をコンソールに表示します
console.log(document.title);
// titleタグ要素内の文字列を 変更 します
document.title = '変更しました';
console.log(document.title);
// bodyタグ要素 をコンソールに表示します
console.log(document.body);
このコードを実行してみれば分かるとおり、JavaScript を使って Webページに動きを与えるということは、この document の中身の要素を更新する ことをいいます。
より詳しい Documentオブジェクト については Document – Web API | MDNでご確認いただけます。
DOMの操作について
DOM( Document Object Model )
これまでの学習で記述してきたように HTML はタグで構成されています。このタグ(例:
<h1>JavaScript面白い</h1>
)を JavaScriptで扱いやすいようにオブジェクトにしたもの を DOM といいます。
DOMを操作することで、タグ要素の更新や作成、削除を行うことが可能になります。
DOMツリー
HTMLタグには親要素と子要素があり、一番上位の html 以外の要素は必ず 親要素 を持っています。
この様な構造のことを 木構造 といい DOM が 木構造 であることから DOMツリー と呼びます。
また、この木の ひとつひとつの 節 のことを ノード（node）と呼びます。
JavaScriptで動きを与える際は、この DOMツリー の ノード に要素を追加したり、ノード にある要素を取得して更新します。
要素のことを エレメント（element） と言います。
DOMツリーに要素を追加する例
// 変数 element と textNode を定義します
let element, textNode;
// ------------
// 空の pタグ を DOM に追加します
// ------------
// p要素 を 変数element に代入します
element = document.createElement('p');
// pタグに id を設定します
element.id = 'demo1';
// bodyタグの一番下に p要素 を作成します
document.body.appendChild( element ); // DOMを更新
// ------------
// createTextNode でテキストを 追加した pタグ を DOM に追加します
// ------------
element = document.createElement('p');
// createTextNode を使用して テキストを作成します
textNode = document.createTextNode('<h1>エスケープする</h1>');
// pタグ の子要素に textNode を追加します
element.appendChild( textNode );
// pタグに class を設定します
element.className = 'text-blue';
document.body.appendChild( element ); // DOMを更新
// ------------
// innerHTML で タグ要素文字列を 追加した pタグ を DOM に追加します
// ------------
// innerHtml を使用した場合
element = document.createElement('p');
// pタグ の HTML を innerHTML で更新します
element.innerHTML = '<h1>エスケープする</h1>';
// pタグに class を設定します
element.className = 'text-blue';
document.body.appendChild( element ); // DOMを更新
DOMツリーから要素を取得する例
// id をキーに要素を取得します
element = document.getElementById('demo1');
// 取得した要素をコンソールに表示します
console.log( element );
// 取得した要素のテキストを更新します
element.innerText = 'テキストを更新';
// class をキーに要素を配列で取得します
let elementList = document.getElementsByClassName('text-blue');
// 取得した要素配列をコンソールに表示します
console.log( elementList );
// ２番目（インデックス番号は１）の要素のスタイルを更新します
for( let i = 0; i < elementList.length; i++ ) {
if( i == 1) {
elementList[i].style = 'color: red;'; // 文字色を赤色に変更します
}
}
課題
現在のページの URL をコンソールに出力するプログラムを作成してください。
現在のページの head内のtitle を「JavaScriptのDOM操作」に変更するプログラムを作成してください。
<div>
<img src="https://picsum.photos/200" alt="Image">
</div>
<!-- これは index.html にコピペしてください -->
<select name="feeling" id="feeling">
<!-- ここにJavaScriptで option を追加します -->
</select>
<!-- JavaScriptで追加する option 要素 -->
<option value="very good">Very Good</option>
<option value="good">Good</option>
<option value="not good">Not Good</option>
<option value="bad">Bad</option>
// 以下の配列をJavaScriptでループさせて、option を作成し、select に追加します
// option の値配列
const feelingList = [
{
value: 'very good',
text: 'Very Good'
},
{
value: 'good',
text: 'Good'
},
{
value: 'not good',
text: 'Not Good'
},
{
value: 'bad',
text: 'Bad'
}
];
