JSでDOMを操作する方法

DOM (ドキュメント オブジェクト モデル) は、W3C (World Wide Web Consortium) の標準です。DOM は、HTML および XML にアクセスするための標準を定義します。W3C ドキュメント オブジェクト モデル (DOM) は、プログラムに依存しないプラットフォームおよび言語中立のインターフェイスです。ドキュメントのコンテンツ、構造、スタイルに動的にアクセスして更新するためのスクリプト。

W3C Dom 標準は 3 つの異なる部分に分かれています: 1. Core DOM - あらゆる構造化ドキュメントの標準モデル 2. XML DOM - XML ドキュメントの標準モデル 3. HTML DOM - HTML ドキュメントの標準モデル

In HTML DOM、すべてがノードであり、DOM は複数のノードとして扱われる HTML です。 1. ドキュメント全体がドキュメント ノードです。 2. 各 HTML 要素が要素ノードです。 3. HTML 要素内のテキストはテキストです。ノード 4. 各 HTML 属性は属性です ノード 5. コメントはコメント ノードです

HTML DOM は HTML ドキュメントをツリー構造として扱います。この構造は HTML DOM を介して、ツリー内のすべてのノードに JavaScript を通じてアクセスできます。アクセスするには、すべての HTML ノード (要素) を変更し、ノードを作成または削除できます。

よく使用される HTML DOM メソッド: 1.getElementById(id) - 指定された ID を持つノード (要素) を取得します。 2.appendChid (ノード) - 新しい子ノード (要素) を挿入します。 3.removeChild (ノード) - 子ノード (要素) を削除します。

よく使用される HTML DOM 属性: 1.innerHTML - ノード (要素) のテキスト値 2. parentNode - ノード(要素)の親ノード 3.childNodes-Node(要素)の子ノード 4..attributes-Node(要素)の属性ノード

DOM操作

要素の作成

var newp = document. createElement("p") ;クラス名を設定 newp.className = "item";ID を設定

newp.id = "first";背景色を設定 newp.style.background = "red";要素ボックスを追加しますbody

まず追加したい要素を取得します

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName("box")[0];body.appendChild(newp) ;// body には 2 つの内容があります。1 つは newp で、もう 1 つは box// 現状では、newp の内容を box の後ろに挿入することになっています

p の内容を box の前に挿入したい場合body.insertBefore(newp, box); 要素 body を削除します。removeChild(box);//ボックスのラベルを削除します box.remove();DOM 属性

Node: ラベル テキスト アノテーション ステートメント (doctype)

次のメソッドを通じて要素順序のすべてのノードを取得できます: console.log(box.childNodes) ; ラベル タイプの子ノードを取得します。取得されたノードはラベル console.log(box.cheildren[0]) です。 ); サイズ 位置 console.log(newp.offsetWidth);//印刷幅には境界線が含まれます console.log(newp.clientWidth );//境界線やスクロール バー (表示領域) は含まれません console.log(newp.scrollHeight) );//要素が垂直/水平にスクロールされた距離でもあり、要素がロールアウトされたときに要素が表示されなくなります。これはデフォルトで表示されます。 scroll; //スクロールバーの位置は、親の位置を基準にして表示されます。 console.log(newp.offsetLeft); 子要素は、scrollTop を除いて、上にスクロールします。上記の要素は読み取り専用です console.log(newp.scrollTop)

Timer

ワンタイムタイマー、1回のみ使用可能

書き方1: var time = setTimeout(function(){ console.log("ワンタイムタイマー"); },1000);書き方2：function f1(){ console.log("ワンタイムタイマー"); } setTimeout(f1,1000);ワンタイムタイマーのクリアclearTimeout(time ); ループタイマー、関数が時々実行されます

