HTML DOM入門_PowerNode Javaアカデミー

HTML DOM入門_PowerNode Javaアカデミー

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 ドキュメント内のすべてのノードはドキュメント ツリー (またはノード ツリー) を形成します。 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)

>>:  MySQLのUPDATE文の落とし穴を記録する

推薦する

MySQL インポート csv エラーの 4 つの解決策

これは今日私が踏んだ4つの落とし穴を記念したものです...落とし穴1:地元のせいエラー:エラー 39...

Vueの子コンポーネントと親コンポーネントの詳細な分析

目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....

bash を使って日付をカウントダウンする方法

重要なイベントまであと何日あるか知りたいですか? Linux bash と date コマンドが役に...

React構成サブルーティングの実装

1. コンポーネント First.js にはサブコンポーネントがあります。 './Admin...

IE8対応のボーダー半径処理方法

canisue (http://caniuse.com/#search=border-radius)...

一般的なフロントエンドJavaScriptメソッドのカプセル化

目次1. 値を入力し、そのデータ型を返す** 2. アレイ重複排除3. 文字列の重複排除4. ディー...

MySQLクエリツリー構造方式

目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...

ウェブページの右下隅に「いいね!」カード効果を実現するための CSS (サンプルコード)

効果 HTML を実装するには、まずクリーンな HTML ページを準備し、ノードを記述します。 &l...

JS 4つの楽しいハッカー背景効果コードを共有する

目次例1例2例3例4例1 <html> <ヘッド> <title>...

MySQL 5.7 JSON 型の使用の詳細

JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ていますが、...

CSS 疑似要素と疑似クラスの魔法のような使い方についての簡単な説明

CSS は Web ページで非常に重要な役割を果たします。近年の CSS の発展に伴い、疑似要素/疑...

JavaScript の継承についてどれくらい知っていますか?

目次序文コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係プロトタイプチェーン...

ウェブデザインスキル:中国語と英語が混在するウェブページの上位表示の問題

<br />私はこの問題で気が狂いそうです。症状は次のとおりです。 症状の説明: Int...

カルーセル例の JavaScript 実装

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...