今回はDOMという概念を学んでいきます。
１ DOM について
この Document Object Model は HTML の要素を操作するため、JavaScript で用いるものです。
これまで、いろいろなものをオブジェクトとして扱ってきましたが、DOM は HTML そのものをオブジェクトとして考えます。
HTML（一部）
<body>
<h1>学年</h1>
<ul>
<li>１年生</li>
<li>２年生</li>
<li>３年生</li>
</ul>
<p>それぞれ５組まであります。</p>
</body>
ブラウザ
学年
- １年生
- ２年生
- ３年生
それぞれ５組まであります。
これを「階層構造」という点に着目してみると以下のようになります。
階層構造
body
→ h1
→ ul → li
→ li
→ li
→ p
h1、ul、p の３つの要素は、body の下にあり、li の３つは ul の下に位置しています。
このようなツリーの階層構造により HTML が構成されています。
これらの要素をオブジェクトに見立てて、HTML を操作しようというのが DOM です。
そして、各要素を「ノード」と言いますが、body などの「要素ノード」をエレメントと呼んでいます。
２ DOM を使う
さて、この仕組みを使っていきましょう。
「オブジェクト」とみなすのですから、それを操作するのは「メソッド」ということになりますね。
HTML（一部）
<body>
<ul>
<li>１年生</li>
<li>２年生</li>
<li>３年生</li>
</ul>
<script>
let grade = document.querySelector("ul");
let add = document.createElement("li");
add.textContent = "４年生";
grade.appendChild(add);
</script>
</body>
ブラウザ
・１年生
・２年生
・３年生
・４年生
document.write を使用していないのに、「４年生」がリストとして出力されています。
順番に見ていきましょう。
HTML（一部）
<body>
<ul>
<li>１年生</li>
<li>２年生</li>
<li>３年生</li>
</ul>
ここはリストを作成している部分です。
HTML（一部）
<script>
let grade = document.querySelector("ul");
ここからが JavaScript の部分となります。
上記のリストをオブジェクトとみなして処理していくので、まずはオブジェクトを取得する必要があります。
document オブジェクトには、querySelector というメソッドがあります。
引数に ul を指定しているので、ul タグの要素を取得していることになります。
その内容を 変数 grade に代入しています。
HTML（一部）
let add = document.createElement("li");
次に、変数 add を用意して、そこに li タグのオブジェクトを作成します。
この時点で、li 要素には何もありません。
HTML（一部）
add.textContent = "４年生";
grade.appendChild(add);
</script>
</body>
ここでは新たな変数 add に対して、textContent メソッドを適用しています。
これはノード（構成要素）にテキストを設定することができます。
上の例では、変数 add に「４年生」を代入していますので、結局、変数 add の内容は「<li>４年生</li>」ということになります。
そして、変数 grade に対して appendChild メソッドを適用することにより、変数 grade に変数 add の内容が追加されます。
ブラウザ
・１年生
・２年生
・３年生
・４年生
繰り返しますが、document.write を使用していないのに、「４年生」がリストの項目として出力されています。
なんだか不思議な気もしますが、最初に作成した「１年生」から「３年生」までのリストを、DOMオブジェクトの操作によって、その構造が変更されただけなのです。
３ 残念なお知らせ
DOMというものはWebページを動的に変更するなど、もはや開発において重要な技術なのだそうです。
さらに、HTMLを単なる静的なページとしてだけでなく、Webアプリケーションのような動的なページとすることができるとのことです。
しかし、document.write は、DOMとの関係でその使用については「強く非推奨」とされていて、学習ではともかく実際のサイト構築には使わない方がいいどころか、使ってはいけない とまでされています。
４ 次回
次回は、DOMについてさらに学んでいきます。
カテゴリー
更新記事
- 『日本経済新聞』を読む １３（鉄鉱石、内需株、画像診断、ハブ空港、ＬＣＣ）
- 『日本経済新聞』を読む １２（アンチモニー、おもちゃショー、スタートアップ、燃料電池、送電網）
- 『日本経済新聞』を読む １１（にがり、おせち、ダチョウ、災害ドローン、ビジネスホテル）
- 『日本経済新聞』を読む １０（航空エンジン、金型、国際会議、ＰＣＥ、ゲーム機）
- 『日本経済新聞』を読む ９（家計金融資産、車載半導体、ホタテ、コンテナ、ＧＰＵ）
- 『日本経済新聞』を読む ８（北陸新幹線、車中泊、ジョブ型、ＧＰＩＦ、メタンハイドレート）
- 『日本経済新聞』を読む ７（紙、ラストワンマイル、リユース市場、カード審査、ボルダリング）
- 『日本経済新聞』を読む ６（ｉＰＳ細胞、騰落レシオ、短期プラ、ＲＥＩＴ、フードテック）
- 『日本経済新聞』を読む ５（ナフサ、ビール、輸入牛肉、悪玉コレステロール、核融合）
- 『日本経済新聞』を読む ４（ダビンチ・サージカル・システム、ゼロエミッション船、クッキー、ＬＢＯ、洋上風力発電）
- 『日本経済新聞』を読む ３（変動金利、ＨＳＰ、スリープテック、双腕ロボット、物流パレット）
- 『日本経済新聞』を読む ２（ＤＡＣ、株主優待、オピオイド、ベトナム車市場、離れ小島）
- 『日本経済新聞』を読む １（リバースメンタリング、ＣＢＴ、ＥＢＰＭ、地方創生ＤＡＯ、ＩＢＤ）
- テーマ株投資（７か月）
- 『会社四季報 2024年 3集 夏号』を読む ２０（ＲＰＦ、ＤtoＣ、ＴｏＦ、駅ナカ、ＣＸ）
- 『会社四季報 2024年 3集 夏号』を読む １９（ＡＴＣ、プローブカード、ニューデリー、商品ＣＦＤ、ＳＵＶ、ＦＰＣ、ＩＦＲＳ）
- 『会社四季報 2024年 3集 夏号』を読む １８（シャリ玉ロボット、ＹＡＧレーザー、シナジー、ＳａａＳ、クルーズ、ＤＦＢレーザー）
- 『会社四季報 2024年 3集 夏号』を読む １７（ＤＳＰ、サーメタル、自動小銃、ダイカストマシン、ＦＰＳＯ、サーボモーター、水晶振動子）
- 『会社四季報 2024年 3集 夏号』を読む １６（クロスセル、ｅＶＴＯＬ、ＣＦＣＣ、ＲＦＩＤ、配当性向、事業承継）
- 『会社四季報 2024年 3集 夏号』を読む １５（ＳｉＣ半導体、ＮＡＳ電池、フェロニッケル、フェライト粉、スポンジチタン）
- 『会社四季報 2024年 3集 夏号』を読む １４（ＡＩ警備システム、プロダクトアウト、ホットメルト接着剤、放熱ゲル、パイル、カソード）
- 『会社四季報 2024年 3集 夏号』を読む １３（ＰＬＭ、ファクタリング、ＢＣＰ、グリシン、メタクリル樹脂、アクティブシニア）
- テーマ株投資（６か月）
- 『会社四季報 2024年 3集 夏号』を読む １２（カプロラクタム、ゼロトラスト、ＲＡＧ、ＥＲＰ、シリカ）
- 『会社四季報 2024年 3集 夏号』を読む １１（オリゴマー、エッジＡＩ、ＭＬＣＣ、ジルコニウム、アセチレンガス、ファインケミカル）
- 『会社四季報 2024年 3集 夏号』を読む １０（フラッシュハンドル、自動配膳ロボット、Ｒ－ＳＵＤ、レコメンド機能、マーチャンダイジング、エレクトロニクスガス、コーシャ認証）
- 『会社四季報 2024年 3集 夏号』を読む ９（ペロブスカイト太陽電池、プロテイン、銀だこ、尿素ＳＣＲ、エクソソーム）
- 『会社四季報 2024年 3集 夏号』を読む ８（ドミナント、ＥＢＩＴＤＡ、ＳＡＦ、消防車、キャンプ用品、ＧＩＧＡスクール、ボウリング場）
- 『会社四季報 2024年 3集 夏号』を読む ７（ＭＤ、パーム椰子、ＧＭＳ、ＥＣ、デジタルサイネージ、ハラール認証、ヴィーガンコスメ）
- 『会社四季報 2024年 3集 夏号』を読む ６（ＢＩＭ、ＣＭＳ、つけまつげ、ＣＤＭＯ、ＢＮＰＬ、ＥＤＩ、ＣＲＭ）
タグ
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) ことば (13) アンガーマネジメント (1) インソース (1) ココナラ (11) コーチング (1) チーズ (2) ネズミ (2) ノート (2) パーソルホールディングス (3) ブランディング (1) ブランド (1) プログリット (1) ポート (1) メモ (2) リスキリング (1) リンクアンドモチベーション (2) 変数 (3) 学習 (1) 小人 (2) 怒り (1) 株式 (29) 用語 (6) 睡眠 (3) 給水器 (1) 記憶 (3) Ａｏｂａ－ＢＢＴ (11) ＩＧＳ (11) Ｋラーニング (1)
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1b854c42.1e21a26f.1b854c43.46ddb6a5/?me_id=1213310&item_id=20857618&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F5758%2F9784815615758_1_4.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1b854c42.1e21a26f.1b854c43.46ddb6a5/?me_id=1213310&item_id=20920710&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F6465%2F9784295016465_1_4.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")