ホームページ > 記事 > ウェブフロントエンド > DOM の知識の詳細な紹介
JavaScript は ECMAScript + DOM + BOM で構成されていることがわかっています。 ECMAScript は JS の構文であり、BOM は主にブラウザ オブジェクト (ウィンドウ) オブジェクトに関する関連知識の集合です。 DOM は、ドキュメント オブジェクトに関連する知識の集合です。
HTML と JS の間の対話はイベントを通じて実現されることがわかっています。 DOM は HTML (XML) ドキュメント用の API です。したがって、ユーザーと対話したい場合は、DOM が提供する API を使用して HTML 要素を取得し、対応するイベントを要素にバインドしてユーザーと対話する必要があります。したがって、DOM を理解し、習得することが非常に重要です。
この記事は、主に「JavaScript 上級プログラミング (3)」の DOM 関連の章をベースに、DOM の主要な知識を整理し、私の個人的な理解をいくつか織り交ぜています。
HTML コードを書いたことのある地球上の人々は、各要素にインデントを追加し、関連する HTMl タグとコンテンツを記述し、最終的に Web ページに表示する必要があることを知っているはずです。したがって、このネストされた HTML コードとコンテンツがノード階層を構成します。
ECMAScript を理解している人なら誰でも、JS 内のすべてのオブジェクトは参照型に基づいて作成され、参照型は JS によってネイティブに提供される参照型 (配列、関数、RegExp、オブジェクトなど) であることも、参照型であることもできることを知っているはずです。カスタム参照型であること (参照型は new キーワードを通じて呼び出されます (コンストラクターとも呼ばれます))。すべてのオブジェクトは Object のインスタンス オブジェクトであり、Object.prototype 上のプロパティとメソッドを継承できます
そして、DOM にも同様の仕組みがあります。 DOM では、最上位の型は Node 型 であり、他のすべてのノードは Node 型 のプロパティとメソッドを継承できます。 Node 型は、実際には JS の Object コンストラクターと同等です。
その場合は、ノード タイプのプロパティとメソッドを見てみましょうノード タイプ属性 (継承を通じて特定のノードで次のプロパティを呼び出します)
メソッド(継承を通じて特定のノードで呼び出される以下のメソッド)
要素を検索するメソッドはDocumentタイプにあります
document.documentElement (HTML要素を表す)、およびHTML要素は document.childNodes[1] を通じて取得できます
document.body (body要素を表す)
document .head (head要素を示します)
document.compatMode (ブラウザが使用するレンダリング方法を示します。「CSS1Compat」は標準モードを意味し、「BackCompat」は混合モードを意味します)
document.charset (実際のレンダリングを示します)ドキュメントの文字セットで使用されるメソッド。新しい文字セットの指定にも使用できます)
document.dataset (document.dataset.myname などのデータセットを介してカスタム プロパティにアクセスすることを示します)
document.docType (要素を示します)、ブラウザ互換性があります 性的な質問
document.title (< title > 要素を表します)
· · Web ページリクエスト · ·
document.attributes (NodeList と同様に、ノードの属性を取得し、NamedNodeMap オブジェクトを返します)
メソッド
· 要素の検索 · ·
document.getElementById( id ) 要素を返します
document.getElementsByTagName(classname) は、NodeList オブジェクトと同様に、0 個以上の要素を含む HTMLCollection オブジェクトを返します
document.getElementsByName(ele) は、指定された name 属性を持つ要素を返しますHTMLCollection オブジェクトを返します
document.getElementsByClassName(className) は、一致するすべての NodeList オブジェクトを返します (このメソッドは、Document タイプと Element タイプで呼び出すことができます)
document.querySelector(selector) セレクターは、CSS セレクターを表します 最初のオブジェクトを返しますパターンに一致する要素が見つからない場合は、null を返します (Document タイプ、DocumentFragment タイプ、Element タイプはすべてこのメソッドを呼び出すことができます)
Document 型、DocumentFragment 型、Element 型はすべてこのメソッドを呼び出すことができます)
要素サイズ
function getElementLeft(element){ var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current !== null){ actualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft; } function getElementTop(element){ var actualTop = element.offsetTop; var current = element.offsetParent; while (current !== null){ actualTop += current. offsetTop; current = current.offsetParent; } return actualTop; }
クライアント領域のサイズ (クライアントのディメンション)
function getViewport(){ if (document.compatMode == "BackCompat"){ return { width: document.body.clientWidth, height: document.body.clientHeight }; } else { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }; } }
スクロールディメンション(スクロールディメンション)
要素のサイズを決定する
以上がDOM の知識の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。