DOMトーク

4022 ワード

DOM API
ドキュメントオブジェクトモデル(Document Object Model、略称DOM)は、W 3 C組織が推奨する拡張可能なスケーリング言語の処理のための標準的なプログラミングインターフェースである.DOMはドキュメントオブジェクトモデルであり、HTMLとXMLファイルを処理する標準APIである.
window
WindowsオブジェクトはDOMドキュメントを含むウィンドウを表し、Windowsはグローバル変数としてスクリプトが実行されているウィンドウを表し、Javascriptコードに露出します.ただし、同じウィンドウのラベルページ間ではwindowオブジェクトは共有されません.
window.console

ブラウザデバッグコンソールへのアクセスを提供するconsoleオブジェクトの参照を返します.
window.crypto

ブラウザcryptoオブジェクトに戻ります.
window.document

現在のウィンドウに含まれるドキュメントへの参照を返します.
window.location

Windowsオブジェクトのlocation、または現在のURLを取得、設定します.
window.scrollY

現在のスクロール位置とビューポート頂点の距離を取得します.
window.scrollX

現在のスクロール位置とビューポートの左点の距離を取得します.
window.parent

現在のウィンドウまたはサブウィンドウの親ウィンドウの参照を返します.
window.alert

アラームダイアログを表示します.
window.close

現在のウィンドウを閉じます.
window.moveTo

ウィンドウを指定した座標に移動します.
window.scroll

ウィンドウをドキュメントで指定した場所にスクロールします.
Windowsの役割ドメインの下の関数を呼び出すと、Windowsは省略できます.Windows objectは、現在のウィンドウを表すすべてのブラウザでサポートされています.グローバル変数はwindowオブジェクトの属性であり、グローバル関数はwindowの方法である.一般的にはwindowを書かないで、デフォルトのオブジェクトはwindowです.
Node
Nodeはインタフェースであり、多くのDOM APIオブジェクトのタイプがこのインタフェースから継承されます.これらの異なるタイプのオブジェクトを同様の方法で扱うことができます.たとえば、同じグループのメソッドを継承したり、同じ方法でテストしたりします.
Node.childNodes

ノードのすべてのサブノードを含むリアルタイムのNodeListを返す.NodeListは「リアルタイム」であり、そのノードのサブノードが変化すると、NodeListオブジェクトが自動的に更新されることを意味する.
Node.firstChild

ノードの最初のサブノードノードノードノードNodeを返し、ノードにサブノードがない場合nullを返します.
Node.lastChild

ノードの最後のサブノードノードノードノードノードノードNodeを返し、ノードにサブノードがない場合nullを返します.
Node.nextSibling

nullが返されていない場合は、ノードと同じレベルの次のノードノードノードノードノードを返します.
Node.previousSibling

現在のノードの同世代の前のノード(Node)を返すか、null(このようなノードが存在しない場合)を返します.
Node.parentNode

現在のノードノードノードノードの親ノードを返します.このようなノードがない場合、このプロパティはnullを返します.
Node.nodeType

ノードタイプに対応する符号なしの短い整数の値を返します.次の値があります.
Name
Value
 
 
ELEMENT_NODE
1
ATTRIBUTE_NODE
2
TEXT_NODE
3
CDATA_SECTION_NODE
4
ENTITY_REFERENCE_NODE
5
ENTITY_NODE
6
PROCESSING_INSTRUCTION_NODE
7
COMMENT_NODE
8
DOCUMENT_NODE
9
DOCUMENT_TYPE_NODE
10
DOCUMENT_FRAGMENT_NODE
11
NOTATION_NODE
12
この方法は、elementのような判断文と組み合わせて、私たちが望むノードを得ることができる.例:

...
//
...
var a = document.getElementById('div1')
var b = a.nextSibling
while(b.nodeType !== 1){
  b = b.nextSilbing
}
console.log(b.id)
//'div2'

DOM Document
Documentオブジェクト
ブラウザにロードされるHTMLドキュメントごとにDocumentオブジェクトになります.
Documentオブジェクトを使用すると、スクリプトからHTMLページのすべての要素にアクセスできます.同時にDocumentオブジェクトはWindowオブジェクトの一部であり、windowを通過することができる.documentプロパティにアクセスします.この点はwindowの問題について、私たちは上ですでに話しました.
document.getElementById()

指定したidを持つ最初のオブジェクトへの参照を返します.
document.getElementsByName()

指定した名前のオブジェクトセットを返します.
document.getElementsByTagName()

指定したラベル付き署名を持つオブジェクトのセットを返します.
document.write()

ドキュメントにHTML式またはJavaScriptコードを書きます.スクリプトを使用すると、動的に生成されたコンテンツをドキュメントに挿入できます.
DOM Element
Elementオブジェクト
HTML DOMでは、ElementオブジェクトがHTML要素を表します.Elementオブジェクトは、要素ノード、テキストノード、アノテーションノードのタイプのサブノードを持つことができます.NodeListオブジェクトは、HTML要素のサブノードセットなどのノードリストを表します.
element.className()

要素のclassプロパティを設定または返します.
element.getAttribute()

要素ノードの指定した属性値を返します.
この他にも、Attr(Attribute)オブジェクト、Eventオブジェクトなどがあります.
DOMの学習と理解の最も重要なのは日常の学習の仕事の中でDOMの各種の常用APIを掌握して、熟練して巧みで、学んで役に立ちます.