DOM の知識の詳細な紹介

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

• ...

次の兄弟
前の兄弟
firstChild
lastChild
ownDocument (各ノードは 1 つの Document ノードにのみ所属できます)

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

···ノードの検索··

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

· · · · · · · · · · · · · ... ... · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·…… · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·……
replaceChild(ele, target)
· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ノードをコピー · · ·
cloneNode(boolean) true:深いコピーを意味し、false:浅いコピーを意味します
· · · · · · · · · · · · · · · · · ドキュメント ノードの処理 · · ほとんど使用されません~
normalize()
• ノード タイプのプロパティとメソッドは非常に多くありますが、他のすべてのノードはノードのプロパティとメソッドを継承できます。 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

lang
クラス名

メソッド
getAttribute(ele) 属性を取得
setAttribute(name, value) 属性を設定
removeAttribute(ele) 属性を削除
getElement (エレ) を入手してくださいele

Text type

attribute
nodeValueデータ(Textノードのテキストにアクセス)

DocumentFragment type

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

メソッド
document.createDocumentFragment() (ドキュメントフラグメントの作成を表す)

NodeList オブジェクト

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

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

…………………………

要素のサイズを決定する

document.getBoundingClientRect()メソッドは、長方形のオブジェクトを返します。 4 つの属性 (左、上、右、下) が含まれます。これらのプロパティは、ビューポートを基準としたページ上の要素の位置を示します。

以上がDOM の知識の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。