Head Rush Ajax 学びながら読むAjax入門を読む 4章

読了までの目安時間：約 8分

4章　ドキュメントオブジェクトモデル

　ドキュメントオブジェクト（DOM）を使って、Webページに新しい生命を与える。

ユーザのアクションに敏感に反応することができ、不必要なリロードをばっさりと捨て去ることが、DOMによって可能になります。

ダイナミックなアプリケーションが必要？

JavaScriptによってDOMを変更すると、表示されているWebページの内容も自動的に更新されます。

DOMに着手する

documentoオブジェクトを使えばWebブラウザが作ったDOMツリーにJavaScriptからアクセスできる
JavaScriptのdocumentオブジェクトを用いることで、WebブラウザがWebページから作るDOMのどの部分にもアクセスすることができるようになります。 p.205

Ajax抜きでDOMを使う
...ブラウザはこのようにHTMLを見ています

ブラウザは、HTMLをロードするとき、まず<html>から読み始めます。<html>はページの根を意味する「root」であることから、ルートエレメントと呼ばれます。

次に、ブラウザは<html>のすぐ下にくるエレメントを探します。これには、たとえば<head>や、<body>などがあります。これらのエレメントは、<html>エレメントから「枝分かれ」し、されにそれぞれに自身の子となるエレメントやテキストを持ちます。もちろん、そのエレメントの子であるエレメントも、戸となるエレメントやテキストを持つことができます。同じことがページ全体にわたって行われます。

結果的に、ブラウザはその下に何も子をもたないマークアップの部分にたどり着きます。それらは、たとえば<p>エレメント内のテキストや、単体の<img>エレメントなどです。このようなマークアップの末端部分のことを、葉と呼びます。このようにして、ブラウザはページ全体を1本の木とみなしているのです。

自分で作る・・・Web用語集
Webブラウザに取って、順番はとても重要なのです
ブラウザは世界を逆さまに見ている
新しいタイプのツリー：DOMツリー
DOMツリーの中を移動する

ある<div>を起点にしてどのようにDOMツリーの上を移動できるか？ p.232

divNode.parentNode
divNode.childNodes
divNode.firstChild
divNode.lastChild

ノードは何でも知っています
ブラウザによっては、Nodeを認識できないものもあります
4章のコーディングチャレンジ

Web用語集

ノード(node)：エレメントやテキストなどの、単一のマークアップのこと。たとえば、<a>エレメントはエレメントノードであり、文字列「Head First HTML with CSS & HTML「は、テキストノードである。
葉(leaf)：マークアップの部分で、子をもたないもの。たとえば、テキストを持たない<img>などのエレメントや、単なるテキストデータなどがある。葉ノードともいう。
子(chile)：ほかのマークアップに含まれるマークアップ。文字列「Head First HTML with CSS & XHTML」は<a>エレメントの子であり、すべての<p>エレメントは<body>エレメントの子(チルドレン)である。子ノード、チルドレンともいう。
枝(branc)：エレメントとそのエレメントが服務内容の集合のこと。たとえば、枝「body」は、ツリー上にある<body>エレメントと、その配下にあるすべてのエレメントとテキストのことを指す。
親(parent)：ほかのマークアップを服務、マークアップ。<h1>はテキスト「Webの村ツリー農場」の親であり、<html>は<body>エレメントの親である。親エレメント、親ノードともいう。
ルートエレメント(root element)：HTML文書内のエレメントで、そのほあかのすべてのエレメントを服務エレメントのこと。ルートエレメントは常に<html>になる。

参考URL

　とても解りやすいホームページに感謝です。
ドキュメントオブジェクトモデル(DOM)とは？
DOMとは　JavaScript入門講座 : http://piyo-js.com/05/dom.html
ドキュメントオブジェクトモデル（DOM）
DOMメソッド

javascriptのdocumentオブジェクト

Webページのすべてに、JavaScriptのdocumentオブジェクトを使ってアクセスできます
「id」属性でエレメントを特定する。
Webページの中にある特定のエレメントは、getElementById()を使ってエレメントのid属性を指定すれば簡単に見つけることができます。

var manganese = document.getElementById("Mn").value;

ドキュメントのrootエレメントを取得する
HTMLドキュメントのルートエレメントである<html>を取得するには、documentElementプロパティを使います。

var htmlElement = document.documentElement;

DOMメソッド

appendChild()〔ノードを末尾に追加〕
cloneNode()〔ノードを複製する〕
createComment()〔コメントノードを生成する〕
createElement()〔エレメントノードを生成する〕
createTextNode()〔テキストノードを生成する〕
getAttribute()〔ノードの属性値を取得〕
getElementById()〔特定のID名の要素を取得〕
getElementsByTagName()〔指定した要素名の全てのノードリストを取得〕
hasChildNodes()〔子ノードがあるか調べる〕
insertBefore()〔任意の位置にノードを挿入する〕
replaceChild()〔ノードを置換する〕
removeChild()〔ノードを削除する〕
setAttribute()〔ノードの属性値を設定〕

この記事に関連する記事一覧

前の記事：Head Rush Ajax 学びながら読むAjax入門を読む 3章

次の記事：Head Rush Ajax 学びながら読むAjax入門を読む 4.5章

無料メルマガ登録

Linux実践講座

Linux実践講座