【JavaScript】関数・メソッドとは？3種類の定義方法を知ろう
takahide
初心者がITを楽しむブログ
【JavaScript】DOMとは？要素の取得やDOMでできることとは？
takahide
おはようございます。タカヒデです。
本日は、「『DOM』について、『要素の取得とはなにか』『DOMでできること』」を紹介します。
こんな人にオススメ
- JavaScriptにおける『DOM』が理解できない
- 『要素の取得とはなにか』『DOMでできること』を知りたい
ぜひ本記事を参考にしてください。
DOMとは
DOM（Document Object Model）とは、HTML/XMLなどのドキュメントにアクセスする仕組みのことです。
一応、HTML/XMLについても以下で超簡単に解説しておきますね。
HTML（Hyper Text Markup Language）
Webページの見た目と構造を決めるための言語
XML（eXtensible Markup Language）
データの構造と意味を表すための言語
DOMによってWEBページやデータにアクセスし要素を取得します。そして、取得した要素の追加や変更、削除を行うことができます。
要素の取得とは？
では、要素の取得とはどのようなことなのでしょうか。
それは、WEBページを作るHTMLにおいて「要素」「属性」「テキスト」などの情報を取得することを指します。
実際に以下のHTMLを見てみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストページ</title>
</head>
<body>
<h1>テストページの見出し</h1>
<p class="text">これはテストページです</p>
</body>
</html>このHTMLの中で、「要素」「属性」「テキスト」は具体的に以下を指します。
- 要素
- 『<h1 id=”top-title”>テストページの見出し</h1>』『<p class=”text”>これはテストページです</p>』
- 属性
- 『id』『class』
- テキスト
- 『テストページの見出し』『これはテストページです』
これらの情報を取得することを要素の取得といいます。
もう少し分かりやすく示すと以下のイメージです。
イメージできましたか？
DOMを利用してできること
繰り返しになりますが、DOMを利用してHTML/XMLなどのドキュメントにアクセスすることで、「要素の追加や変更、削除が可能」です。
要素の追加
既存の要素に新たな要素を追加することができます。
例えば『画像の要素を新たにページに追加する』といったことができます。
要素の変更
既存の要素を別の要素に変更することができます。
例えば『画像Aを画像Bに変更する』といったことができます。
要素の削除
既存の要素を削除することができます。
例えば『画像を削除しページから表示しなくする』といったことができます。
まとめ
以上が「『DOM』について、『要素の取得とはなにか』『DOMでできること』」でした。
まとめ
- DOMとは、HTML/XMLなどのドキュメントにアクセスする仕組みのこと
- DOMによってWEBページやデータにアクセスし要素を取得する
- 取得した要素の追加や変更、削除を行うことが可能
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
