DOM と EVENTS_html/css_WEB-ITnose の DOM ノード-htmlチュートリアル-php.cn

DOM と EVENTS_html/css_WEB-ITnose の DOM ノード

WBOY

リリース： 2016-06-24 11:24:31

オリジナル

1089 人が閲覧しました

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 を表示できるようになります。

以下は、Firebug で表示された 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

DOM と EVENTS_html/css_WEB-ITnose の DOM ノード

DOM とイベントの DOM ノード

<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>
ログイン後にコピー

空白ノード

IE9 以降のブラウザでは、W3C 標準メソッドが適用され始めたためです。古いバージョンの IE では、DOM ツリーが他のブラウザとは異なりました

コード名

概要

DOM と EVENTS_html/css_WEB-ITnose の DOM ノード

DOM とイベントの DOM ノード

<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>ログイン後にコピー

空白ノード

IE9 以降のブラウザでは、W3C 標準メソッドが適用され始めたためです。古いバージョンの IE では、DOM ツリーが他のブラウザとは異なりました

コード名

概要

<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>
ログイン後にコピー