JS DOM和Node类型

一、什么是HTML DOM

HTML Document Object Model（文档对象模型） HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树) 文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

JS获取DOM元素的方法（8种）

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）

1.通过ID获取（getElementById）
document.getElementById(‘id’)
用法：
1.上下文必须是document。
2.必须传参数，参数是string类型，是获取元素的id。
3.返回值只获取到一个元素，没有找到返回null。

坑~~坑坑_坑坑坑坑~：

1.如果有多个id存在只获取第一个，也就是最先出现的哪一个。一般情况也不会出现同一个ID在页面上出现两次。
2.在IE6、7中会把表单元素的name当做ID值获取到。所以大家在定义这些的时候一定要注意。
3.在IE6、7中不区分大小写。
4.可以直接用元素的ID代表这个元素。（项目中不推荐）
5.通过ID获取元素的上下文只能是document。为什么上下文必须是document呢，因为getElementById这个方法在Document类的原型上，也许你没有听懂，那就继续往下看。
2.通过name属性（getElementsByName）
document.getElementsByName(‘name’)
用法：
1.上下文必须是document。
2.必须传参数，参数是是获取元素的name属性。
3.返回值是一个类数组，没有找到返回空数组。
坑~~坑坑_坑坑坑坑~：
1.获取的结果是一个类数组，不是数组。
2.在IE浏览器中只能获取到表单元素，当然我们一般也只用它获取表单元素，从ie10开始可以不只是表单元素。
3.上下文只能是document，原因同getElementById。
3.通过标签名（getElementsByTagName）
document.getElementsByTagName(‘p’);
var oDiv = document.getElementById(‘divId’);
oDiv.getElementsByTagName(‘p’);
用法：
1.上下文可以是document，也可以是一个元素，注意这个元素一定要存在。
2.参数是是获取元素的标签名属性，不区分大小写。
3.返回值是一个类数组，没有找到返回空数组。

坑~~坑坑_坑坑坑坑~：
1.获取的结果是一个类数组。
2.上下文不必须是document了，因为getElementsByTagName方法在不仅在Document类的原型上也在Element类的原型上，所以document和元素都可以使用这个方法。如果还不懂我在文章最后会再解释一下。

3.通过类名（getElementsByClassName）
用法（和getElementsByTagName类似）：
1.上下文可以是document，也可以是一个元素。
2.参数是元素的类名。
3.返回值是一个类数组，没有找到返回空数组。

坑~~坑坑_坑坑坑坑~：
1.获取的结果是一个类数组。
2.IE8以及以前版本不兼容。真可惜这么好用的方法不兼容。
5.获取html的方法（document.documentElement）

document.documentElement是专门获取html这个标签的。
6.获取body的方法（document.body）

document.body是专门获取body这个标签的。
7.通过选择器获取一个元素（querySelector）

用法：
1.上下文可以是document，也可以是一个元素。
2.参数是选择器，如：“div .className”。
3.返回值只获取到一个元素。

坑~~坑坑_坑坑坑坑~：
这个方法不兼容IE7以及以前版本，现在似乎也没有考虑IE7兼容的公司了。
8.通过选择器获取一组元素（querySelectorAll）

用法同querySelector类似：
1.上下文可以是document，也可以是一个元素。
2.参数是选择器，如：“div .className”。
3.返回值是一个类数组。

坑~~坑坑_坑坑坑坑~：
同querySelector，不兼容IE7。
使用原生JS获取DOM元素的8个方法讲完了，接下来在讲一下为什么有的方法只能在document上使用。

Node类型

除IE外所有浏览器都可以访问这个类型（因为IE中的DOM对象都是以COM对象的形式实现的），而且js中的所有节点类型都继承自Node类型。
nodeName/nodeValue/nodeType
nodeName–节点的名称：

元素节点 nodeName 是标签名称
属性节点 nodeName 是属性名称
文本节点 nodeName 的值是 “#text”
文档节点 nodeName 的值是 “#document”
注意：nodeName 的值是大写字母
nodeValue–节点值：

文本节点 nodeValue 是全部文本
属性节点 nodeValue 是属性的值。
文档节点和元素节点 nodeValue 的值是null。
nodeType–节点的类型：

元素节点 nodeType 值是1
属性节点 nodeType 值是2
文本节点 nodeType 值是3
注释节点 nodeType 值是8
文档节点 nodeType 值是9
Document - 文档节点
nodeType: 9
nodeName: #document
nodeValue: null

JavaScript 通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument(继承自 Document 类型)的一个实例，表示整个 HTML 页面。而且 document 对象是 window 对象的一个属性。
Element - 元素节点
nodeType: 1
nodeName: 元素的标签名
nodeValue: null
文本段落的 nodeName：p
链接的 nodeName：a
元素可以包含其他元素，如标题包含链接等。
html是根元素，唯一一个不能被包含在其他元素里面的元素。
Text - 文本节点
nodeType: 3
nodeName: #text
nodeValue: 节点所包含文本

DOM 常用属性

childNodes: 获取任何一个元素的所有类型的节点，不仅仅是元素节点，还有文本节点、注释节点等。

nodeType: 节点类型值，总共有 12 中可取值

nodeName: 节点名称

nodeValue: 一个节点的值

firstChild: 元素的第一个元素

lastChild: 元素的最后一个元素

innerHTML: 读、写某给定元素里的 HTML 内容