DOM知识点（一）

一、对 DOM 的理解

1、DOM（Document Object Model）

文档对象模型

2、DOM 的目标

js 提供的操作网页文档的接口

3、DOM 树

（网页的标签看成是节点，整个网页看成是节点树）网页中所有的内容都可以看成是节点
js 会把整个网页变成一颗节点树；可以通过 DOM 操作去操作节点树，从而实现对网页的操作。

二、DOM节点的类型

1、文档节点

document 整个文档

2、元素节点

Element html元素

3、文本节点

Text 文本 换行也算文本

4、注释节点

Comment 注释

5、属性节点

Attr 属性

三、节点对象的三个属性

nodeValue 、nodeType 、 nodeName

节点类型	nodeValue	nodeType	nodeName
文档节点：document 整个文档	null	9	#document
元素节点：Element html元素	null	1	大写标签名
文本节点：Text 文本	文本内容	3	#text
注释节点：Comment 注释		2
属性节点：Attr 属性	属性值	2	属性名

四、获取元素节点

1、根据 id 获取

document.getElementById(id名称);
返回的是一个节点对象

1、根据name

document.getElementsByName(name名称);
返回一个数组

2、根据className 类名

document.getElementsByClassName(名称);
返回一个数组

3、根据tagName 标签名

document.getElementsByTagName 名称);
注意：使用时要注意兼容性

4、根据选择器来查询

es 6
4.1 document.querySelector();
返回的是dom节点对象，没有返回null
4.2 document.querySelectorAll();
返回的是数组，没有返回空数组

dom 操作很耗性能
注意：
document.getElement…和 document.querySelector…;的区别
document.querySelector();获取元素是静态的（一开始就有的），不随文档的变化而变化
document.getElement…获取的元素是动态的（通过js写的）