DOM(Document Object Model)とは

どむ

HTMLやXMLの文書を、要素や文字などを節(ノード)とする木の構造で表し、プログラムから読み書きできるようにしたインターフェース。ブラウザはHTMLを解析してDOMを作り、JavaScriptは document.querySelector などで要素を探して、文字や属性、スタイルを書き換えたり、要素を加えたりする。DOMが変わると、ブラウザは必要に応じて配置の計算(レイアウト)と描画をやり直すので、変更が多すぎると表示が遅くなる。

「DOM(Document Object Model)」は、1分野の3問の練習問題に出てきます(Web技術の基礎など)。

この用語の分野: Web技術の基礎

DOM(Document Object Model)の練習問題に挑戦

ブラウザで使われるDOM(Document Object Model)の説明として、正しいものはどれか。

  1. Aサーバのデータベースの表の構造を、ブラウザに送るためにHTMLの表(table要素)の形に変換したものである
  2. BHTMLの文書を、要素などを節(ノード)とする木の構造で表したもので、JavaScriptから読み書きできる
  3. CCSSの規則を、ファイルを小さくして読み込みを速くするために、空白を除いて圧縮した形式である
答えと解説を見る

正解:B. HTMLの文書を、要素などを節(ノード)とする木の構造で表したもので、JavaScriptから読み書きできる

ブラウザはHTMLを解析して、html要素を根とし、head、body、その中の段落などを節とする木の構造(DOMツリー)を作ります。JavaScriptは、document.querySelector で要素を探したり、文字や属性を書き換えたり、要素を追加したりして、DOMを通じてページを変えます。DOMが変わると、ブラウザは必要に応じて配置の計算と描画をやり直します。DOMは、特定のプログラミング言語によらない、文書を操作するためのインターフェースとして標準化されています。

解説の中の「DOM(Document Object Model)」

「DOM(Document Object Model)」が出てくる問題(3問)

  1. ブラウザで使われるDOM(Document Object Model)の説明として、正しいものはどれか。
  2. ブラウザが最初の画面を表示するまでの処理(クリティカルレンダリングパス)では、<head>の中に属性なしで書いた <script src="app.js"> があると、HTMLの解析がそこで止まる。この要素にdefer属性を付けたときの動作として、正しいものはどれか。
  3. Service Workerの説明として、正しいものはどれか。

Web技術の基礎の参考書を探す PR

Amazonの検索結果へのリンクです。Amazonのアソシエイトとして、半導体教室は適格販売により収入を得ています。

関連する用語

イベントループ WebSocket HTTP HTTPステータスコード HTTPメソッド OAuth Cookie CORS(オリジン間リソース共有) サーバサイドレンダリング(SSR) JSON

用語集の一覧へ