コンピュータを便利に使う tips などをメモ
ドキュメントオブジェクト(DOM)を使って、Webページに新しい生命を与える。
ユーザのアクションに敏感に反応することができ、不必要なリロードをばっさりと捨て去ることが、DOMによって可能になります。
ブラウザは、HTMLをロードするとき、まず<html>から読み始めます。<html>はページの根を意味する「root」であることから、ルートエレメントと呼ばれます。
次に、ブラウザは<html>のすぐ下にくるエレメントを探します。これには、たとえば<head>や、<body>などがあります。これらのエレメントは、<html>エレメントから「枝分かれ」し、されにそれぞれに自身の子となるエレメントやテキストを持ちます。もちろん、そのエレメントの子であるエレメントも、戸となるエレメントやテキストを持つことができます。同じことがページ全体にわたって行われます。
結果的に、ブラウザはその下に何も子をもたないマークアップの部分にたどり着きます。それらは、たとえば<p>エレメント内のテキストや、単体の<img>エレメントなどです。このようなマークアップの末端部分のことを、葉と呼びます。このようにして、ブラウザはページ全体を1本の木とみなしているのです。
ある<div>を起点にしてどのようにDOMツリーの上を移動できるか? p.232
とても解りやすいホームページに感謝です。
ドキュメントオブジェクトモデル(DOM)とは?
DOMとは JavaScript入門講座 : http://piyo-js.com/05/dom.html
ドキュメントオブジェクトモデル(DOM)
DOMメソッド
Webページのすべてに、JavaScriptのdocumentオブジェクトを使ってアクセスできます
「id」属性でエレメントを特定する。
Webページの中にある特定のエレメントは、getElementById()を使ってエレメントのid属性を指定すれば簡単に見つけることができます。
var manganese = document.getElementById("Mn").value;
ドキュメントのrootエレメントを取得する
HTMLドキュメントのルートエレメントである<html>を取得するには、documentElementプロパティを使います。
var htmlElement = document.documentElement;
appendChild()〔ノードを末尾に追加〕
cloneNode()〔ノードを複製する〕
createComment()〔コメントノードを生成する〕
createElement()〔エレメントノードを生成する〕
createTextNode()〔テキストノードを生成する〕
getAttribute()〔ノードの属性値を取得〕
getElementById()〔特定のID名の要素を取得〕
getElementsByTagName()〔指定した要素名の全てのノードリストを取得〕
hasChildNodes()〔子ノードがあるか調べる〕
insertBefore()〔任意の位置にノードを挿入する〕
replaceChild()〔ノードを置換する〕
removeChild()〔ノードを削除する〕
setAttribute()〔ノードの属性値を設定〕