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 コンストラクターと同等です。

その場合は、ノードタイプのプロパティとメソッドを見てみましょう

ノードタイプ

属性 (継承を通じて特定のノードで次のプロパティを呼び出します)

nodeType
nodeName
nodeValue
...
メソッド（継承を通じて特定のノードで呼び出される以下のメソッド）

要素を検索するメソッドはDocumentタイプにあります

ノードタイプのプロパティとメソッドは非常に多くありますが、他のすべてのノードはノードのプロパティとメソッドを継承できます。 type
Document type
JS は、Document タイプを通じてドキュメントを表します。 document オブジェクトは HTMLDocument のインスタンスであり、HTML ページ全体を表します。同時に、ドキュメントオブジェクトはウィンドウオブジェクトの下のプロパティでもあるため、グローバルオブジェクトとしてアクセスできます。
Attributes
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.URL (URL アドレスを取得) )

document.domain ( URL、パス名からドメイン名を取得)

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.querySelectorAll(selector) セレクターは、CSS セレクターを意味します。正常に一致した NodeList オブジェクト (
Document 型、DocumentFragment 型、Element 型はすべてこのメソッドを呼び出すことができます)
· ·要素の作成 · · ·
document.createElement() (作成された要素は Free 状態なので、挿入する必要があります) appendChild を介して)
· · テキストノードを作成します · · ·
document.createTextNode() (作成された要素は自由な状態なので、appendChild を通じて挿入する必要があります)
· ·要素サイズ???
document.getBoundingClientRect()

要素タイプ

属性

id
title

Usage: line Manip DOM 要素を生成するパフォーマンスの問題を引き起こす、DOM ノードの大規模な再配置と再描画を避けるため

NodeList とその「近い関係」である NamedNodeMap と HTMLCollection は、DOM 全体を完全に理解するための鍵となります。 3 つのコレクションはすべて「動的」です。つまり、ドキュメントの構造が変更されるたびに更新されます。したがって、常に最新かつ最も正確な情報が保持されます。基本的に、すべての NodeList オブジェクトは、DOM ドキュメントがアクセスされるときにリアルタイムで実行されるクエリです。

要素サイズ

オフセット寸法

ページ上の要素のオフセットを知るには、この要素の offsetLeft と offsetTop をその offsetParent の同じ属性に追加し、ルート要素までこのようにループします。基本的に正確な値です。次の 2 つの関数を使用して、要素の左オフセットと上オフセットをそれぞれ取得できます。

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;
}

ログイン後にコピー

クライアント領域のサイズ (クライアントのディメンション)

ブラウザーのビューポートサイズを決定するには、document.documentElement または document.body (IE7 より前のバージョン) の clientWidth と clientHeight を使用できます。

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
 };
 }
}

ログイン後にコピー

スクロールディメンション(スクロールディメンション)