序文
DOMの機能は、WebページをJavaScriptオブジェクトに変換することであり、JavaScriptを使用してWebページでさまざまな操作を実行できるようにすることです(コンテンツの追加や削除など)。ブラウザは、HTMLドキュメントをDOMモデルに基づいて一連のノードに解析し、これらのノードのツリー構造を形成します。 DOMの最小の構成単位はノードと呼ばれ、ドキュメント(DOMツリー)のツリー構造は12種類のノードで構成されています。
財産
一般に、ノードには、ノデタイプ、ノデナム、ノデヴァリューの少なくとも3つの基本的なプロパティがあります。
さまざまなノードタイプでは、これら3つの属性の値も異なります。
nodeType
NodeTypeプロパティは、ノードタイプの一定の値を返します。異なるタイプは異なる定数値に対応し、12型はそれぞれ1〜12の定数に対応します。
要素ノードnode.element_node(1)
属性ノードnode.attribute_node(2)
テキストノードnode.text_node(3)
cdata node node.cdata_section_node(4)
エンティティリファレンス名node node.entry_reference_node(5)
エンティティ名node node.entity_node(6)
プロセス命令node node.processing_instruction_node(7)
コメントnode node.comment_node(8)
ドキュメントノードnode.document_node(9)
ドキュメントタイプnode node.document_type_node(10)
ドキュメントフラグメントnode node.document_fragment_node(11)
DTD宣言node node.notation_node(12)
DOMは、JavaScriptのノードタイプとして実装されているノードインターフェイスを定義し、IE8-ブラウザーのすべてのDOMオブジェクトがCOMオブジェクトとして実装されます。したがって、IE8-ブラウザーはノードオブジェクトの書き込みをサポートしていません
//標準のブラウザで1を返し、IE8-o-browserでエラーが報告され、console.log(node.element_node); // 1のノードにプロンプトが表示されます
nodename
nodenameプロパティは、ノードの名前を返します
Nodevalue
Nodevalueプロパティは、文字列として形式で現在のノードの値を返したり設定したりします
次に、ノードタイプの一定値の対応する順序に従って、詳細な説明を1〜12にします。
【1】要素ノード
要素ノード要素は、WebページのHTMLタグ要素に対応します。要素ノードのノードタイプノデタイプ値は1、ノード名nodename値は大文字のラベル名、nodevalue値はnullです
例としてボディ要素を取ります
// 1 'body' nullconsole.log(document.body.nodetype、document.body.nodename、document.body.nodevalue)console.log(node.element_node === 1); // true
【2】機能ノード
要素属性の属性は、WebページのHTMLタグの属性に対応します。それは要素の属性属性にのみ存在し、DOMドキュメントツリーの一部ではありません。特徴的なノードのノードタイプノデタイプ値は2、ノード名nodename値は属性名、nodevalue値は属性値です
これで、div要素にはid = "test"の属性があります
<div id = "test"> </div> <scrip> var attr = test.attributes.id; // 2 'id' 'test'console.log(attr.nodename、attr.nodevalue)console.log(node.attribute_node === 2); //真の</scrip
【3】テキストノード
テキストノードテキストは、WebページのHTMLタグコンテンツを表します。テキストノードのノードタイプのnodeType値は3、ノード名nodename値は「#text」、nodevalue値はラベルコンテンツ値です
これで、div要素の内容は「テスト」です
<div id = "test"> test </div> <script> var txt = test.firstchild; // 3 '#text' 'test' console.log(txt.nodename、txt.nodevalue)console.log(node.text_node ==== 3);
【4】CDATAノード
CDatasectionタイプはXMLベースのドキュメントのみであり、XMLドキュメントにのみ表示されます。それはCDATA領域を表し、形式は一般的に
<![cdata []]>
このタイプノードのノードタイプノデタイプの値は4、ノード名nodenameの値は「#cdata-section」、nodevalueの値はcdata領域のコンテンツです
【5】エンティティ参照名ノード
エンティティは、コンテンツまたはタグの代わりにXMLで使用される名前を指定する宣言です。エンティティには2つの部分が含まれています。まず、名前はエンティティ宣言を使用して交換コンテンツにバインドする必要があります。エンティティ宣言は、<!エンティティ名「値」>構文を使用して、ドキュメントタイプ定義(DTD)またはXMLスキーマで作成されます。第二に、エンティティ宣言で定義された名前はXMLで使用されます。 XMLで使用する場合、この名前はエンティティリファレンスと呼ばれます。
エンティティリファレンス名のノードタイプノデタイプnode entry_referenceは5、ノード名nodenameはエンティティリファレンスの名前、nodevalueはnullです
//エンティティ名<!エンティティパブリッシャー "Microsoft Press"> //エンティティ名参照<pubinfo>出版社; </pubinfo>
【6】エンティティ名ノード
それは上記で詳細に説明されているので、私はそれを繰り返しません
このノードのノードタイプのnodeTypeは6、ノード名nodenameはエンティティ名、nodevalueはnullです
【7】処理命令ノード
命令ノードProcessingTructionを処理するノードタイプノデタイプの値は7、ノード名Nodenameの値はターゲットの値を持ち、Nodevalueにはターゲットを除くコンテンツ全体があります
【8】注釈ノード
コメントノードコメントは、WebページのHTMLコメントを表します。注釈付きノードのノードタイプノデタイプの値は8、ノード名nodenameの値は「#comment」、nodevalueの値はコメントの内容です
さて、<! - コメントコンテンツです - > div要素がid id mydivを持っています
<div id="myDiv"><!-- I am the comment content--></div><script>var com = myDiv.firstChild;//8 '#comment' 'I am the comment content'console.log(com.nodeType,com.nodeName,com.nodeValue)console.log(Node.COMMENT_NODE === 8);//true </script>
【9】ドキュメントノード
ドキュメントノードドキュメントは、ルートノードとも呼ばれるHTMLドキュメントを表し、ドキュメントオブジェクトを指します。ドキュメントノードのノードタイプノデタイプは9、ノード名nodenameは「#ddocument」、nodevalueはnullです
<script> // 9 "#document" nullconsole.log(document.nodetype、document.nodename、document.nodevalue)console.log(node.document_node === 9); // true </scrip>
【10】ドキュメントタイプノード
documentType node documentTypeには、ドキュメントのDoctypeに関するすべての情報が含まれています。ドキュメントタイプのノードのノードタイプノデタイプ値は10、ノード名nodename値はdoctypeの名前、nodevalue値はnullです
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document> document> </head> <body> <body> <body> <scrip> var nodedocumenttype = document.firstchild; // 10 "html" nullconsole.log(nodedocumenttype.nodetype、nodedocumenttype.nodename、nodedocumenttype.nodevalue); console.log(node.document_type_node === 10); </script> </html>
【1111ドキュメントフラグメントノード
ドキュメントフラグメントノードドキュメントフラグメントには、ドキュメントに対応するタグがありません。これは、ノードを封じ込めて制御できる軽量ドキュメントですが、完全なドキュメントのような追加のリソースを克服しません。このノードのノードタイプのノデタイプは11、ノード名nodenameは「#ドキュメントフラグメント」、nodevalueはnullです
<Script> var nodedocumentfragment = document.createdocumentfragment(); // 11 "#document-fragment" nullconsole.log(nodedocumentfragment.nodetype、nodedocumentfragment.nodename、nodedocumentfragment.nodevalue); console.log(node.document_fragment_node ==== 11);
dtd dtd宣言ノード
DTD宣言ノード表記は、DTDで宣言されたシンボルを表します。このノードのノードタイプのnodeTypeは12、ノード名nodenameはシンボリック名、nodevalueはnullです
要約します
これらの12のDOMノードタイプの中で、一部はXMLドキュメントに適しており、一部は一般的に使用されていません。一般的に使用されるタイプについては、後で詳細に紹介します。この記事では、これらの12のノードタイプの概要のみを提供します。この記事がすべての人に役立つことを願っています。