在此瀏覽器對象的層次結構中繼承的角色和職責

Question

在下面的瀏覽器對象層次結構中，

上面的層次結構中的每個對象都已經創建為以一定的職責范圍為目標來管理html元素。

在以上層次結構中，您能否概述每個瀏覽器對象（包括其子Object繼承的Object的角色和職責？

Answer 1

我將介紹一些基本知識。

節點基本上是DOM中的每個項目，包括文本節點。

元素是具有html標簽的節點的子集。 元素級別還擁有所有HTML元素共享的許多高級通用屬性和事件處理的API。

元素和節點具有父/子關系，可以遍歷，迭代等等。

事件目標本質上是事件觸發時的時間點上的節點； 這是傳遞給在該節點上為該特定事件設置的事件處理程序的對象。 例如，我剛剛單擊的按鈕。

HTML元素本質上是具有特定基本外觀的不同標記。 因此，存在許多默認CSS並支持此級別的事件。 同樣，某些HTML元素只能是其他某些HTML元素的子元素。 思考架構。

我認為對象出於面向對象的目的（原型，實例化等）非常容易解釋。 但是，當我看到這一點時，想到的是它將是圖形上負責JSON序列化的位置。

Answer 2

賓語
Object不一定與瀏覽器相關。 例如， Node.js環境中的Javascript也具有對象。 它類似於Java中的Object 。 它代表了對象的最通用，最基本的形式，並且構成了Java面向對象編程的基礎。 Javascript中的所有對象都繼承自Object 。
角色和職責 ：它在那里充當所有類的基類 ，並提供諸如toString()和is()類的簡單方法（類似於Java的isEqual ）。

節點和元素
請參閱： XML中的元素和節點之間有什么區別？ 和： 元素是HTML中Node的實例嗎？

Node和Element表示節點與DOM樹相關，並且受XML對Node和Element的定義的啟發。 DOM樹是XML的樹表示。 節點表示樹中的任何內容 （注釋，ctag，標簽，屬性）。 具體來說， 元素是作為標簽的節點（ <div> ， <h1> ， <span> ， <g> ， <clipPath> ， <circle> ，...）。 根據此定義，每個元素都是一個節點（Element從Node繼承）。
角色和職責 ： Node在那里提供了用於操縱DOM樹的有用抽象。 諸如遍歷樹，添加節點，刪除節點，查找子對象之類的方法。 Element具有相同的作用，但是當我們專門處理標簽時就存在。 它具有特定於標簽的額外方法，例如Element.tagName() 。

HTMLElement，SVGElement，...
瀏覽器處理的兩種最常見的XML類型是HTML和SVG。 但是還有更多。 例如， MathML是用於在瀏覽器中編寫數學方程式的XML。 HTMLElement是HTML標簽（ <div> ， <h1> ， <span> ，...）的Element的子類。 SVGElement是用於SVG標簽（ <g> ， <clipPath> ， <circle> ，...）的Element的子類。
角色和職責 ：主要需要HTMLElement和SVGElement來保持繼承樹的組織性。 程序員可以在Element上使用instanceof來查看他們是在處理HTML還是SVG或瀏覽器支持的某種其他XML。 HTMLElement具有一些可訪問性的方法，例如SVGElement具有與SVG視口相關的一些方法。

HTMLSpanElement，HTMLDivElement，...
每個HTML標簽<Foo>都有一個對應的Javascript類<HTMLFooElement> 。 這些都是HTMLElement子類。 同樣，每個SVG元素<Bar>都有一個對應的類<SVGBarElement> 。 因此，對於<span> ， <div>等...，我們有HTMLSpanElement和HTMLDivElement 。 同樣，對於SVG的<g>和<circle>元素，我們有SVGGElement和SVGCircleElement 。
角色和職責 ：同樣，這些類用於保持繼承樹的組織。 為每個特定元素指定OOP類型並具有特定於元素的方法和屬性非常方便。 SVG圓具有例如x位置，y位置和半徑的屬性。

EventTarget
這更多的是接口而不是類。 它類似於觀察者模式。 任何實現此EventTarget的類都可以通過addEventListener注冊多個訂閱者，然后再將事件發送給訂閱者。
角色和職責 ：它對偵聽單擊，鍵盤按下等事件很有用 。例如，如果單擊<div> ，瀏覽器將在HTMLDivELement上調用dispatchEvent ，任何將要訂閱的人都將具有其回調函數調用。