Help us understand the problem. What is going on with this article?

DOMってなんぞや

More than 3 years have passed since last update.

よくDOM(ドム)って単語を耳にするけど、実際それって何なの?って思ったので少し調べました。

DOMとは

Document Object Model (DOM) は、W3Cから勧告されている HTML文書やXML文書をアプリケーションから利用するためのAPIである。 Level 1 から Level 3 まで勧告されている。
wikipediaより引用:https://ja.wikipedia.org/wiki/Document_Object_Model

レベル分けされているっていうのは知らなかった。
HTML文書、XML文書をアプリケーションから利用する、一体どんなふうにhtmlタグとかにアクセスしているんだろうか?

DOMとNode

DOMは文書を、より特化した他のインターフェイスを実装もする Node オブジェクトの階層構造として表わす。

wikipediaより一部抜粋:http://www.doraneko.org/misc/dom10/19981001/cover.html
このNodeってなんなの?少し調べてみた

Node

英語で節、交点、結節点のこと。
・ネットワークの節点。コンピュータネットワークではサーバ、クライアント、ハブ、ルータ、アクセスポイント等、センサネットワークではセンサ端末。交通分野においては、交通結節点。
・連結リストや二分木、二分探索木における節点。
・グラフ理論において、リンクによって結ばれる頂点。
・交点 (天文)。特に、月の交点。
・電子回路において、2本以上の配線が接続される点。回路図では黒丸で描く。
・Node.js - サーバサイドJavaScriptのフレームワーク。

wikipediaより引用:https://ja.wikipedia.org/wiki/%E3%83%8E%E3%83%BC%E3%83%89

結節点、、node オブジェクトが結び目になって構造を形成しているのかな?
で、階層構造っていうのが、ノードツリーって呼ばれていて、木構造と言うデータ構造をしている

この木構造には下記のようなnodeがあるんだそうだ

  • 子ノード:child node
  • 親ノード:parent node
  • 兄弟ノード:sibling node
  • 根ノード:root node
  • 葉ノード:leaf node
  • 内部ノード:internal node、inner node

木構造:https://ja.wikipedia.org/wiki/%E6%9C%A8%E6%A7%8B%E9%80%A0_(%E3%83%87%E3%83%BC%E3%82%BF%E6%A7%8B%E9%80%A0)

ようするに、DOMというAPIを使って、HTML文書をノードの階層構造として認識しているって事なんだね。
そして、DOMはHTML文書を12種類のノードに分類するらしい

  • Document
    • ドキュメント、階層のルートに相当
  • DocumentFragment
    • ドキュメントフラグメント
  • DocumentType
    • ドキュメントタイプ
  • EntityReference
    • エンティティリファレンス
  • Element
    • エレメント、要素に相当
  • Attr
    • アトリビュート、属性に相当
  • ProcessingInstruction
    • 処理命令
  • Comment
    • コメント
  • Text
    • テキストノード、タグ以外の文字データに相当
  • CDATASection
    • CDATA セクション
  • Entity
    • エンティティ
  • Notation
    • ノーテーション

JavaScriptでのアクセス方法

window.document

で「documentノード」にアクセスしてるって事なのかな?

documentノードの子ノードに当たるElementノードにアクセスするのは

document.getElementsByTagName("p")

と書いて、これはdocumentノード内の「p」というElementノード(documentノードの子ノード、もしくは子孫ノード)にアクセスしているって事になるのかな。

という事は、このノードツリーがわかりさえすれば、JavaScriptでHTML文書内にある要素にはアクセスが可能になるってわけだ。

実際、知らずに使っている事が多かったし、jQueryとか使うとこういう知識がなくても簡単に要素へアクセスができちゃうからだろうなーと思う。

bocc
ディレクター兼フロントエンドやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした