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