X-HACK

【10日目】DOM操作 その❶

— javascript, tutorials — 1 min read

前回は配列と制御構文についてやりました。変数・関数・オブジェクト・配列・if・forについて見てきましたが、いかがでしたか。

実は、JavaScriptの基本構文に関しては、これまでの内容で8割くらい解説しました。まだ理解が曖昧な部分があると思いますが、細かい部分に関してはこれからの実践を通して身につけていきましょう。

前回 +JavaScript道場：九日目 / 配列と制御構文 for

今回は「DOM操作」です。これを理解するには今までやってきた基礎の部分が非常に重要です。

用語集

  • DOM
  • モデリング
  • document
  • 動的なページ
  • HTMLの要素を取得する
  • HTMLの要素を書き換える
  • getElementsByTagName・getElementById・getElementsByClassNameなど

DOMとは？

「Document Object Model」の頭文字をとったものです。

要するに、 Web上の文書(HTML)をオブジェクトとして表現(モデリング≒データとして扱えるように構造化)したもの のことです。少し分かりにくいですね。順に説明していきます。

JavaScriptを学ぶ上で「DOMについて学ぶこと」が重要な理由

JavaScriptは動的なページを作成するために使われることが非常に多いのですが、その動的なページを作るためにはDOMの知識が必須です。

DOMを使いこなせるようになれば、JavaScriptの威力をすぐに実感できるでしょう！

動的なページとは？

  • メニューを表示する
  • ダイアログを表示する
  • 入力した値に誤りがある場合にアラートを表示する
  • カレンダーを表示してクリックで日付を選択させる
  • GoogleMap のようにスクロールすることで画面遷移せずに地図を読み込む

こういったことを実現するためには、JavaScriptが不可欠です。(一部CSSのみでも実現できます)

ありがとうJavaScript

JavaScriptが実際にどう役に立っているか、詳しくはこちらのNoteを見ていただくのがいいと思います！弊社社員の記事ですが、おすすめです。

実際にDOM操作を体験してみよう

適当なwebページに遷移して、下記のコードをコンソールで実行してみてください。

1// 試してみよう
2// 適当なwebページを開いて、コンソールタブで実行する
3document.body.innerHTML = "<img src="https://news.walkerplus.com/article/205022/1259246_615.jpg">"

URLを確認してください、別のページに遷移したわけではありません。 HTMLのbody要素全体が、画像に書き換えられているのです。 これがDOM操作です。

DOM操作 = JavaScriptでHTMLを書き換えること

noteの売り上げを改竄したり、いいね数を改竄するのは朝飯前です。誰でも出来ます。 (このくらいはJavaScript使わなくても、検証ツール使えれば小学生でも出来ますが・・・)

悪用している自称インフルエンサーが多数います、騙されないように注意！

  • 改竄前 改竄前

  • 改竄後（180万円の売り上げ！） 180万の売り上げ！

DOMはツリー構造で表現される

ツリー構造 - 親子のように辿っていける構造。1つの親に対して複数の子を持ち、世代が下がるにしたがって枝分かれして広がっていく構造のことです。 例：HTMLのbodyタグにdivタグがあって、その配下にh1タグとpタグがある、みたいな構造のことです。

難しく考えなくて大丈夫です。(下図を参照のこと)

HTML ツリー構造

ツリー構造とは、親子のように辿っていける構造のことです。1つの親に対して複数の子を持ち、世代が下がるにしたがって枝分かれして広がっていく構造のことです。 例：HTMLのbodyタグにdivタグがあって、その配下にh1タグとpタグがある、のような構造のことです。

難しく考えなくて大丈夫です。「親から子へ、子から親へちゃんと辿っていける様に考えられた構造なんだ」くらいに考えておいてください。

オブジェクトに関しての復習

重要1：オブジェクトは入れ子に出来ます