書き方1: var timer = setInterval(funtion(){ console.log("Loop timer"); })var timer = setInterval (f2, 1000) ); ループ タイマーのクリア clearInterval(timer); DOM は、実際には JS が HTML 要素を操作できるようにするために策定された仕様であり、次のような多くの属性と配置メソッドがあります。ノードの作成、ノードのコピー、ノードの削除、属性の変更などの DOM オブジェクトは、JavaScript による HTML タグの操作を容易にするようです。 DOM はドキュメント オブジェクト モデル (Document Object Model) であり、これも HTML ドキュメントに基づいており、 のために提供されています。 JavaScript を動的に使用して (クリック イベントなど) ドキュメントの状態を変更するため、DOM を操作することは HTML ドキュメント オブジェクト (各タグ) を操作することになります

CSS は HTML ドキュメントのスタイルを設定するだけであり、JavaScript は HTML と CSS を組み合わせることができます。以前は DHTML (ダイナミック HTML) と呼ばれていたものです

DOM は、XML (または HTML) 内のノードを、プログラミング言語 (JavaScript など) によって制御される技術仕様を提供できる基本的に統一されたオブジェクト データに定義するものです

JavaScript 言語を使用できますDOMを操作してWebページを変更するには、どのノードを操作するかをJavaScriptに指示する必要があります

DOMを操作すると、Webページ全体の操作方法を変更できます。ページの操作はこの DOM テクノロジーに依存しています。JavaScript がなくても、他の言語を使用して DOM を操作することもできます。DOM はツリーであり、値と葉に番号が付けられます。そのブランチのどのリーフを検索し、このリーフにどのような変更を加える必要があるかを検索する関数

Zhihu を使用しているとき 検索バーにデータを入力すると、JavaScript が入力をキャプチャし、サーバーに対して非同期クエリを使用し、動的に検索結果を表示します。

下にスライドすると、JavaScript はスライドした距離をキャプチャし、その距離に基づいて DOM を変更するかどうかを決定し、ブラウザ ウィンドウと一緒に上部のナビゲーション バーをスクロールできるようにして、後ろを振り返るのを防ぎます。

クリックして変更するときボタンを押すと、JavaScript はこのボタンのマウス クリック イベントをキャプチャし、編集可能な応答を返します。JavaScript は実際に DOM を変更することはできません。更新すると、表示されたコンテンツが消えてしまいます。

しかし、これらの変更をリクエストの形式でバックエンド言語インターフェースに渡すことができ、バックエンド言語 PHP Python Java ノードなどがリクエストを受け取った後、後続の操作を実行します。この変更はサーバー データを変更します。この変更は有効になり、更新後に消えることはありません

ただし、ポップアップ ウィンドウのスライドや色の変更などのユーザー インタラクションをサーバーが混在させる必要はありません。その理由は、インタラクションは一時的に使用されるだけであり、それがデフォルトになり、保存する必要がないためです。

HTML は静的な構造 (Web の基本要素) を表現します。ページ、各要素の基本機能、要素の基本機能がどのような意味を生み出すことができるか、そしてその意味が生み出すことができるコンテンツの種類)

CSS は階層美化 (要素の基本属性と特殊属性、要素の形状、状態) をレンダリングします。

JavaScript は動的対話を担当します (非同期更新のために AJAX を使用して DOM を操作し、サーバーと対話します) このリンクは間違っていません。 https://www.zhihu.com/question/34219998/ Answer/58211568DOM は、Web ページを操作するための Javascript のインターフェースであり、その機能は Web ページを Javascript オブジェクトに変換し、JavaScript スクリプトを使用して処理できるようにすることです。

ブラウザは、文書化された構造 (HTML や XML など) を DOM モデルに基づいて一連のノードに解析し、次にこれらのノードをツリー構造 (Dom ツリー) に解析します。 . すべてのノードと最終的なツリー構造は標準化された外部インターフェイスを持っているため、DOM は標準の国際標準を持っています。DOM は、厳密には Javascript に属しません。 DOM 操作は Javascript で最も一般的なタスクであり、JavaScript で最も一般的なタスクは最も一般的な DOM 操作言語です。

DOM

DOM またはドキュメント オブジェクト モデルは、W3C (World Wide Web Consortium) の標準です。

