ホームページ > 記事 > ウェブフロントエンド > DOM と EVENTS_html/css_WEB-ITnose の DOM ノード
DOM と EVENTS_html/css_WEB-ITnose の DOM ノード
- WBOYオリジナル
- 2016-06-24 11:24:311019ブラウズ
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 は次のような関係図です:
上部には 2 つの子ノード (head と body) がある HTML ノードがあります。 head には 1 つの子ノードがあります。もちろん、タイトルにも子ノードがあり、これはタイトルのテキスト ノード (コンテンツ) です。同様に、本文にも独自の子ノードがあります。
HTML タグは DOM ツリー内の要素ノードです。テキスト ブロックはテキスト ノード、HTML コメントはコメント ノードです。これらはすべてノードですが、タイプが異なります。
前述の単純な DOM では、各ノードを取得してプロパティを変更できます。例:
コード名
// 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 ノードを検索し、新しい要素を作成し、ドキュメントに新しい要素を挿入します。操作を待ちます。しかし、その前に、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 関係図です。 .
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
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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。