DOMとは何か?JavaScriptやhmtlとの違いとは?定義のまとめ

DOMって何?とずっと考えているとわからなくなりそうなので、定義を簡潔にまとめました。

JavaScriptレシピ本によるDOMの定義

・JavaScriptでは、ウェブページないのテキストを書き換えたりスタイルを変更したりできる。このようなHTML上の各要素へのアクセスの仕組みはDOMで定義されている
・DOMとはDocument Object Modelというインターフェイスで定義されている
・DOMではHTML文書をツリー構造として扱う

引用元:JavaScriptコードレシピ集 P.296 135: JavaScriptでの要素の取り扱い方を知りたい

CSS-TRICKSによるDOMとJavaScriptの定義

CSS-TRICKに記載されているDOMとJavaScriptの定義を翻訳してまとめますと、このように書いてあります。

・JavaScriptとは、ブラウザーが読み込み、それ(JavaScript)を使って何かを行う、という言語である。
・DOMはその出来事が起こる場所である
・実は「Javascript関連のこと」だと思っている多くのことは正確には”DOM API”である

JavaScript is a language that the browser reads and does stuff with. But the DOM is where that stuff happens. In fact a lot of what you might think of as a "JavaScript Thing" is more accurately a "DOM API".

また、JavaScriptについてさらに記載があったので翻訳しますと、下記のようになっています。

・JavaScriptとはただのシンタックスであり言語である。完全にブラウザーの外で使われるものでDOM APIsは利用しないものである

JavaScript is just the syntax, the language. It can be used totally outside the browser with no DOM APIs at all (see Node.js).

Udemy: The Complete JavaScript CourseによるDOMの定義

DOMについてさらに調べていたところ、前に履修したUdemy講座の資料が出てきましたので、DOMの定義について追加しておきたいと思います。

・HTMLドキュメントを構造化したものである

・DOMはWebページをJavaScript等のスクリプトと繋げるために使われる

・それぞれのHTMLボックスにDOMに入ったオブジェクトがあり、アクセスしたり関わったりすることができる

原文は以下のとおりです。

DOM: Document Object Model:

Structured representation of an HTML document.

The DOM is used to connect webpages to scripts like JavaScript. For each HTML box, there is an object in the DOM that we can access and interact with.

Udemy: The Complete JaavaScript Course: Build a Real-World Project

 

関連キーワード
Javascript/React/Reduxの関連記事
  • プログラミング学習44
    Javascript React: CSS modulesとは?使い方について詳しく説明してあるサイトのリンクまとめ
  • プログラミング学習42
    Javascript:条件(三項)演算子とは何?定義・読み方・使い方まとめ(例文あり): How to read and use The Conditiong (Ternary) Operator with Demo code
  • プログラミング学習41
    DOMとは何か?JavaScriptやhmtlとの違いとは?定義のまとめ
  • Javascript ES6の分割代入(destructuring)の使い方まとめ: 配列とオブジェクトそれぞれの場合: Descructuring for Arrays and Objects
  • Javascript ES6: スプレッド構文(演算子)とレスト構文(パラメータ)の使い方まとめ:Spread Operator & Rest Operator
  • 【Javascript ES7 & React】constructorやsuper(); this.を使わないClassの新しい書き方: Classes&Properties & Methods【ES6との違い】
おすすめの記事