JavaScript でDOM 1

 今回はDOMという概念を学んでいきます。


1 DOM について

 この Document Object Model は HTML の要素を操作するため、JavaScript で用いるものです。
 これまで、いろいろなものをオブジェクトとして扱ってきましたが、DOM は HTML そのものをオブジェクトとして考えます。

ドォム!

学年

  • 1年生
  • 2年生
  • 3年生

 それぞれ5組まであります。

 これを「階層構造」という点に着目してみると以下のようになります。

 h1、ul、p の3つの要素は、body の下にあり、li の3つは ul の下に位置しています。
 このようなツリーの階層構造により HTML が構成されています。
 これらの要素をオブジェクトに見立てて、HTML を操作しようというのが DOM です。
 そして、各要素を「ノード」と言いますが、body などの「要素ノード」をエレメントと呼んでいます。


2 DOM を使う

 さて、この仕組みを使っていきましょう。
「オブジェクト」とみなすのですから、それを操作するのは「メソッド」ということになりますね。

 document.write を使用していないのに、「4年生」がリストとして出力されています。
 順番に見ていきましょう。

 ここはリストを作成している部分です。

 ここからが JavaScript の部分となります。
 上記のリストをオブジェクトとみなして処理していくので、まずはオブジェクトを取得する必要があります。
 document オブジェクトには、querySelector というメソッドがあります。
 引数に ul を指定しているので、ul タグの要素を取得していることになります。
 その内容を 変数 grade に代入しています。

 次に、変数 add を用意して、そこに li タグのオブジェクトを作成します。
 この時点で、li 要素には何もありません。

 ここでは新たな変数 add に対して、textContent メソッドを適用しています。
 これはノード(構成要素)にテキストを設定することができます。
 上の例では、変数 add に「4年生」を代入していますので、結局、変数 add の内容は「<li>4年生</li>」ということになります。

 そして、変数 grade に対して appendChild メソッドを適用することにより、変数 grade変数 add の内容が追加されます。

 繰り返しますが、document.write を使用していないのに、「4年生」がリストの項目として出力されています。
 なんだか不思議な気もしますが、最初に作成した「1年生」から「3年生」までのリストを、DOMオブジェクトの操作によって、その構造が変更されただけなのです。


3 残念なお知らせ

 DOMというものはWebページを動的に変更するなど、もはや開発において重要な技術なのだそうです。
 さらに、HTMLを単なる静的なページとしてだけでなく、Webアプリケーションのような動的なページとすることができるとのことです。
 しかし、document.write は、DOMとの関係でその使用については「強く非推奨」とされていて、学習ではともかく実際のサイト構築には使わない方がいいどころか、使ってはいけない とまでされています。


4 次回

 次回は、DOMについてさらに学んでいきます。

カテゴリー

更新記事

タグ

break (1) class (3) collection (6) continue (1) CSS (2) DOM (2) for (1) function (3) HTML (8) if (2) JavaScript (28) object (5) pop (1) push (1) shift (1) switch (1) unshift (1) VBA (1) while (2) アンガーマネジメント (1) インソース (1) ココナラ (9) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (1) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (18) 睡眠 (3) 給水器 (1) 記憶 (3) Aoba-BBT (9) IGS (9) Kラーニング (1)

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

1冊ですべて身につくJavaScript入門講座 [ Mana ]
価格:2,794円(税込、送料無料) (2024/2/23時点)




Categories:

Tags: