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

6536 ワード

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";
			}
		}
2)タグ下のすべてのノドを取得する.function get NodeDemo 4(){ var divNode=document.getElemenntById(“mylink”); var nodes=divNode.getElements ByTagName("a")//divNode要素の下のすべてのサブノードのみを取得する。 for(var x=0;x<nodes.length;x+){ nodes[x].target=[u blank] ) }五、ノドの階層関係(level)を利用してノドを取得する方法親ノード:parent Node属性サブノノートド:childNodes集合、 first Child()、lastChild()前の兄弟ノイド:previous Sibling属性次の兄弟ノルタード:next Sibling属性1、親ノイドを取得するvar tabNode=document.getElement ById(「tablid 1」); var node=tabNode.parent Node;2、サブノイドを取得するvar nodes=tabNode.childNodes;注意:1)もの后ろろに车のリタンがあると、高いバーのIEとフォローは「空白テックス」と认识しました。そして、低いバージンのIEは直接に---「テーブル」のノートです。彼のノートです。    2)表のラベルとラベルの中間には、「tbody」ラベル----テベル体が隠れています。3、兄弟ノリードを取得するvar node=tabNode.previous Sibling;前の兄弟 alert(node.nodeName)//div var node=tabNode.nextSibling.nextSibling;/前の兄弟 alert(node.nodeName)//dl六、DOMの中のいつかの操作1、テストオーブの作成function createAndAdd 1(){ //1 createTextNodeを利用してテキストオブジェクトを作成する var oText Node=document.create Text Node(「新しいテキスト、いいです!」) //2 divオブジェクトを取得する var divNode=document.getElemenntById(「div 1」) //3 oTextNodeをdiv対象の子供に追加します。 divNode.apped Child(oText Node) 2、ラベルオーブジェクトの作成function createAndAdd 2(){ //1 createElement()を利用してラベルオブジェクトを作成する var oBtnNode=document.creat Element("input") oBtnNode.type="button" oBtnNode.value=「新規作成ボタン」 //2 divオブジェクトを取得する var divNode=document.getElemenntById(「div 1」) //3 oTextNodeをdiv対象の子供に追加します。 divNode.apendChild(oBtnNode) }3、直接容器ラベルの中の一つの属性を利用します。innerHTML-----このラベルの容器の中の「htmlコド」を本質的に変化させます。私達が試験している対象のツリの操作であります。function createAndAdd 3(){ var divNode=document.getElemenntById(「div 1」) //divNode.innerHTML=「<input type='button'value='一つの新しいボタン'/」; divNode.innerHTML="<a href='http://www.sina.com'>ハイパーリンク'/a'; }4、ノドを削除するには、ラベル容器オブジクの中のレモビルド()とレモルベノド()を利用して、前者はサブノドを削って、後者は自分を削っていく――勧めを使う var oDivNode=document.getElemenntById(「div 2」) //自決式----勧めない //oDivNode.removeNode()//デフォルトfalseは、サブノードのセットを削除しません。 //oDivNode.removeNode///true、サブノードのセットを削除する //親ノードで子供を削除する oDivNode.parent Node.removeChild(oDivNode); 5、ノアドに代わる(置換を除く)はラベル容器オブジクの中のレプラカード()とレプラカードNode()を利用して、前者はサラブノドを置き換える、後者は自分を置き換える――を使って奨学金を押すというfunction udateNode(){ var oDivNode=document.getElemenntById(「div 2」) var oDivNode 4=document.getElemenntById(「div 4」) //自決式----勧めない //oDivNode.replacceNode(oDivNode 4) //親ノードを通してその子を置き換える:oDivNode 4をoDivNode 4に置き換える oDivNode.parent Node.replacceChild(oDivNode 4,oDivNode) }6、ノ・ドゥに代わるFnction udateNode 2(){ var oDivNode=document.getElemenntById(「div 2」) var oDivNode 4=document.getElemenntById(「div 4」) var oDivNode 4_2=oDiv Node 4.clone Node(true)オブジェクトをクローンし、デフォルトのパラメータはfalseです。パラメータがtrueの場合は、サブノードと一緒にクローンします。 //親ノードを通してその子供を置き換える:oDivNode 4_2でoDivNodeを置き換える oDivNode.parent Node.replacceChild(oDiv Node 4 u 2,oDivNode) )