DOM は、HTML および XML にアクセスするための標準を定義します。W3C ドキュメント オブジェクト モデル (DOM) は、プラットフォームと言語に依存しないインターフェイスです。プログラムとスクリプトを動的にできるようにします ドキュメントのコンテンツ、構造、スタイルにアクセスして更新します

W3C DOM 標準は 3 つの異なる部分に分かれています: 1. コア DOM - あらゆる構造化ドキュメントの標準モデル 2. XML DOM - XML ドキュメントの標準モデル 3 .HTML DOM - HTML ドキュメントの標準モデル

HTML DOM ではすべてがノードであり、DOM は 1. ドキュメント全体が 1 つのドキュメント ノードとして扱われる HTML です。 HTML 要素は要素ノードです 3. HTML 要素内のテキストはテキスト ノードです 4. 各 HTML 属性は属性ノードです 5. コメントはコメント ノードです

HTML DOM は HTML ドキュメントをツリー構造として扱います この構造は と呼ばれます。ノード ツリー。HTML DOM を介して、JavaScript を通じてツリー内のすべてのノードにアクセスでき、すべての HTML ノード (要素) を変更したり、ノードを作成または削除したりすることもできます。

よく使用される HTML DOM メソッド: 1.getElementById(id) )- 指定された ID を持つバンド ノード (要素) を取得します 2.appendChid(node)- 新しい子ノード (要素) を挿入します 3.removeChild(node)- 子ノード (要素) を削除します

よく使用される HTML DOM 属性のいくつか: 1. innerHTML-node (要素) のテキスト値 2.parentNode - ノード (要素) の親ノード 3. childNodes - ノード (要素) の子ノード 4.attributs - ノード (要素) の属性ノード

DOM操作

要素の作成

var newp = document.createElement("p");クラス名の設定 newp.className = "item";IDの設定

newp.id = "first";背景色の設定newp.style.background = "red";要素追加ボックスが本文に入ります

まずは追加する要素を取得します

var body = document.getElementsByTagName("body")[0];var box = document.getElementsByClassName(" box")[0];body.appendChild(newp) ;//現在本文には 2 つのコンテンツがあり、1 つは newp で、もう 1 つは box//現在の状況では、newp のコンテンツを box の後ろに挿入しています

p の内容をボックスの先頭に挿入する場合は、次の操作を実行します: body.insertBefore(newp, box);要素の削除 body.removeChild(box);//ボックスのラベルを削除します box.remove(); DOM 属性

ノード: ラベル テキスト アノテーション ステートメント (doctype)

次のメソッドで要素を取得して注文できます。 すべてのノード: console.log(box.childNodes); ラベル タイプの子ノードを取得します。取得したノードはラベル console.log(box.cheildren[0]); size Position console.log(newp.offsetWidth);// 印刷幅には境界線が含まれます console.log(newp.clientWidth);// 境界線は含まれません境界線またはスクロール バー (表示領域) が含まれます console.log(newp.scrollHeight);// これは要素の垂直/水平スクロール距離でもあります、またはローラーによって転がされる要素の非表示部分でもありますオーバーフローが処理され、デフォルトで余分な部分が表示されます。 // スクロール バーの位置は、親の位置を基準にして表示されます。 offsetLeft); 子要素が上にスクロールする距離。scrollTop を除き、上記の要素は読み取り専用です。 var time = setTimeout(function(){ console.log("ワンタイムタイマー"); },1000); 書き方2： function f1(){ console.log("ワンタイムタイマー") } setTimeout ( f1,1000); ワンタイムタイマーをクリアします。clearTimeout(time); ループタイマーは定期的に実行されます

