DOMについて
JavaScriptの処理の中で出てくる、DOMについて調べました。
DOMとは?
DOMとは、XML文書やHTML文書を構成する要素をコンピュータプログラムで参照したり操作したりするための取り決め(API)の一つ。
引用元:http://e-words.jp/w/DOM.html
DOM(Document Object Model)とは、プログラムやスクリプトで使って(X)HTML・XML文書の構造やノードに動的にアクセスためのAPIです。 JavaScriptでは(X)HTML・XML文書をオブジェクトとして扱えます。 プロパティやメソッドで各要素にアクセスすれば、要素の情報を取得したり、その情報を書き換えることができる。 引用:http://phpjavascriptroom.com/?t=js&p=dom
DOM(Document Object Model)とは、xmlやhtmlの各要素にアクセスする仕組みのこと。
このDOMを操作することによって、要素の値をダイレクトに操作できる。
例えば<p>
の中身のテキストを変更したり、<img src="sample.jpg">
のsrcの中身を変更して別の画像に差し替えるといったことができる。
補足
HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された言語です。 現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
引用元:http://www.htmq.com/htmlkihon/001.shtml
HyperText:ハイパーリンクを埋め込むことができるテキスト(ハイパーリンクというのは、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動するリンクのこと。) ハイパーテキストでは、WEBページから別のウェブページにリンクをはったり、 WEBページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができる。
Markup:文字にタグという印をつけていくことでそれぞれ意味づけをし、コンピューターが正しく認識できるようにする。
XMLとはExtensible Markup Language(エクステンシブル マークアップ ランゲージ)の略語であり、文書やデータの意味、構造を記述するためのマークアップ言語の一つです。 引用元:http://xml.prognavi.com/?p=7
DOMはブラウザがWebページを解釈したもの
- ブラウザによる HTML ファイルの解釈方法と表示方法は HTML と CSS の仕様で規定されている
(仕様はウェブに関する標準化団体「W3C(World Wide Web Consortium)」が管理) - ブラウザの主要コンポーネント
1 ユーザー インターフェース
2 ブラウザ エンジン
3 レンダリング エンジン
4 ネットワーキング
5 UI バックエンド
6 JavaScript インタープリタ
7 データ ストレージ
引用:https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
(ブラウザごとに使用されているレンダリングエンジンは異なる)
レンダリングエンジンの処理
1 HTMLをDOMツリーと呼ばれる構造体に変換
2 レンダーツリーを構成
3 レンダーツリーをレイアウト
4 レンダーツリーを描画
DOMツリー
- DOMでは、HTMLの中にあるすべてを「ノード」という単位で区切る
-
<html>、<body>、<h1>、<p>
といったHTMLタグや、コメント、属性、テキストすべてがノード - (documentオブジェクトの)ツリーの最上階はdocument。documentとはこのHTML全体を表す。
DOMは「WEBページとプログラミング言語を繋ぐ役割を持つ」
- JavaScriptによって、DOMツリーのノードを操作することができる。
まとめ
DOMとは、ブラウザに実装されているレンダリングエンジンを使い、HTML文書をツリー構造にしたもの。DOMはJavaScriptで操作できる。
参考
https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
https://developer.mozilla.org/ja/docs/DOM/About_the_Document_Object_Model
http://jsstudy.hatenablog.com/entry/dom-document_object_model
https://app.codegrid.net/entry/2017-newer-dom-1
https://gigazine.net/news/20180323-rendering-engine/
http://piyo-js.com/05/dom.html
https://blog.codecamp.jp/javascript_dom01
https://www.atmarkit.co.jp/ait/articles/0803/12/news149.html
https://eng-entrance.com/what-is-dom
https://kuroeveryday.blogspot.com/2018/11/difference-between-dom-and-node-and-element.html
https://techacademy.jp/magazine/5638