17/07/13

HTMLとDOMとは何かをまとめてみる。またDocumentとWindowの違いも。


 

今回はjavascriptでhtmlを操作するにあたり疑問点だった、
そもそもHTMLやDOMとはなにか、についてまとめていきます。
また、DocumentオブジェクトとWindowオブジェクトについてもまとめていきます。

HTMLとはなにか

HTMLとはHyperText Markup Languageの略で、
ホームページなどのwebページを作成するための言語です。

 

HyperTextとはハイパーなテキスト、
つまりリンク情報を持ったテキストのことを示します。
リンク情報があれば、別ページに移動することもでき、他にも、
画像や、動画のリンクを埋め込むことが可能です。

 
Markupとは
文書の各々の部分がどのような役割を担っているかを示してます。
これにより、目次、見出し、コンテンツなどを明確にします。
これらを、検索エンジン(googleやyahoo)やDOMが解釈します。

DOMとはなにか

DOMはDocument Object Modelの略で、
HTMLおよびXMLドキュメントのためのAPIです。
HTMLを解釈し、DOMツリーと呼ばれるものを構成し、
DOMツリーを経由して、HTMLの内容や表現を変更できるようになります。

 
参考記事
DOM リファレンス – DOM | MDN

DOMツリー

HTMLドキュメントやxmlドキュメントをツリー構造で表現したものです。

<html>
<head>
  <title>My Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Paragraph</p>
</body>
</html>

上記をドキュメントツリーで表現すると以下のようになります。
 

 
参考記事
Using the W3C DOM Level 1 Core | MDN

Document

DocumentはDOMツリーにおけるルート(エントリーポイント)になります。
Documentはドキュメントに対してプロパティやメソッドを提供しています。

 
参考記事
document – Web API インターフェイス | MDN

DocumentとWindowとの違い

Windowオブジェクトはブラウザを操作するためのグローバルオブジェクトにあたり、
グローバル変数はWindowオブジェクトのプロパティになります。

 

また、WindowオブジェクトのプロパティにDocumentが存在します。
他にもhistoryやlocalStorageプロパティなどがあります。

 

さらには、タブブラウザー(chrome, firefox)ではタブの各々が、自身のWindowオブジェクトを持っています。

 
参考記事
window – Web API インターフェイス | MDN

補足(Nodeについて)

ノードとは、ドキュメントを構成する要素のことです。
<div>や<strong>、またDocumentオブジェクトもノードの一種です。

まとめ

javascriptでHTMLを操作する際に用いるのがDOM。
DOMオブジェクトには、Windowオブジェクト(グローバル)があり、そのプロパティとしてDocumentオブジェクトが存在する。
またNodeとは文書を構成する要素(<p>, <div>)のことです。

 

以上です。

 

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。