HTML の概要 DOM_html/css_WEB-ITnose

この記事では主にDOMコンテンツ、DOMノード、ノード属性、HTML要素の取得方法を紹介します。

目次

1. DOM の概要: DOM の概要、および DOM の分類と機能の説明。

2. DOM ノード: DOM ノードの分類とノード階層を紹介します。

3. HTML DOM ノード属性: innerHTML、innerText、nodeName、nodeValue、nodeType などの HTML DOM ノード属性の紹介。

4. HTML 要素ノードを取得する方法: 要素ノードは getElementById、getElementsByName、getElementsByClassName、および getElementsByTagName メソッドを通じて取得できます。

1. はじめに

1.1 DOM の説明

説明: DOM の正式名は Document Object Model で、ドキュメント オブジェクト モデルです。ドキュメントをツリー構造に抽象化し、ドキュメント内のタグ、タグ属性、またはタグのコンテンツをツリー上のノードとして表すことができます。

1.2 DOM 分類

さまざまな操作オブジェクトに従って、Core DOM、XML DOM、HTML DOM に分けることができます。

Core Dom: Core Dom、あらゆる構造化ドキュメントの標準モデル。

XML DOM: XML 要素を操作する、XML ドキュメントの標準モデル。

HTML DOM: HTML 要素を操作する、HTML ドキュメントの標準モデル。

1.3 DOM 関数

① 要素のクエリ

② 要素の先祖、兄弟、子孫のクエリ

③ 要素の属性の取得と変更

④ 要素のコンテンツの取得と変更

⑤ 要素の作成、挿入、削除

2. DOM ノード

ドキュメント内のすべてのコンテンツは、ノード (ノード) として表現できます。例: HTML では、ドキュメント全体、各タグ、各タグの属性とテキスト。ノードとして使用できます。

2.1 ノードの分類

①

文書ノード(Document): XML全体、HTML文書

②

要素ノード(Element): 各XML、HTML要素

③

属性ノード(Attr): 各各 XML および HTML 要素の属性

④

Text ノード (Text): 各 XML および HTML 要素内のテキスト

⑤

Comment ノード (Comment): 各コメント

注: ここでの Document ノードは、一般的なterm は XMLDocument と HTMLDocument に分けることができます。同様に、Element も XMLElement と HTMLElement に分けることができます。

2.2 HTML DOM ノード階層

ノードには、親ノード、兄弟ノード、子ノードなど、相互に階層関係があります。

2.2.1 例:

HTML ドキュメントを HTML DOM ノード ツリーに変換する

2.2.2 例の図の紹介:

1) 要素と 要素の親ノード 要素です。

2) 要素と 要素は兄弟ノードです。

3)