書き方1: var timer = setInterval(funtion(){ console.log("Loop) Timer"); })var timer = setInterval(f2, 1000); ループタイマーのクリア ClearInterval(timer); DOM は HTML 文書の構造です。実は、JS で HTML 要素を操作できるようにするために策定された仕様です。 DOM はドキュメント オブジェクトであり、このオブジェクトにはノードの作成、ノードのコピー、ノードの削除、属性の変更など、多くの属性と配置メソッドがあります。DOM オブジェクトは、JavaScript が HTML タグを操作するのを容易にするように見えます。DOM はドキュメント オブジェクト モデルです。 HTMLドキュメントをベースにしており、ドキュメントのステータスを動的に変更する(クリックイベントなど)ためにJavaScriptに提供されているため、DOMを操作することはHTMLドキュメントオブジェクト(各タグ)を操作することになります

CSSはHTMLをスタイルするだけですドキュメント、JavaScript は HTML と CSS を組み合わせることができます。これを組み合わせると、以前は DHTML (ダイナミック HTML) と呼ばれていました

DOM は、XML (または HTML) 内のノードを、プログラミング言語によって制御される技術仕様を提供できる基本的に統一されたオブジェクト データに定義することです(JavaScriptなど)

が使用可能です JavaScript言語はDOMを使用してWebページを変更します。 Webページを変更するには、JavaScriptにどのノードを操作するかを指示する必要があります。

DOM を操作すると、Web ページの操作方法を変更できます。JavaScript を使用しなくても、他の言語を使用して Web ページの操作を行うことができます

。 DOM はツリーであり、値とリーフには番号が付けられています。そのブランチのどのリーフを見つける関数をスクリプトに指示します。また、このリーフの要件は何ですか? Zhihu にデータを入力すると、何が変わりますか?検索バーでは、JavaScript が入力をキャプチャし、サーバーへの非同期クエリを使用して、検索結果を動的に表示します。

下にスライドすると、JavaScript はスライドした距離をキャプチャし、その距離に基づいて DOM を変更するかどうかを決定し、ブラウザ ウィンドウと一緒に上部のナビゲーション バーをスクロールできるようにして、後ろを振り返るのを防ぎます。

クリックして変更するときボタンを押すと、JavaScript はこのボタンのマウス クリック イベントをキャプチャし、編集可能な応答を返します。JavaScript は実際に DOM を変更することはできません。更新すると、表示されたコンテンツが消えてしまいます。

しかし、これらの変更をリクエストの形式でバックエンド言語インターフェースに渡すことができ、バックエンド言語 PHP Python Java ノードなどがリクエストを受け取った後、後続の操作を実行します。この変更はサーバー データを変更します。この変更は有効になり、更新後に消えることはありません

ただし、ポップアップ ウィンドウのスライドや色の変更などのユーザー インタラクションをサーバーが混在させる必要はありません。その理由は、インタラクションは一時的に使用されるだけであり、それがデフォルトになり、保存する必要がないためです。

HTML は静的な構造 (Web の基本要素) を表現します。ページ、各要素の基本機能、要素の基本機能がどのような意味を生み出すことができるか、そしてその意味が生み出すことができるコンテンツの種類)

CSS は階層美化 (要素の基本属性と特殊属性、要素の形状、状態) をレンダリングします。

JavaScript は動的対話を担当します (非同期更新のために AJAX を使用して DOM を操作し、サーバーと対話します) このリンクは間違っていません。 https://www.zhihu.com/question/34219998/ Answer/58211568DOM は、Web ページを操作するための Javascript のインターフェースであり、その機能は Web ページを Javascript オブジェクトに変換し、JavaScript スクリプトを使用して処理できるようにすることです。

ブラウザは、文書化された構造 (HTML や XML など) を DOM モデルに基づいて一連のノードに解析し、次にこれらのノードをツリー構造 (Dom ツリー) に解析します。 . すべてのノードと最終的なツリー構造は標準化された外部インターフェイスを持っているため、DOM は標準の国際標準を持っています。DOM は、厳密には Javascript に属しません。 DOM 操作は Javascript で最も一般的なタスクであり、JavaScript で最も一般的なタスクは最も一般的な DOM 操作言語です。

相关推荐：

js中DOM知识点分享

以上がJSでDOMを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。