JavaScriptの------ドキュメントオブジェクトモデル(DOM)

6536 ワード

JavaScript dom

DOM-----Dcument Object Model
ドキュメントオブジェクトモデル(DOM)は、プログラムとスクリプトを動的にドキュメントの内容、構造、スタイルにアクセスさせることができる言語プラットフォームであり、標準的なHTMLとXMLオブジェクトセットを提供し、標準的なインターフェースを持っています.
それらを作りますこれは、プログラマが簡単にHTMLまたはXMLページ上の標準コンポーネントにアクセスできるようにします.例えば、要素、スタイルシート、スクリプトなど、対応する処理を行います.DOM標準が発売される前に、フロントエンドWebアプリケーションを作成するには、必ず使用してください.
Java AppleやActiveXなどの複雑なコンポーネントは、DOM仕様に基づいて、DOMをサポートするブラウザ環境において、Web開発者が素早く、安全に多様化した、強力な機能を持つWebアプリケーションを作成することができます.ここで討論するだけです
HTML DOM
一、DOM概要
1、文書オブジェクトモデルは、JavaScriptが操作できるブラウザを定義し、文書オブジェクトの論理構造及び各機能部品の標準インターフェースを記述している.主に次のような点が含まれています.
1)コアJavaScript言語参照(データタイプ、演算子、基本語句、関数など)
2)データタイプに関するコアオブジェクト(String、Aray、Math、Dateなどのデータタイプ)
3)ブラウザの対象(window、location、history、navigatorなど)
4)文書オブジェクト(document、イメージ、formなど)
2、JavaScriptの中の二つの主要な対象モデル
1)ブラウザオブジェクトモデル(BOM)
ブラウザのウィンドウ自体、ブラウズ履歴など、ブラウザにアクセスするための機能構成要素が提供されています.(前編を参照)
2)ドキュメントオブジェクトモデル(DOM)
ドキュメント、画像などの各種HTML要素やこれらの要素が含まれているテキストにアクセスする操作方法が提供されます.
初期のブラウザバージョンでは、ブラウザオブジェクトモデルとドキュメントオブジェクトモデルとの間に大きな違いはない.
二、主要な役割
主にマークされたドキュメントをオブジェクトとしてパッケージ化し、マークされたドキュメントの内容(ラベル、テキスト、属性など)をすべてオブジェクトとしてパッケージ化します.
ドキュメント:マークドキュメント----ラベル、テキスト、属性など
オブジェクト: 属性と方法をカプセル化して、中の属性と方法を呼び出すことができます.
モデル:すべてのマーク型ドキュメントはいくつかの共通性の特徴を具現しています.
三、いくつかの重要な概念(主なDOMツリー)
1、DOMツリーモデル:
DOM解析はラベルの階層に従ってラベルの所属を表し、ツリー構造のDOMツリーを形成する.
ラベル、属性、テキストの内容はノード(node)と呼ばれ、ノードは対象とも呼ばれ、ラベルは通常ページ中の要素(element)1とも称される.DOM技術の核心内容:
マークドキュメントを対象ツリーにして、ツリー内のオブジェクトを操作することで、ドキュメントの内容を操作することができます.2)DOM解析の方式:
マークドキュメントをDOMオブジェクトツリーに解析し、ツリーの内容をオブジェクトにパッケージします.これらの動作はブラウザで私達に3)DOM解析の利点を完成させます.
ツリー中のノードは任意の操作ができます.添削4)DOM解析の弊害:
この解析はマーク型ドキュメント全体をメモリに読み込む必要がありますので、マーク型ドキュメントが大きいとメモリが消費されます.
2、DTML:ダイナミックHTMLは言語ではなく、多くの技術複合体の略称です.
HTML+CSSの方式でしたのは静的なホームページで、ダイナミックになりたいなら、この基礎の上でJSとDOMの技術を加入しなければなりません.したがって、DHTMLは、HTML+CSS+JS+DOMを含む.
3、HTML:ラベル、パッケージデータを提供する
4、CSS:スタイル属性を提供し、データの表示スタイルを定義する
5、DOM:マーク型文書を対象としてカプセル化し、JSの操作に供する.
6、JS:プログラム設計言語を提供し、DOMを通じてドキュメントの内容と表示様式を操作する.
四、 DOMでノードを取得する方法
ノードは三つの必須属性を備えています.ノード名、ノードタイプ、ノード値.
ノードのタイプ:ラベルノードのタイプ値は1、属性ノードのタイプ値は2、テキストノードのタイプ値は3
ノード値:ラベル型ノードはnullで、値がない.属性とテキストノードのみが値を持つことができます.
1、getElementById() :ノードのIDでノードオブジェクトを取得する

function getNodeDemo1(){
			//  id divid1   
			//var divNode= document.getElementById("divid1");
			var divNode= document.getElementById("divid2");
			//alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);
			
			//  div        innerHTML innerText   
			var txtHTML = divNode.innerHTML;
			var txt = divNode.innerText;
			alert(txtHTML+","+txt);
			
			//  div        
			//divNode.innerHTML="            ....";
			divNode.innerHTML="            ....".fontcolor("red");
			
		}

2、getElements ByName() :ノードのname属性によってノードの集合を取得する.

function getNodeDemo2(){
			var node = document.getElementsByName("userName");
			//alert(node.nodeName);//undefined
			//alert(node);//     ，     
			//alert(node[0].nodeName);//INPUT
			//alert(node.length);//1
			
			//alert(node[0].nodeType);//1
			alert(node[0].nodeValue);//      value  null
			//alert(node[0].getAttribute("value"));
		}

3、getElementsByTagName():ノードのラベル名でノード集合を取得する.
1)documentのすべてを取得する

function getNodeDemo3(){
			var nodes = document.getElementsByTagName("a");
			//alert(nodes.length);//5
			//alert(nodes[0].innerHTML);//  <a>         ：    
			
			//        <a>     target   //           ，          ，       
			
			for(var x=0; x<nodes.length; x++){
				//alert(nodes[x].innerHTML);
				nodes[x].target = "_blank";
			}
		}

JavaScriptよくあるイベントハンドラの例のまとめ