Document，Node，Element，HTMLDocument ，HTMLCollection，HTMLElement，NodeList

这个问题如果不是基于原生js写组件，可能仍然不明不白，既然遇到了，就整理一下。

一、Document，Node，Element的关系
1，Document 对象
Document 对象是一棵文档树的根，可为我们提供对文档数据的最初（或最顶层）的访问入口。
用于元素节点、文本节点、注释、处理指令等均无法存在于 document 之外，document 对象同样提供了创建这些对象的方法。Node 对象提供了一个 ownerDocument 属性，此属性可把它们与在其中创建它们的 Document 关联起来。

属性：documentElement, doctype, nodeType, childNodes, firstChild
方法：createElement(), createTextNode(), getElementByXX(),

2，Node 对象 - 节点对象代表文档树中的一个节点。
Node 对象是整个 DOM 的主要数据类型。
节点对象代表文档树中的一个单独的节点。
节点可以是元素节点、属性节点、文本节点，或者也可以是“节点类型”那一节中所介绍的任何一种节点。
请注意，虽然所有的对象均能继承用于处理父节点和子节点的属性和方法，但是并不是所有的对象都拥有父节点或子节点。例如，文本节点不能拥有子节点，所以向类似的节点添加子节点就会导致 DOM 错误。

nodeType, nodeName, nodeValue
属性：baseURI, ownerDocument, textConent, childNode, firstChild
方法：appendChild(), cloneNode(), isEqualNode(), hasAttributes(), normalize()

完整版
属性：nodeName/nodeType/nodeValue, previousSibling/nextSibling, childNodes, firstChild/lastChild, parentNode/ownerDocument, baseURI, localName, namespaceURI, prefix, textContent(返回节点及其后代的文本内容), text, xml.
方法：cloneNode(), insertBefore(), appendChild/removeChild/replaceChild, isEqualNode/isSameNode, normailze(合并相邻的text节点并删除空的text节点);

节点编号：节点名称：
1 Element               #important 等于1时表示是Element
2 Attribute
3 Text                  #important
4 CDATA Section
5 Entity Reference
6 Entity
7 Processing Instrucion
8 Comment
9 Document              #important 等于9时表示是Document
10 Document Type
11 Document Fragment
12 Notation

(1)ownerDocument：返回节点的根元素（document对象）

(2)NodeList 对象代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。
节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。
属性：length 可返回节点列表中的节点数目。
方法：item() 可返回节点列表中处于指定的索引号的节点。

3，Element 对象
Element 对象
在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
元素也可以拥有属性。
属性：attributes, baseURI, tagName, ownerDocument, nodeType, childNodes, firstChild, nextSibling
方法：appendChild()类，isEqualNode()类，getAttribute()类，getElementsByTagName()

与Node不同的是：node没有属性操作相关的方法。都是关于节点的，如appendChild()类，isEqualNode()类

(1) XMLElement 对象
Element 对象表示 XML 文档中的元素。元素可包含属性、其他元素或文本。如果元素含有文本，则在文本节点中表示该文本。
由于元素对象也是一种节点，因此它可继承 Node 对象的属性和方法。
重要事项：文本永远存储在文本节点中。在 DOM 处理过程中的一个常见的错误是，导航到元素节点，并认为此节点含有文本。不过，即使最简单的元素节点之下也拥有文本节点。举例，在 <year>2005</year> 中，有一个元素节点（year），同时此节点之下存在一个文本节点，其中含有文本（2005）。

(2) HTMLElement 对象
HTML DOM 节点，表示 HTML 中的一个元素。（nodeType是1）
在 HTML DOM （文档对象模型）中，每个部分都是节点：
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

HTMLElement 对象继承了 Node 和 Element 对象的标准方法。某些类型的元素实现了特定于标记的方法，W3School 在 HTML DOM 参考手册的各标记参考页中提供了这些方法的信息。

二、HTMLDocument ，HTMLCollection，HTMLElement，还有NodeList的关系

HTMLxxxxx在Document的基础上进行HTML扩展，同理，还有XML实现。

