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

【问题标题】：Roles and responsibilties inherited in this browser object's hierarchy在此浏览器对象层次结构中继承的角色和职责
【发布时间】：2016-03-28 05:14:31
【问题描述】：

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

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

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

【问题讨论】：

@Sam 我不知道 Nodejs 的用途。我是 JS 新手。
您是否尝试过 MDN 文档：-Object-EventTarget-Node-Element-HTMLElement。对于刚接触 JS 的人来说可能有点先进，但可能是从中获得一些想法的好地方。

标签： javascript dom browser javascript-objects

【解决方案1】：

我将介绍一些基础知识。

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

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

元素和节点具有可以遍历、迭代等的父/子关系。

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

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

我认为 object 对于面向对象的目的（原型、实例化等）来说是非常自我解释的。不过，当我看到这一点时，我想到的是，它将是图表上负责 JSON 序列化的位置。

【讨论】：

例如：属性名称removeChild appendChild 表示Node 负责维护一个html 元素。因此，在不提及每个属性名称的情况下，我需要概述该层次结构中每个对象的职责，而不涉及 API 细节
@overexchange 这就是我想说的节点和元素，它们处理所有的父子关系。如果您正在寻找 API 级别的细节，我认为如果不将您链接到一些文档，我们将无法在此线程中解决这个问题。
您能否分享任何有关角色和职责的文档的参考资料？

【解决方案2】：

对象
Object 不一定与浏览器相关。例如，Node.js 环境中的 Javascript 也有 Object。它类似于 Java 中的Object。它代表了对象的最通用、基本的形式，并构成了 Javascript 中面向对象编程的基础。 Javascript 中的所有对象都继承自 Object。
角色和职责：它充当所有类的基类，并提供像 @987654340 这样的简单方法@ 和 is()（类似于 Java 的 isEqual）。

节点和元素
见：What's the difference between an element and a node in XML? 和：Is an Element an instance of a Node in HTML?

Node 和 Element 表示节点与 DOM 树相关，并受到 XML 的 Node 和 Element 定义的启发。 DOM tree 是 XML 的 tree 表示。 node 代表树中的anything（评论、ctag、标签、属性）。元素具体来说是，作为标签的节点（<div>、<h1>、<span>、<g>、<clipPath>、<circle>、.. .)。根据这个定义，每个元素都是一个节点（Element 继承自 Node）。
角色和职责：Node 为操作 DOM 树提供了有用的抽象。诸如遍历树、添加节点、删除节点、查找子节点等方法。 Element 具有相同的作用，但在我们专门处理标签时就在那里。它具有特定于 Element.tagName() 等标签的额外方法。

HTMLElement、SVGElement、...
浏览器处理的两种最常见的 XML 类型是 HTML 和 SVG。但还有更多。例如MathML 是用于在浏览器中编写数学方程式的 XML。 HTMLElement 是 HTML 标签的 Element 的子类（<div>、<h1>、<span>，...）。 SVGElement 是 Element 的子类，用于 SVG 标签（<g>、<clipPath>、<circle>、...）。
角色和职责：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 的类都可以通过addEventListener 注册多个订阅者，然后向订阅者发送一个事件。
角色和职责：useful 用于监听到诸如点击、键盘按下等事件。例如，如果您单击<div>，浏览器将在HTMLDivELement 上调用dispatchEvent，任何订阅的人都会调用其回调函数。

【讨论】：