在此浏览器对象层次结构中继承的角色和职责

Roles and responsibilties inherited in this browser object's hierarchy

在下面的浏览器对象层次结构中,

创建上述层次结构中的每个对象都是为了针对特定的责任范围来管理 html 个元素。

在上面的层次结构中,您能否概述每个浏览器对象的角色和职责,包括由其子项继承的 Object

我会尝试一些基础知识。

节点基本上是 DOM 中的每个项目,包括文本节点。

元素是具有 html 标签的节点子集。元素级别还包含所有 HTML 元素共享的许多高级通用属性和事件处理的 API。

元素和节点具有 parent/child 可以遍历、迭代等关系

事件目标本质上是事件触发时某个时间点的节点;这是传递给在该节点上为该特定事件设置的事件处理程序的对象。例如。我刚刚点击的按钮。

HTML 元素本质上是不同的标签,它们具有某些基本的外观和感觉。所以有很多默认 CSS 和支持事件这个级别。此外,某些 HTML 元素只能是其他某些元素的子元素。想想模式。

我认为对象是非常自我解释的,用于面向对象的目的(原型、实例化等)。不过,当我看到它时想到的是,它将是图表上负责 JSON 序列化的位置。

对象
Object 不一定与浏览器相关。 Java Node.js 环境中的脚本,例如也有 Object.类似于Java中的Object。它代表了最通用、最基本的对象形式,并构成了 Javascript 中面向对象编程的基础。 Java脚本中的所有对象都继承自 Object.
角色和职责:它在那里充当所有classes的基础class并提供简单的方法,例如toString()is()(类似于 Java 的 isEqual)。

节点和元素
参见:What's the difference between an element and a node in XML? 和:

Node and Element represent nodes are related to DOM trees and are inspired by XML's definition of Node and Element. A DOM tree is a tree XML 的表示。一个 node 表示树中的 anything (评论,ctag,标签,属性)。一个 元素 具体是 标签 (<div>, <h1>, <span>, <g><clipPath><circle>、...)。按照这个定义,每个元素都是一个节点(Element继承自Node)。
角色和职责Node 是为操作 DOM 树提供有用的抽象。遍历树、添加节点、删除节点、查找子节点等方法。 Element 具有相同的作用,但在我们专门处理标签时会出现。它具有特定于 Element.tagName().

等标签的额外方法

HTML元素,SVGElement,...
浏览器处理的两种最常见的 XML 类型是 HTML 和 SVG。但还有更多。例如 MathML is XML for writing maths equations in the browser. HTMLElement is a subclass of Element for HTML tags (<div>, <h1>, <span>, ...). SVGElementElement 的子 class,用于 SVG 标签(<g><clipPath><circle>、...)。
角色和职责HTMLElementSVGElement 主要用于保持继承树的组织。程序员可以在 Element 上使用 instanceof 来查看他们处理的是 HTML 或 SVG 还是浏览器支持的其他类型的 XML。 HTMLElement 有一些辅助功能方法,例如 SVGElement 有一些与 SVG 视口相关的方法。

HTMLSpanElement,HTMLDivElement,...
每个 HTML 标签 <Foo> 都有对应的 Java 脚本 class <HTMLFooElement>。这些都是 HTMLElement 的子 class。类似地,每个 SVG 元素 <Bar> 都有对应的 class <SVGBarElement>。所以对于 <span><div> 等...我们有 HTMLSpanElement and HTMLDivElement. Likewise for SVG's <g> and <circle> elements, we have SVGGElement and SVGCircleElement.
角色和职责:同样,这些class用于保持继承树的组织。为每个特定元素提供 OOP 类型并具有 element-specific 方法和属性很方便。例如,SVG 圆具有 x 位置、y 位置和半径的属性。

事件目标
这更像是一个 接口 而不是 class。它类似于观察者模式。任何实现此 EventTarget 的 class 都可以通过 addEventListener 注册多个订阅者,然后向订阅者发送事件。
Roles & Responsibilitiesuseful 用于监听点击、键盘按下等事件。 例如,如果您单击 <div>,浏览器将在 HTMLDivELement 上调用 dispatchEvent,任何订阅的人都会调用其回调函数。