温故知新 linux実践講座

温故知新 linux実践講座

温故知新。linuxを使いこなしてみよう。

ホーム » スクリプト入門 » Head Rush Ajax 学びながら読むAjax入門 を読む 4章

— 広告 —


— 広告 —

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

所要時間 約 8分

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本の木とみなしているのです。

  6. 自分で作る・・・Web用語集
  7. Webブラウザに取って、順番はとても重要なのです
  8. ブラウザは世界を逆さまに見ている
  9. 新しいタイプのツリー:DOMツリー
  10. DOMツリーの中を移動する
  11. ある<div>を起点にしてどのようにDOMツリーの上を移動できるか? p.232

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

-- 広告 -- -- 広告 --

 

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

アフィリエイトで稼ぐ
プロフィール

ぴよふぁくとりぃです。

職業は自宅でサーバ管理、資格は薬剤師です。
趣味も職業もパソコンラブです。
よろしくね。
連絡先: admin@arakanoj.com
URL: http://piyofactory.com

検索
人気ページ
東京電力予想最大電力(万kW)
twitter
使い方を知れば知るほど楽しく使える Linux。
Linux の基本を覚えてもっともっと楽しいコンピュータの使い方を身につけましょう。