<html> <head> <title>The title</title> </head> <body> The body </body></html>
// change background of the <BODY> element, make all reddocument.body.style.backgroundColor = 'red';
// revert background of <BODY> to default, put it backdocument.body.style.backgroundColor = '';
<!DOCTYPE HTML><html> <head> <title>The document</title> </head> <body> <div>Data</div> <ul> <li>Warning</li> <li></li> </ul> <div>Top Secret!</div> </body></html>
DOM と EVENTS_html/css_WEB-ITnose の DOM ノード
DOM とイベントの DOM ノード
著者:
2016-03-11 09:31:56.0
56 ビュー
カテゴリー: HTML/CSS/JAVASCRIPT プログラミング言語 フロントエンド プログラミング
DOM はドキュメント ツリーとして表されます。ドキュメント ツリーは、父親と息子の間のノード関係です。
単純な DOM
以下の HTML 構造から始めます。学習を開始します:
コード名
<html> <head> <title>The title</title> </head> <body> The body </body></html>
ログイン後にコピー
DOM は次のような関係図です: <html> <head> <title>The title</title> </head> <body> The body </body></html>
上部には 2 つの子ノード (head と body) がある HTML ノードがあります。 head には 1 つの子ノードがあります。もちろん、タイトルにも子ノードがあり、これはタイトルのテキスト ノード (コンテンツ) です。同様に、本文にも独自の子ノードがあります。
HTML タグは DOM ツリー内の要素ノードです。テキスト ブロックはテキスト ノード、HTML コメントはコメント ノードです。これらはすべてノードですが、タイプが異なります。
前述の単純な DOM では、各ノードを取得してプロパティを変更できます。例:
コード名
// change background of the <BODY> element, make all reddocument.body.style.backgroundColor = 'red';
ログイン後にコピー
次のコードを実行すると、スタイルがデフォルトの状態にリセットされます: // change background of the <BODY> element, make all reddocument.body.style.backgroundColor = 'red';
コード名
// revert background of <BODY> to default, put it backdocument.body.style.backgroundColor = '';
ログイン後にコピー
ノードの内容は可能な限り変更できます。 、既存の DOM ノードを検索し、新しい要素を作成し、ドキュメントに新しい要素を挿入します。操作を待ちます。// revert background of <BODY> to default, put it backdocument.body.style.backgroundColor = '';
しかし、その前に、DOM がどのようなもので、それにどのようなコンテンツが含まれているかを明確に知る必要があります。 DOM の関係図を理解します。
別のドキュメント
見てみましょう 次に、以下はより複雑な DOM ドキュメントです
コード名
<!DOCTYPE HTML><html> <head> <title>The document</title> </head> <body> <div>Data</div> <ul> <li>Warning</li> <li></li> </ul> <div>Top Secret!</div> </body></html>
ログイン後にコピー
以下は、上記の HTML 構造の DOM 関係図です。 .<!DOCTYPE HTML><html> <head> <title>The document</title> </head> <body> <div>Data</div> <ul> <li>Warning</li> <li></li> </ul> <div>Top Secret!</div> </body></html>
DOM を表示するには開発ツールを使用します
DOM を表示するには、ブラウザの開発ツールを使用すると非常に便利です。簡単なことです。
例:
- simpledom2.html を開きます (上記のコードをこのファイルは自分で作成します)
- 他の開発者ツールを使用して Firebug、Chrome、IE を参照してください
- どの開発ツールを使用している場合でも、HTML を表示するにはそれらを使用してください
- これで HTML を表示できるようになります。
開発者ツールでは、JS コードを制御して作成されたいくつかのノードを表示できるので、コードのデバッグが簡単にできます。
空白ノード
DOM 内のいくつかの非表示のノードについて説明します。空白ノードは、2 つのラベル間のギャップに表示されます。ノードの先頭と末尾、または先頭と先頭に関係なく、ギャップがある限り、それら (ギャップ) は空白ノードです。ただし、空白ノードは開発者ツールには表示されませんが、存在します。以下の図は、空白ノードを含む関係図を示しています
ちなみに、最後の li には空白がありません
2 つのノード間のギャップに空白のノードが作成されます。これらを表示したくない場合は、タグ間の空白を削除します。以下は空白ノードのない構造です
コード名
<!DOCTYPE HTML><html><head><title>Title</title></head><body></body></html>
IE<9
IE9 以降のブラウザでは、W3C 標準メソッドが適用され始めたためです。古いバージョンの IE では、DOM ツリーが他のブラウザとは異なりました
追加のノード タイプDOCTYPE
前の例の DOCTYPE に気づきましたか? 画像には示されていませんが、DOCTYPE も のノードです。 HTML ドキュメントの左上にある DOM
DOCTYPE は HTML 記述の一部であり、このページがどのバージョンのマークアップ言語で記述されているかをブラウザーに伝えます。その後、ブラウザーは解析して動作します。このバージョンのマークアップ言語によれば、
コメント
同様に、HTML コメントも DOM ノードです:
コード名
<html>...<!-- comment -->...</html>
上記のコメントは HTML の重要なノードです。このコメントを見ることで、この場所が何をしているのかを理解できます。もちろん、コメントを書けば書くほど良いというわけではありません!
概要
これで、DOM の構造がどのようなものかを理解できるようになりました。次のセクションでは、JavaScript を使用してこれらのことを理解しますこの記事は Wu Tongwei のブログに属します、
WeChat 公開アカウント: bianchengderen、QQ グループ: 186659233元の記事、出典を示してください。転載する場合は、対応するリンク: http://www.wutongwei.com/front/infor_showone.tweb?id=223 、皆さんも拡散と共有を歓迎します
HTML5 カメラとビデオのコントロール
towaywu
テクノロジーが好きで起業家への道を進んでいる負け犬です! 一緒にコミュニケーションすることを歓迎します
プログラマーの WeChat 公開アカウント:
bianchengderen
QQ コミュニケーション用グループ: 186 659233
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7486
15
1377
52
77
11
19
38
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
Giteeページ静的なWebサイトの展開に失敗しました：単一のファイル404エラーをトラブルシューティングと解決する方法
Apr 04, 2025 pm 11:54 PM
GiteEpages静的Webサイトの展開が失敗しました：404エラーのトラブルシューティングと解像度Giteeを使用する
