Devtools> Elements> Propertiesで追加のDOMサブカテゴリを実際に使用できますか？

Question

他のみんなと同じように、私はChrome DevToolsを使ってHTML要素のプロパティを調べます。たとえば、特定の属性にアタッチされているプロパティを知る必要がある場合は、これを実行します。

1. デベロッパーツールに行く
2. オープン要素パネル
3. 私は右側のパネルで
4. を検査したいHTML DIV要素をクリックして、トップリストはDIVされます
5. [プロパティ]タブをクリックします。（クラス名）
6. そのラベルをクリックし、[プロパティ]

恐ろしいを見ます！そのノードに接続されているすべてのプロパティを確認し、必要に応じて使用することができます。

しかし、以下の6つの追加の一覧は、私と、おそらく他の多くの人が決して使っていないリストです。彼らはDOM hierarchyの一部を表しているようです。

• HTMLDivElement
• のHTMLElement
• 要素
• ノード
• のEventTarget
• オブジェクト

質問：サイトを構築する際には、これらも実用化を持っていますか？私はそれらを使用できるクールなものを逃していますか？彼らは単に参照のためにそこにいるのですか？入力をありがとう！

Answer 1

あなたはオブジェクトとインターフェイスの種類の一覧を持っており、多くの人が使用していないという主張に反します。それらは広範囲に使用されています（あなたはそれを認識していないかもしれませんが）。 JavaScriptで

• オブジェクト

、すべてがObjectです。オブジェクトには基本的なプロパティとメソッドが与えられ、文字どおり他のすべてのオブジェクトがこれらを継承します。

• のEventTarget

トリガされたイベントのソースであった対象を具体的に参照されます。 W3CドキュメントオブジェクトモデルのAPI（素敵な概要here）で

• ノード

、特定の要素タイプが最も重要であるものではないです。すべての要素および属性（ならびにDOCTYPEおよびコメントなどの他のタイプのマークアップ）は、一般に「ノード」と呼ばれ、すべてのノードは特定のプロパティ（すなわち、nodeName,nodeType,nodeValueおよびメソッド）を有する。 DOM APIは、すべてのマークアップを基本的なノードとして扱うことを優先します。このAPIはHTMLで動作するだけでなくXMLでも動作するため、このように設計されています。

• 要素

任意のHTML要素について話をするために使用される一般的な用語です。

• のHTMLElementは

あなたがプログラム的に（すべてのHTML要素がそうであるように）インタフェースを実装する任意のオブジェクトと対話することができますさまざまな方法を説明し、「インターフェース」です。

• HTMLDivElement

HTML DIV要素がprogramatticの相互作用のために公開しなければならない事項について説明し、より具体的なインタフェースです。

Answer 2

「HTMLDivElement」など、<div>とDOM interfacesなどのタグ名を混同しないでください。 1つ目はドキュメント構造の作成の一部であり、2つ目はブラウザとスクリプトのインターフェイスです。

HTMLDivElement インターフェースはdiv要素を操作するための（ 正規のHTMLElementインターフェースを越えて、それはまた 継承によってそれに利用できる持っている）特別な特性を提供します。

MDNまたはthe spec itselfで検索し、あなたのリスト内の他のものの説明を慎重に読んでください。