资讯专栏INFORMATION COLUMN

JavaScript DOM 1- Node, HTMLElement之间到底是什么关系

weknow619 / 2462人阅读

摘要:是一个是一个我们放在里面的文字也是一个再来看一张抽象了的图上面这张图,表示了等的继承关系。所以其实这个时候应该就很清楚它们之间的关系了。每一个都会有一个的变量来标识它是哪一种类型的。例如下图所示到此为止,我们应该弄清楚,以及的相关概念了。

先看一段最简单的HTML代码:


    
        Document Example
    
    
        

An HTML Document

Text

它的DOM结构可以表示成:

整个是一个树状结构,在树状图里面是不是有个“节点”,也就是‘node’的概念?
是的,图中的每一个框框就是一个Node对象。"...."是一个node, "

...
"是一个node, 我们放在

里面的文字"Text"也是一个node.

再来看一张抽象了的图:

上面这张图,表示了Node, Element, HTMLElment等的继承关系。所以其实这个时候应该就很清楚它们之间的关系了。Document, Element都是不同类型的node, HTMLElment又是一种类型的Element, 而我们最熟悉的HTMLDivElment, HTMLInputElement等都是不同类型的HTMLElment.

接下来看一张图,图片来自MDN

图上的常量都是定义在Node类上的,所以可以直接通过Node.DOCUMENT_NODE引用。每一个node都会有一个nodeType的变量来标识它是哪一种类型的node。例如下图所示:

到此为止,我们应该弄清楚node,Node以及HTMLElement的相关概念了。
ps: 文章里把Node叫做‘类’,只是为了更好的理解它的概念,因为在在es6之前,ECMAScript并没有‘Class’这个东西。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83561.html

相关文章

  • JavaScript DOM 3 - 查找特定位置上的节点

    摘要:针对类似于对象,那就是返回包含此节点的子节点的对象。当两个元素之间有空格的时候,即使没有写入文字,但是依然会有一个节点。返回该节点的前一个和后一个兄弟节点。返回此元素的去除空格元素的的子节点个数并没有一个对于的与它对应。 首先把,接下来用于测试的html先贴出来: item list book 1 book 2 ...

    bawn 评论0 收藏0
  • DOM选择器的返回值说起

    摘要:原文发布在我的独立博客上从选择器的返回值说起抛开大大解放生产力的,使用获取元素要使用方法,或类似的,第一种情况下,根据获取时,返回值是唯一的元素而根据等获取时候,返回值是包含所有符合条件的多个元素的列表。 原文发布在我的独立博客上 ~: 从DOM选择器的返回值说起 抛开大大解放生产力的jQuery,使用JS获取元素要使用getElementById方法,或类似的getElem...

    lmxdawn 评论0 收藏0
  • JavaScriptDOM的层次节点(一)

    摘要:是针对和文档的一个,描绘了一个层次化的节点树,允许开发人员添加修改删除节点的一部分。类型级定义了接口,该接口由中的所有节点类型实现。添加的这些属性分别对应于每个元素中都存在的下列标准特性。 DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加、修改、删除节点的一部分。 DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的...

    leap_frog 评论0 收藏0
  • JavaScript笔记——常见DOM知识

    摘要:前言本篇文章以介绍常见的节点知识元素操作方法为目的,其中也对一些比较容易忽略的问题进行简要说明。此外,还有一些方式可以获得相关的元素节点。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。 前言 本篇文章以介绍常见的DOM节点知识、DOM元素操作方法为目的,其中也对一些比较容易忽略的问题进行简要说明。才疏学浅,如有纰漏之处或建议欢迎留下评论。 Node节点 首先,简单看看Node...

    madthumb 评论0 收藏0
  • 如何形成一个完整的HTML对象

    摘要:定义是一个由可以接收事件的对象实现的接口,并且可以为它们创建侦听器。重点分割线只有通过上面的继承关系,我们得到的元素才是一个完整的对象,我们才能为它设置获取属性绑定事件添加样式类等操作。 写在前面,本文将同步发布于Blog、掘金、segmentfault、知乎等处,如果本文对你有帮助,记得为我得到我的个人技术博客项目给个star哦。 为何写这篇文章? 你可能做Web开发已经有一段时间,...

    freewolf 评论0 收藏0

发表评论

0条评论

阅读需要支付1元查看
<