0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

 DOMとは 〜ググわか〜

Last updated at Posted at 2020-09-16

#DOM::「Document Object Model」::(ドキュメント オブジェクト モデル)

###DOMとはこう言うもの

:point_down_tone1:一つググってもの分からないのでいろんなサイトの一言まとめを集めてみた!

"DOMとはマークアップがなされたリソース(Document)をリソース要素(Object)の木構造(Model)で表現し操作可能にする仕組み、またそのモデル"

"DOMとはJavaScriptでhtmlの要素を操作するための仕組みのこと"

"DOMはブラウザがWebページを解釈したもの"

"DOMは、文書のためのプログラミングAPI"

う〜ん、意味がよくわからない・・・

#と言うわけで! いろいろなまとめから分かりやすくまとめてみた。
つまり・・・

###1、Webページの基本的なHTML構造を表現したものでページごとに発行されている
###2、ツリー構造(のモデル)で表現されていること
###3、jqueryやVue.jsとかは、これを参照して操作する対象を探すことができる!

と言うこと!
※初心者向けにイメージしやすく書いているので、多少の語弊があるかもしれません。

#実際に見てみよう!
見るのは簡単!DOMを調べるくらいのあなたなら、すぐに理解できる・・・はず!

このページを右クリック → 検証 → Elements(検証クリックしたら最初に出てくる左側の部分)
スクリーンショット 2020-09-17 5.54.07.png

これこれ!

単純なモデルですが、<html>のなかに<head>と<body>が入っていて、
<head>...</head>の中にはたくさんの設定が入っていたり、
<body>...</body>の中にもdivとかaとかpとかいろいろな要素が階層的(ツリー構造)になって書かれていますね!
スクリーンショット 2020-09-17 6.17.37.png

もはやツリー構造の説明になってる・・・
htmlでidやclassをつけると、それがDOMに反映され、目印になっていて、JSなどの言語によってブラウザ上で操作ができるわけです!

言い換えると、ブラウザ上での何かを変更する際は、JSでDOMにアクセスし、その内容やプロパティを変更しているわけです。

ソースコードを書き換えるわけではありません。

#もう一度まとめると

###DOMとは、
####ページごとに発行されるページの詳細な内容を操作可能にするもの

であることがわかった!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?