js DOM(1)

DOMとはDOMはJavaScriptがウェブページを操作するインターフェースで、すべて「ドキュメントオブジェクトモデル」と呼ばれています.その役割は、ウェブページをJavaScriptオブジェクトに変換することで、スクリプトで様々な操作が可能になります.HTML DOMを通じて、JavaScript HTMLドキュメントのすべての要素にアクセスできます.DOMはJavaScriptにHTML事件に対して反応する能力を持たせる.
DOMツリーブラウザは、DOMモデルに従って、構造化されたドキュメント(HTMLやXMLなど)を一連のノードに解析し、これらのノードからツリー構造(DOM Tree)を構成します.
ノードnode DOMの最小構成単位はnodeです.ギアのツリー構造(DOMツリー)は、様々な種類のノードから構成されています.各ノードは、文書ツリーの一枚の葉と見なすことができる.ノードの7種類のDockment:ドキュメントツリー全体のトップノードDockmentType:doctypeタグ(例えば)Element:ウェブページの各種HTMLタグ(例えば、など）Attribute：ウェブページ要素の属性（例えば、class="a"src='s/a.png'）Text：ラベル間またはラベルに含まれるテキストComment：コメントDockMentFragment：ドキュメントのセグメント/一般的ではない TextタイプのテキストノードはTextタイプによって表されており、字面どおりに解釈できる純粋なテキスト内容が含まれています。テキストには転送後のHTML文字が含まれていますが、HTMLコードは含まれていません。Textノードは以下の特徴を持っています。nodeTypeの値は3です。のnodeNameの値は「茑text」です。nodeValueの値はノードに含まれるテキストです。parent NodeはElementです。サブノードはサポートされていません。 拡張：テキストコンテンツ1.innerHTMLのオブジェクトの開始位置から終了位置までのすべてのコンテンツを取得し、Htmlタグを含む。innerHTMLはテキストを取得する方法としてもいいし、テキストの内容を変更する方法としてもいいです。elementノードの下にあるすべてのHTML化されたテキストコンテンツに直接戻ります。注意innerHTML方法は元素ノードの呼び出しにしか使えません。テキストノードはこの方法を使ってundefinedに戻ることができません。 innerTextとinnerHtmlはプリントラベル間のテキスト情報です。 1、innerTextプリントラベル間のテキスト情報は、ラベルをフィルタしてしまいます。低バージョンのファイアフォックスブラウザはサポートしていません。textContent 2、innerHtmlプリントラベルの内容をサポートしています。ラベルとテキスト情報を含んでいます。各ブラウザはサポートしていますが、高バージョンのブラウザはそのままinnerTextとinnerHtmlを印刷します。元素テキストを取得するだけではありません。また設定にも違いがあります。1、innerTextはHTMLタグを設定すると、<>を転送し、出力する時はそのまま出力します。HTMLタグ2、innerHtmlを解析しません。HTMLタグを設定すると、ブラウザはHTMLタグ名を対応するラベルに解析します。 2.3 textContent textContentはinners HTML方法と同様に対象ノードの下のすべてのテキスト内容に戻りますが、textConteetと区別して返す内容はHTML化されたテキストノードに行くだけの内容です。注意DOMにおけるラベル改行による空白文字会計はDOMにおいてテキストノードとしてまたIE 8は以前はtextConteet属性をサポートしていなかった。 2.4 innerTextは開始位置から終了位置までの内容ですが、HtmlタグinnerTextを除去する方法はtextContent方法と類似しています。inners HTMLと同様に要素ノードにも作用しますが、ブラウザはこの2つの方法で空白文字を解析するメカニズムが違います。よく使われていない類似のものは、outText outHTMLなどの操作テキストに関する方法outerHTML設定またはオブジェクトとその内容を取得するHTML形式は、inners HTMLのすべての内容を含むほか、対象ラベル自体も含まれています。 outerText設定（ラベルを含む）またはオブジェクトのテキストを取得（タグを含まない）する最後に注意すべき点：テキストとテキストノードは必ず区別しなければならない。一部の方法は要素ノードによってサブテキストの内容を返すことであり、一部の方法はテキストノードが自分のテキストの内容を返すことであり、本文は対象であり、テキストは文字列だけである。 innerHTMLはW 3 C規格に該当する属性であり、innerTextはIEブラウザにのみ適用されます。 注意：ブラウザは、解析ノードに空白文字がある場合、テキストノードとして扱われます。ブラウザの違いは、非空テキストノードの前または後ろにスペースや改行などの特殊なテキスト文字の構成に対して、IEとFFは分岐し、IEはこれらのノードを無視し、FFはこれらのノードを承認するからである。分岐が発生した理由はFFが考えたことと、和との間の空白ノードも単独のノードであり、FFが結果として5であり、IEが結果として2であったからである。 要素書込み時に空白の改行符などがあるため、DOMノードを操作する際に問題が発生するので、サブノードを巡回する時はテキストノードに特殊処理を施すべきで、DockmentタイプのnodeType属性でテキストノードをフィルタすることができます。例：NodeTypeによって判断します。var td=document.getElement ById(TEST);var childs=[]，i，len，node；for（i=0，len=td.child Nodes.length；i node=td.child Nodes[i]//テキストをフィルタするノードif（node.nodeType！=3）｛childs.psh（node）｝alert（childs.length）；／結果は2 ノードの属性: nodeType nodeType属性は、ノードのタイプを示す整数値を返します。ドキュメントノード：9要素ノード：1属性ノード（atribute）：2テキストノード（text）：3ドキュメントのクリップノード（Dcument Fragment）：11ドキュメントタイプノード（Docment Type）10コメントノード（Commment）：8、 nodeName nodeNameは、ノード名のドキュメントノード（document）を返します。「(i)document要素ノード(element)」：大文字のラベル名属性ノード(atr)：属性の名前テキストノード(text)：滮mentドキュメントセグメントノード(Dcument Fragment)：𞏆コメント nodeValue nodeValueはノードのテキスト値に戻り、書き込み可能なnodeValueはHTML DOMのオブジェクト属性であり、同様にnodeValueでノードを設定できるテキストコンテンツもテキストコンテンツに直接に戻ってノードオブジェクトで呼び出すことができます。また、nodeValue属性は、テキストノードの下に存在する要素ノードと属性ノードオブジェクトだけでなく、nodeValue属性ノードのnodeValue属性を持っています。属性値要素ノードのnodeValue属性は、nullに戻ります。 ノードのプロパティtextContottentは、現在のノードと彼の子孫ノードのテキストを返します。タグを無視します。例：私はspan document.getElementById('div')です。textContottent/私はspanと同じtextContantです。書き込みの内容にラベルが含まれていれば、ラベルのテキストとしてもなります。 nextSibling：nextSiblingは、現在のノードに戻る次の兄弟ノード例：hellowworld var div 1=document.getElement ById('d 1')；div 1.nextSibling sibling：兄弟の意味next：次の意味previous：前の意味が存在しない場合は、次の弟ノードnlに戻ります。 a、次の兄弟ノード=ノード.nextElement Siblingノード.nextSibling ①. nextSibling：调节者はノードがIE 678で次の元素ノード（ラベル）を指し、火狐Google IE 9＋以降は次のノード（空ドキュメントと改行ノードを含む）を指す。②. nextElementSibling：火狐Google IE 9では次の元素ノードのまとめを指す。IE 678ではnextSibingを使用し、Google以降はIEnetSinetSinetSintiningを用いる。 pervious Sibling: b、前の兄弟ノード=ノード.previous ElemnentSiblingノード.previous Sibling ①previous Sibling：调节者はノードであり、IE 678では前の要素ノード（ラベル）を指す。火狐Google IE 9＋以降は前のノード（空ドキュメントと改行ノードを含む）を指す。②previousElemensibling：火狐Google IE 9では次の元素ノードのまとめを指す。IE 678ではprebless Googleを用いる。 firstttchild：3単一のサブノードa、第一のサブノード=親ノード.firstElementChild親ノード.firstChild ①. first:调节者は父ノードであり、IE 678では第一のサブノード（ラベル）を指す。火狐Google IE 9+以降は第一のノード（ドキュメントと改行ノードを含む）を指す。②firstElementChild：火狐Google IE 9では第一の要素ノードを指す。 lastchild：b、最後のサブノード=親ノード.lastElementChild親ノード.lastChild ①. lastChild：调节者は親ノード、IE 678は最後のサブノード（ラベル）を指し、火狐Google IE 9＋以降は最後のノード（空ドキュメントと改行ノードを含む）を指します。②lastElementChild：火狐Google IE 9＋は最後の要素ノードを指します。 childNodes：すべてのサブノード a、サブノード配列=親ノード.childNodesは、すべてのノードを取得し、nodelistデータChildNodesである。これは標準属性であり、彼は指定要素のサブ要素セット（現在のすべてのサブノードに戻る）に戻り、HTMLノードの属性テキストノード（W 3 Cの親子子である）、フォックスGoogleなどの高バージョンは、改行もサブノードと見なされる *①.nodeType=1は元素ノードの記憶要素がラベルであることを示しています。 *②.nodeType=2は属性ノードを表します。 *③.nodeType=3はテキストノードを表します。 b、サブノード配列=親ノード.children;用の最大children:非標準属性は、指定された要素のサブセットのみを返します(現在のすべての要素サブノードに戻ります)。しかし、彼はHTMLノードに戻り、さらにテキストノードを後悔することなく、標準的なDOM属性ではないが、innerHTML方法と同様に、ほとんどのブラウザのサポートを得ています。childrenはIE 678に注釈ノードを含み、IETF 78に注釈ノードは書かないでください。 ノード自体.parent Node.Children[index];任意に兄弟ノードを取得して、すべての兄弟ノードfunction siblings(elm)｛var a=[];var p=elm.parent Node.children;for(var i=0;i)=ift(=elem){a.putsh]; 親ノード（parent Node、parentElement）parent Node、parentElementはparentElementとparent Nodeは同じですが、parent NodeはW 3 C標準で、parentElementはIEのみで利用できます。 first Child、lastChild、nextSibling、previous Siblingはいずれもスペースまたは改行をノードとして処理しますが、代替属性がありますので、正確に対応する元素を見つけるために、FirstElementChild、lastElements、nextElements bling、previous Elements互換性がないです。IE 9以上とフォックスGoogleがサポートしています。)