Document,Node,Element,HTMLDocument ,HTMLCollection,HTMLElement,NodeList

作者:zccst

这个问题如果不是基于原生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() 可返回节点列表中处于指定的索引号的节点。

你可能感兴趣的:(JavaScript)