DOMとは何ですか? JavaScript を使用すると、HTML ドキュメント全体を再構築できます。ページ上の項目を追加、削除、変更、または並べ替えることができます。ページ上の何かを変更するには、JavaScript が HTML ドキュメント内のすべての要素にアクセスする必要があります。このアクセスは、HTML 要素を追加、移動、変更、または削除するためのメソッドとプロパティとともに、ドキュメント オブジェクト モデル (DOM) を通じて取得されます。 1998 年に、W3C は DOM 仕様の最初のレベルを公開しました。この仕様により、HTML ページ内の個々の要素にアクセスして操作できるようになります。すべてのブラウザがこの標準を実装しているため、DOM 互換性の問題はほとんどありません。 DOM は、JavaScript によって HTML、XHTML、および XML ドキュメントの読み取りと変更に使用できます。 DOM はさまざまな部分 (コア、XML、HTML) とレベル (DOM レベル 1/2/3) に分かれています。 コアDOM 構造化文書の標準的なオブジェクトセットを定義します XML DOM XML文書の標準オブジェクトのセットを定義します HTML DOM HTML ドキュメントのオブジェクトの標準セットを定義します。 ノード DOM によれば、HTML ドキュメント内の各コンポーネントはノードです。 DOM では以下が指定されています:
ノード階層 ノードは互いに階層的な関係を持ちます。 HTML ドキュメント内のすべてのノードはドキュメント ツリー (またはノード ツリー) を形成します。 HTML ドキュメント内の各要素、属性、テキストなどは、ツリー内のノードを表します。ツリーはドキュメント ノードから始まり、ツリーの最下位レベルのすべてのテキスト ノードに到達するまでそこから分岐し続けます。 次の図はドキュメントツリー(ノードツリー)を示しています。 ドキュメントツリー(ノード数) 次の HTML ドキュメントを検討してください。 <html> <ヘッド> <title>DOM チュートリアル</title> </head> <本文> <h1>DOM レッスン 1</h1> <p>こんにちは世界!</p> </本文> </html> 上記のノードはすべて相互に関係を持っています。ドキュメント ノード以外のすべてのノードには親ノードがあります。たとえば、<head> と <body> の親ノードは <html> ノードであり、テキスト ノード「Hello world!」の親ノードは <p> ノードです。ほとんどの要素ノードには子ノードがあります。たとえば、<head> ノードには 1 つの子、<title> ノードがあります。 <title> ノードにも、テキスト ノード「DOM Tutorial」という 1 つの子があります。ノードが同じ親ノードを共有する場合、それらは兄弟(兄弟ノード)です。たとえば、<h1> と <p> は、親ノードが <body> ノードであるため、兄弟です。ノードには子孫が存在する場合もあります。子孫とは、ノードのすべての子ノード、またはそれらの子ノードの子などです。たとえば、すべてのテキスト ノードは <html> ノードの子孫であり、最初のテキスト ノードは <head> ノードの子孫です。ノードには祖先が存在する場合もあります。祖先はノードの親、またはその親の親などです。たとえば、すべてのテキスト ノードは <html> ノードを祖先として持つことができます。 |
<<: JavaScript のドキュメント オブジェクト モデル (DOM)
これは今日私が踏んだ4つの落とし穴を記念したものです...落とし穴1:地元のせいエラー:エラー 39...
目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....
重要なイベントまであと何日あるか知りたいですか? Linux bash と date コマンドが役に...
1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...
canisue (http://caniuse.com/#search=border-radius)...
目次1. 値を入力し、そのデータ型を返す** 2. アレイ重複排除3. 文字列の重複排除4. ディー...
目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...
効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...
目次例1例2例3例4例1 <html> <ヘッド> <title>...
JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ていますが、...
CSS は Web ページで非常に重要な役割を果たします。近年の CSS の発展に伴い、疑似要素/疑...
以下のように表示されます。 nsenter -t 1 -m -u -n -i sh -c "...
目次序文コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係プロトタイプチェーン...
<br />私はこの問題で気が狂いそうです。症状は次のとおりです。 症状の説明: Int...
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...