1// pattern1 と pattern2 , pattern3 は同じ
2// consoleで試してみよう
3　　
4// ----- pattern1 -----
5var obj = {
6    name: "松田",
7    company: {
8    name: "株式会社X-HACK",
9    address: "東京都目黒区目黒2-11-3 印刷工場1F"
10    }
11}
12　　
13// ----- pattern2 -----
14var company = {
15    name: "株式会社X-HACK",
16    address: "東京都目黒区目黒2-11-3 印刷工場1F"
17}
18var obj = {
19    name: "松田",
20    company: company
21}
22　　
23// ----- pattern3 -----
24var name = "松田"
25var company = {
26    name: "株式会社X-HACK",
27    address: "東京都目黒区目黒2-11-3 印刷工場1F"
28}
29var obj = { name, company }

重要2：オブジェクトを配列に格納し、オブジェクトの配列を作ることも出来ます

1var pet1 = { name: "たま", age: 3, type: "アメリカンポリダクティル" }
2var pet2 = { name: "アン・ルイス", age: 22, type: "クリリアンボブテイル" }
3　　
4var obj = { name: "松田", pets: [pet1, pet2] }

ここ大事です！では、実践練習です。 必ず手元で実行して動作を確認してくださいね！

実践練習

下記の構造のHTMLをオブジェクトとして表現(モデリング)してみましょう。

sample.html

1<html>
2    <head>
3    <title>Page Title</title>
4    </head>
5    <body id="top">
6    <h1>This is a heading</h1>
7    <p class="main my-class">This is a paragraph</p>
8    </body>
9</html>

HTMLをオブジェクト形式で表現する

回答例

1var my_html = {
2    head: { title: "Page Title" },
3    body: {
4    id: "top",
5    h1: { text: "This is a Heading" },
6    p: { text: "This is a paragraph.", classes: ['main', 'my-class'] }
7    }
8}
9　　
10// h1 オブジェクト
11console.log(my_html.body.h1)
12console.log(my_html.body.p.text)
13console.log(my_html.body.p.classes)

実際にDOMを使ってちょっと遊んでみましょう

ここから先はリンクからスタバのページに遷移して、コンソールで試していきます。 スタバのページを開いて準備してください。

ステップ-1

スタバのページを開く

→ https://product.starbucks.co.jp/goods/?nid=mm

準備はいいですか？

ステップ-2

スタバのページのコンソールでJavaScriptを実行する

1// スタバのページで試してみよう！！
2　　
3// スタバのページの商品を全て取得して・・・・・・？
4var images = document.getElementsByTagName('img')
5　　
6for(var n=0; n < images.length; n++){
7    images[n].src = "https://news.walkerplus.com/article/205022/1259246_615.jpg"
8}

どうでしょうか？商品が犬の画像に変わりました！ before 10day 04 after 10day 05

確認してみよう

1. コンソールで確認してみよう

1var images = document.getElementsByTagName('img')

変数imagesに何が入っているか、コンソールで確認してみよう。

1console.log(images)

2. MDNで調べてみよう

MDNで getElementsByTagName について調べてみよう

documentとは何だろう？

適当なwebページを開いて、コンソールタブで実行する

1// 試してみよう
2// 適当なwebページを開いて、コンソールタブで実行する
3　　
4document

documentオブジェクトには、HTMLのデータが入っている・・・？

document を consoleで実行した様子

試してみよう

1// 試してみよう
2　　
3document.title // "タンブラー＆グッズ｜スターバックス コーヒー ジャパン"
4document.title = "いぬちゃんグッズ販売所"

10day 07

まとめ

DOMを操作すると、JavaScriptでHTMLを動的に書き換えられる。そのページの画像のリストを全部取得することも朝飯前。

課題

  1. いろんなサイトからデータをDOM操作で取得できないか試してみましょう。
  2. documentオブジェクトが持つ下記三つのプロパティの役割を、MDNで調べて使ってみましょう。

getElementById

  • IDを指定して要素を取得する Element と単数形になっていることに注意

getElementsByTagName

  • タグの名前を指定して要素を取得する Elements と複数形であることに注意

getElementsByClassName

  • クラスの名前を指定して要素を取得する Elements と複数形であることに注意

次回もDOM操作の続きです

ここの知識があれば、Webページから自動でデータを取得するスクレイピングなどを実施する際にも役に立ちます

次回はこちら JavaScript道場：11日目 / DOM操作 その❷

Copyright X-HACK 2021 All Rights Reserved.