HOME  »   チップス  »  Head Rush Ajax 学びながら読むAjax入門 を読む 4章
チップス

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


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

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

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

  1. ダイナミックなアプリケーションが必要？
    • JavaScriptによってDOMを変更すると、表示されているWebページの内容も自動的に更新されます。
  2. DOMに着手する
    • documentoオブジェクトを使えばWebブラウザが作ったDOMツリーにJavaScriptからアクセスできる
    • JavaScriptのdocumentオブジェクトを用いることで、WebブラウザがWebページから作るDOMのどの部分にもアクセスすることができるようになります。 p.205
  3. Ajax抜きでDOMを使う
  4. ...ブラウザはこのようにHTMLを見ています

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

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

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

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

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

    • divNode.parentNode
    • divNode.childNodes
    • divNode.firstChild
    • divNode.lastChild
  10. ノードは何でも知っています
  11. ブラウザによっては、Nodeを認識できないものもあります
  12. 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()〔ノードの属性値を設定〕


   チップス