html dom节点有哪些,【DOM】DOM是什么（DOM的节点类型）

写在前面：

学到DOM时，看到关于文档(结构树)、节点(node)、和DOM提供的一些方法获取(找到)所需的节点、还有DOM属性，我很混乱，我无法弄清节点的关系层级属性和方法的关系，所以在使用DOM之前我要先了解DOM，当我们用javascript对HTML DOM进行操作的时候我们要明确HTML DOM中节点类型和层级才能准确定找到你想要增删改查的位置。

找了些资料和书，看了些视频，写这篇文章总结一下自己的学习，理清一下思路。

参考：

1.DOM是什么？是干啥的？

DOM，文档对象模型(Document Object Model)。DOM是 W3C(万维网联盟)的标准，DOM定义了访问HTML和XML文档的标准。在W3C的标准中，DOM是独于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

其实上面的摘抄看完也是一脸懵逼;

2.带你了解DOM

网页形成

html为我们搭建结构使你的网页有了内容

css来定义网页的样式，做装修让你的网页更漂亮

JavaScript赋予了页面的行为，交互动效让你可以和网页互动

这才是完整的网页

javascript究竟通过什么来实现这些交互呢?????

有一个ECMAScript标准，基于这个标准我们可以编写程序(例如js)让浏览器来解析，在编写程序时，浏览器为我们提供了一个BOM对象(即browser object model)用来操作浏览器窗口、浏览器导航对象(navigator)、屏幕分辨率(screen)、浏览器历史(history)、cookie等等。

但这个通过BOM来实现的交互远远不够。要实现页面的动态交互和效果，操作html才是核心。

那如何操作html呢？

是htmlDOM，这时候浏览器给我们提供了DOM，DOM给我们提供了用程序(例如js)来动态控制html的接口(方法)这就是传说中的API

DOM是针对xml经过扩展用于html的应用程序编程接口，我们又叫API。

当浏览器打开网页时候，DOM把整个html页面绘制为一个多层的节点结构，html页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。(节点(node)和数据)

然后javascript通过一些方法(例如下面会讲到)根据htmlDOM树对里面的节点(节点类型下面会介绍)进行增删改查

这是w3school提供的HTML DOM 树图片：(图1)

image.png

举个例子

下面是一个网页html(代码1)

DocumentFragment文档片段节点

test1

• test2

var frag = document.createDocumentFragment();

for (var i = 0; i < 10; i++) {

var li = document.createElement("li");

li.innerHTML = "List item" + i;

frag.appendChild(li);

}

document.getElementById("list-node").appendChild(frag);

转换成DOM树后：(图2)

image.png

(图2)中每一个元素都是一个节点，可以看到有很多类型不同的节点。

所以：HTML DOM 节点是由多种类型的节点组合而成，所以当我们用javascript对HTML DOM进行操作的时候我们要明确HTML DOM中节点类型和层级才能准确定找到你想要增删改查的位置

节点类型

节点有12种类型。

下面是html DOM中常出现的类型：

类型

数值常量

字符常量

Element(元素节点)

1

ELEMENT_NODE

Attr(属性节点)

1

ATTRIBUTE_NODE

Text(文本节点)

1

TEXT_NODE

Comment(注释节点)

1

COMMENT_NODE

Document(文档节点)

1

DOCUMENT_NODE

DocumentType(文档类型节点)

1

DOCUMENT_TYPE_NODE

DocumentFragment(文档片段节点)

1

DOCUMENT_FRAGMENT_NODE

当使用.nodeType所的到的值就是表格中的数值常量和字符常量；可以用.nodeType(后面详解)节点类型。

image.png

此时我们知道了DOM的常用节点类型，当我们编写js代码的时候可以通过DOM提供的API(方法)对htmlDOM进行增删改查(本文不写方法的具体使用)；

3,DOM的属性

每个节点都有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)属性(还有其他的常用属性这里不讲)，我们可以通过xxx.nodeType xxx.nodeName xxx.nodeValue获得(xxx代表通过DOM提供的方法获取的node)

nodeType

通过某个节点的nodeType属性来获得节点类型，节点的类型可以是数值常量或者字符常量

看代码(代码2)：

nodeType

这是一个元素节点

var divNode = document.getElementById('container');

/*

if (Node.ELEMENT_NODE || divNode.nodeType === 1) {

alert("Node is an element.");

}//通过.nodeType获取的值和节点类型的字符常量比较判断获

取的节点是什么类型

但是

IE中只支持数值常量，因为低版本IE浏览器没有内置Node对象，

其他浏览器数值常量和字符常量都支持，因此可以直接用数值

常量判断。

*/

if (divNode.nodeType == Node.ELEMENT_NODE || divNode.nodeType === 1) {

alert("Node is an element.");

}//通过.nodeType获取的值和节点类型的数值常量比较判断获取的节点是什么类型

nodeName和nodeValue

先代码(代码3):

nodeName,nodeValue

这是一个元素节点

var divNode = document.getElementById('container');

console.log(divNode.nodeName + "/" + divNode.nodeValue);

//结果: DIV / null

var attrNode = divNode.attributes[0];

console.log(attrNode.nodeName + "/" + attrNode.nodeValue);

//结果： id / container

var textNode = divNode.childNodes[0];

console.log(textNode.nodeName + "/" + textNode.nodeValue);

//结果： #text / 这是一个元素节点

var commentNode = document.body.childNodes[1];

//表示取第二个注释节点，因为body下面的第一个注释节点为空白符。

console.log(commentNode.nodeName + "/" +commentNode.nodeValue);

//结果： #comment / nodeName,nodeValue实验哈哈哈

console.log(document.doctype.nodeName + "/" + document.doctype.nodeValue);

//结果： html/null

var frag = document.createDocumentFragment();

console.log(frag.nodeName + "/" + frag.nodeValue);

//结果： #document-fragment / null

根据实验，得出下表格(以上面的代码为例):

节点类型

nodeName

nodeValue

Element(元素节点)

元素标签名称如:div

null

Attr(属性节点)

属性名称如:id

属性值如:container

Text(文本节点)#text

节点中包含的文本内容

Comment(注释节点)

#comment

注释中的内容

DocumentType(文档类型节点)

doctype的名称(html)

null

DocumentFragment(文档片段节点)

#document_fragment

null

代码3中就用到了几个常用方法

.getElementById通过id获取节点

.attributes获取html标签(元素节点)的属性(也就是属性节点)可以看出属性节点是元素节点的一部分并不是父子关系

下一篇在详解DOM的更多属性和方法的使用