js中，dom元素和节点的区别

2023-04-22 10:10:01JavaScript09

js中，dom元素和节点的区别,第1张

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点

所有 HTML 元素是元素节点

所有 HTML 属性是属性节点

HTML 元素内的文本是文本节点（包括回车符也是属于文本节点）

注释是注释节点

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点。

<title lang="en">Harry Potter</title>

<author>J K. Rowling</author>

</book>

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>

</book>

</bookstore>

元素和节点的区别：元素是一个小范围的定义，必须是含有完整信息的节点才是一个元素。

比如：<author>......./<author>是一个元素。而<author>是一个子节点或者是元素节点，Vaidyanathan Nagarajan是一个文本节点。

换句话说就是元素一定是节点，但节点不一定是元素。

node(节点)是相对Tree这种数据结构而言的。Tree就是由Node组成。

element则是xml里面的概念，<xxx>就是元素，是xml中数据的组成部分之一。

DOM将文档中的所有都看作节点node>element

一个元素是由开始标签、结束标签以及标签之间的数据构成的

总结：元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点。

元素是统称；节点是具有唯一性的；元素节点和文本节点之间存在父子关系，元素节点和属性节点之间不存在父子关系。

元素：

就是html文档里，所有的标签都可以称之为元素，比如说、<tr>等，意思是说元素是个统称，一个文档里面有很多的元素。

节点：

就是js为了对html文档进行操作，而开发的，也就是DOM，文档对象模型。即每个元素都可以称之为一个节点，节点是唯一的。

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。

链接地址： http://blog.csdn.net/hj7jay/article/details/53389522

http://blog.csdn.net/terrychinaz/article/details/8492092

1、节点查找API节点：

Node是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有 element，text，attribute，comment（注释节点），document 等。

{

ELEMENT_NODE: 1, // 元素节点

ATTRIBUTE_NODE: 2, // 属性节点

TEXT_NODE: 3, // 文本节点

COMMENT_NODE: 8, // 注释节点

DOCUMENT_NODE: 9, // 文档

DOCUMENT_TYPE_NODE: 10,

DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片

}

通常情况下，只需要了解上面的几个就行了。

2、节点查找API

document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；

document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；

document.getElementsByTagName ：根据标签查找元素， * 表示查询所有标签，返回一个 HTMLCollection 。

document.getElementsByName ：根据元素的name属性查找，返回一个 NodeList

document.querySelector ：返回单个Node，IE8+(含），如果匹配到多个结果，只返回第一个。

document.querySelectorAll ：返回一个 NodeList ，IE8+(含）。

document.forms ：获取当前页面所有form，返回一个 HTMLCollection ；

这里顺便提一下：querySelector与getElement 之类的区别：

写法不同，最大的区别就是getElement 之类的只能接受的参数是id，class，name之类的，而querySelector接受的参数则扩展到了css的选择器【必须严格按照css选择器写法来写，不然抛出异常】，可以用任意的选择器来描述选择的东东。getElement***返回值是一个 Live Node List（动态），querySelector返回的是 Static Node List（静态）。

什么是NodeList呢？

<pre>NodeList 本质上是一个动态的 Node 集合，只是规范中对 querySelectorAll 有明确要求，规定其必须返回一个静态的 NodeList 对象。</pre>

看下面：

html:

1

2

js:

var query2 = document.querySelectorAll('.lost')

var query3 = document.getElementsByClassName("lost")

console.log(query2)//打印出的原型是NodeList

console.log(query3)//HTMLCollection

返回的是NodeList /HTMLCollection？

实际上，HTMLCollection 和 NodeList 十分相似，都是一个动态的元素集合，每次访问都需要重新对文档进行查询。两者的本质上差别在于，HTMLCollection 是属于 Document Object Model HTML 规范，而 NodeList 属于 Document Object Model Core 规范。

这里又有个问题:NodeList 和HTMLCollection 的区别是什么呢？

HTMLCollection是元素集合，而NodeList是节点集合（既可以包含元素，也可以包含文本节点）。所以 node.childNodes 返回 NodeList，而 node.children 和 node.getElementsByXXX 返回 HTMLCollection 。children是Element的属性，只返回的是html节点。childNodes是Node的属性，返回的是制定元素的所有的子元素集合的节点，包括html节点，文本节点，属性节点，注释节点等等。

例子：

html：

<ul>

</ul>

js：

var ul = document.getElementsByTagName('ul')[0]

var lis1 = ul.childNodes,//NodeList

lis2 = ul.children//htmlcollection

console.log(lis1.toString(), lis1.length) // "[object NodeList]" 9

console.log(lis2.toString(), lis2.length)//[object HTMLCollection] 4

上面的nodelist节点把换行也当作了一个个的空白文本节点了，所以返回的是9，而htmlcollection却不会。querySelectorAll 的返回值是一个静态的 NodeList 对象，而 getElementsBy ***系列的返回值实际上是一个 HTMLCollection 对象。

<pre>