115
118

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

DOMってなんぞや

Last updated at Posted at 2015-12-19

よく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とか使うとこういう知識がなくても簡単に要素へアクセスができちゃうからだろうなーと思う。

115
118
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
115
118

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?