目次
| No | 目次 |
|---|---|
| 1 | はじめに |
| 2 | DOMって？ |
| 3 | DOMツリーって？ |
| 4 | まとめ |
| 5 | おわり |
1.はじめに
JavaScriptを学び始めるとDOMという言葉に必ず出会います。
ではいったいDOMとはなんなのかという部分にこの記事では触れていきます。
2.DOMって？
DOMについて触れていきます。
DOMとは「Document Object Model（ドキュメントを物として扱うモデル）」の略で、
HTMLなどの文書をJavaScriptなどのプログラムで扱いやすくするためのAPIです。
DOMを利用する事で、
HTML要素の取得,ユーザの操作時の処理,イベントの設定,
見た目の変更などが主に行えます。
3.DOMツリーって？
DOMを理解するために理解が必須となるのがDOMツリーです。
階層構造とは組織図のようなものだと考えると理解しやすいです。
（DOM上ではHTMLのタグのことをNodeと呼びます。）
下の図はブラウザ内部に構築されるDOMツリーの1例です。
DOMツリーのルートを親Node,子Node,兄弟姉妹Nodeを意識して見てみましょう。
(親Node,子Node,兄弟姉妹NodeはそれぞれHTMLの入子構造を意識しましょう！)
まとめ
- DOMツリーのルートを理解し、意識することでDOM操作を行えるようになります
- DOMはWEBページとプログラミング言語を繋ぐ役割を持っている
- Nodeには親Node,子Node,兄弟姉妹Nodeなどがあり、HTMLの入子構造を意識する
おわり
最後までご覧いただきありがとうございました。
それではまた別の記事でお会いしましょう〜👋