【问题标题】: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?

NodeElement 表示节点与 DOM 树相关,并受到 XML 的 NodeElement 定义的启发。 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>,...)。 SVGElementElement 的子类,用于 SVG 标签(<g><clipPath><circle>、...)。
角色和职责HTMLElementSVGElement 主要用于保持继承树的有序性。程序员可以在Element 上使用instanceof 来查看他们处理的是HTML 还是SVG 或浏览器支持的其他某种XML。 HTMLElement 有一些可访问性的方法,例如 SVGElement 有一些与 SVG 视口相关的方法。

HTMLSpanElement、HTMLDivElement、...
每个 HTML 标记 <Foo> 都有一个对应的 Javascript 类 <HTMLFooElement>。这些都是HTMLElement 的子类。同样,每个 SVG 元素 <Bar> 都有一个对应的类 <SVGBarElement>。所以对于<span><div> 等......我们有HTMLSpanElementHTMLDivElement。同样对于 SVG 的 <g><circle> 元素,我们有 SVGGElementSVGCircleElement
角色和职责:这些类再次用于保持继承树的组织性。为每个特定元素提供 OOP 类型并具有特定于元素的方法和属性是很方便的。例如,SVG 圆具有 x 位置、y 位置和半径的属性。

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

【讨论】:

    猜你喜欢
    • 2018-01-31
    • 1970-01-01
    • 2021-01-06
    • 2011-06-16
    • 1970-01-01
    • 2014-12-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多