皆さん、こんにちは。エディターが次の質問に答えるためにここにいます。js の dom ノード、javascript の dom と bom の共通属性について見てみましょう。
1.DOMとは
DOMとはJavaScriptがWebページを操作するためのインターフェースであり、正式名称は「Document Object Model」です。その機能は、Web ページを JavaScript オブジェクトに変換し、スクリプトを使用してさまざまな操作を実行できるようにすることです。
ブラウザは、構造化ドキュメント (HTML や XML など) を DOM モデルに基づいて一連のノードに解析し、これらのノードからツリー構造 (DOM ツリー) を形成します。すべてのノードと最終的なツリー構造には、標準化された外部インターフェイスがあります。
DOM は、さまざまな言語で実装できる単なるインターフェイス仕様です。したがって、厳密に言えば、DOM は JavaScript 構文の一部ではありませんが、DOM 操作は JavaScript の最も一般的なタスクであり、DOM がなければ JavaScript は Web ページを制御できません。一方、JavaScript は DOM 操作に最もよく使用される言語でもあります。
2. ノード
2.1 ノードとは
DOM の最小構成単位をノードと呼びます。ドキュメントのツリー構造（DOMツリー）は、さまざまな種類のノードから構成されます。各ノードはドキュメント ツリーの葉として見ることができます。
2.2 ノードの種類
ブラウザーはネイティブ ノード オブジェクト Node を提供します。次の 7 つのノードはすべて Node を継承するため、いくつかの共通のプロパティとメソッドがあります。
| タイプ | 説明する |
| 書類 | ドキュメントツリー全体の最上位ノード |
| ドキュメントタイプ | DOCTYPE ステートメント |
| 要素 | HTML文書内のさまざまなタグ |
| 属性 | HTMLドキュメント内のさまざまなタグのプロパティ |
| 文章 | タグ間またはタグ内のテキスト |
| コメント | コメント |
| ドキュメントフラグメント | HTML ドキュメントの断片 |
3. ノードツリー
3.1 ノードツリーとは
ドキュメントのすべてのノードは、レベルに応じてツリー構造に抽象化できます。このツリー構造が DOM ツリーです。最上位ノードがあり、次のレベルが最上位ノードの子ノード、さらにその子ノードが独自の子ノードを持つというように、階層ごとに次のようなピラミッド構造が導出されます。逆さまの木。
ブラウザーは、ドキュメント全体を表すドキュメント ノードをネイティブに提供します。
3.2 ノード間の階層関係
ルート ノードを除く他のノードには 3 つの階層関係があります。
| 関係 | 説明する |
| 親ノード関係(parentNode) | 直属の上位ノード |
| 子ノード関係 (childNodes) | 直属のノード |
| 兄弟ノード関係(兄弟) | 同じ親ノードを持つノード |
4. Node.nodeType属性
nodeType 属性は、ノードのタイプを示す整数値を返します。
| ノード | 価値 | 絶え間ない |
| ドキュメント (ドキュメントノード) | 9 | Node.DOCUMENT_NODE |
| 要素（要素ノード） | 1 | Node.ELEMENT_NODE |
| Attr (属性ノード) | 2 | ノード.ATTRIBUTE_NODE |
| テキスト (テキストノード) | 3 | Node.TEXT_NODE |
| コメント（コメントノード） | 8 | ノード.COMMENT_NODE |
| DocumentType (ドキュメントタイプノード) | 10 | Node.DOCUMENT_TYPE_NODE |
| DocumentFragment (ドキュメントフラグメントノード) | 11 | Node.DOCUMENT_FRAGMENT_NODE |
console.log(document.nodeType); // 9
console.log(Node.DOCUMENT_NODE); // 9
if (document.nodeType === Node.DOCUMENT_NODE) {
console.log("equal");
} // equal