HTMLDocument 接口提供了对 HTML 层级的访问。
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。
很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。

HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。在 JavaScript 中，HTMLCollection 对象的行为和只读数组一样，可以使用 JavaScript 的方括号，通过编号或名称索引一个 HTMLCollection 对象，而不必调用 item() 方法和 namedItem() 方法。
HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文档改变时，那些改变通过所有 HTMLCollection 对象会立即显示出来。
属性：cssRules 只读属性，返回指示列表长度的整数（即集合中的元素数）。
方法：item(); 返回集合中指定位置的元素（节点）。
namedItem() 返回集合中 name 属性或 id 属性具有指定值的元素（节点）。

HTMLElement对象表示 HTML 中的一个元素。（nodeType是1）
HTMLElement 对象继承了 Node 和 Element 对象的标准方法。某些类型的元素实现了特定于标记的方法，W3School 在 HTML DOM 参考手册的各标记参考页中提供了这些方法的信息。

NodeList 对象代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。
节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。
属性：length 可返回节点列表中的节点数目。
方法：item() 可返回节点列表中处于指定的索引号的节点。

Document，Node，Element，HTMLDocument ，HTMLCollection，HTMLElement，NodeList相关推荐

通常，Node.js如何处理10,000个并发请求？
本文翻译自:How, in general, does Node.js handle 10,000 concurrent requests? I understand that Node.js use ...
node 更新_被创造者嫌弃，Node.js 如何应对来自 Deno 的挑战
(给前端大全加星标,提升前端技能) 转自:OSC开源社区 JavaScript 运行时 Node.js 于日前更新到了 15 版本,该软件自发布至今已走过了 11 年的岁月.但在今年 5 月,其竞争 ...
如何在Windows上安装Angular：Angular CLI，Node.js和构建工具指南
In this tutorial, we'll learn how to install Angular CLI in Windows and use it to create an Angular ...
前端走向后台，node.js基本
作为一个前端开发人员,静态网页不仅仅是我们的工作,我们需要与后台做好配合,才能使网页变得非常的灵活与多用.如果我们要做一些后台的简单开发与使用,那么,node.js是很好的选择.那么,对于没有接触过n ...
当node脱离v8_Node Bug 太多惨遭创始人抛弃，前端开发要变天？
原标题:Node Bug 太多惨遭创始人抛弃,前端开发要变天? 曾经 Node 的面世,将 Java 首次带入了后端服务器端开发,不仅让诸多的前端开发者更能轻而易举地编写出高性能的 Web 服务,同时 ...
Node之父重构的Deno终于发布了，它终究会取代Node吗？
Node之父是谁? 没错!就是这个叫Ryan Dahl的男人在2009年创造了Node.你看,其实也不是说大神就都没头发,这位大神毛发不是挺旺盛的嘛! 不过既然是在2009年缔造的Node,那么就不得 ...
Deno 正式发布，Node.js 会被颠覆吗？
" 阅读本文大概需要 10 分钟. " 2020 年 5 月 14 日,可能是前端开发史上里程碑式的一天,因为一个名为 Deno 的库 1.0 版本正式发布了. Deno 是个什么 ...
阿里二面，前端开发在web3.0中该如何应用，记录面经
近期听说周星驰也开始招募web3.0的人才了,可见其火爆程度真是不一般啊,不得不说的是,这又是一场新的革命,必将带来腥风血雨. 对于前端开发来说,很多人可能刚刚准备学习,刚刚入门,刚刚在企业中找到自己 ...
DOM 精通了？请问 Node 和 Element 有何区别？
前言相信我们很多同学都经常会使用到 Node(节点)和 Element(节点)的概念,那么这两者到底有何区别,不知道有多少人能够答得上来这个问题? 今天,我在这里尝试着解释一下 Node 和 Ele ...

Document，Node，Element，HTMLDocument ，HTMLCollection，HTMLElement，NodeList

Document，Node，Element，HTMLDocument ，HTMLCollection，HTMLElement，NodeList相关推荐

最新文章

热门文章