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