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文の落とし穴を記録する

推薦する

Vueカスタムディレクティブを使用してドラッグアンドドロッププラグインを構築する方法

HTML5 のドラッグ アンド ドロップ機能は誰もが知っていますが、これを使用するとドラッグ アンド...

MySQLを安全にシャットダウンする方法

MySQL サーバーをシャットダウンする場合、シャットダウン方法に応じてさまざまな問題が発生する可能...

MySql 最適化のための my.ini 中国語構成スキームの詳細な説明: InnoDB、4GB メモリ、および複数のクエリ

この記事は、4G メモリ システム用の MySQL 構成ファイル ソリューションです (主に Inn...

MySQLのMVCCマルチバージョン同時実行制御の実装

1 MVCCとは何かMVCC の正式名称は、マルチバージョン同時実行制御です。データベースへの同時ア...

CSS の境界線を通して三角形と矢印を実装するサンプルコード

1. CSS ボックスモデルボックスには、余白、境界線、パディング、コンテンツが含まれます境界線の接...

CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード

CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...

Docker View プロセス、メモリ、カップ消費量

Docker プロセス、メモリ、カップ消費量を表示dockerコンテナを起動し、dockerinsp...

Rancher のデプロイメントと K8S クラスターのインポートに関する問題

Rancher のデプロイメントには、次の 3 つのアーキテクチャがあります。高可用性 Kubern...

Dockerで同じIDを持つ2つのイメージを削除する

今日 Docker コンテナを作成したとき、誤ってイメージの名前を間違って入力しました。その結果、コ...

ウェブサイトに最も必要なのは、ターゲットユーザーグループのエクスペリエンスを向上させることです。

「大河は東に流れ、波は歴代の英雄たちを洗い流した。古城の西側は三国時代の周朗の赤壁だと言われている...

MySQL Undo ログと Redo ログの概要

目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...

MYSQL サブクエリとネストされたクエリの最適化例の分析

ゲーム史上最高スコアトップ100をチェックSQLコード cdb_playsgame ps から ps...

Zabbix による SQL Server の監視プロセスの詳細な説明

Zabbix による SQL Server の監視を見てみましょう。まずfreetdsをダウンロード...

mybatis-plusページングパラメータが渡された後、SQLのwhere条件にはページング情報操作の制限がありません

2時間近くかけて、さまざまな方法を試しました。後で、whereでフィルタリングした後のデータ量が1ペ...