まとメモ

29才でエンジニアに転職したエンジニアのメモ

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 の仕様で規定されている
    (仕様はウェブに関する標準化団体「W3CWorld 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全体を表す。 f:id:aki_photo_blog:20190305001504p:plain
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