一、节点
核心节点:DOM
HTML-DOM
CSS-DOM
DOM Core
二、节点属性:
1、parentNode
返回节点的父节点
例如:h1的父节点是div

2、childNodes
返回子节点集合,childNodes[i] 包换行的括空格和注释

3、firstChild
返回节点的第一个子节点,遍历的用法是访问该元素的文本节点
例如: text 为文本节点

4、lastChild
返回节点的最后一个子节点
在IE8以上的浏览器是包括文本节点(换行空格)但是在IE8以及以下浏览器是不包括文本节点(换行空格)的
5、nextSibling
下一个节点
.nextSibling.nextSibling 表示下一个的下一个 只能选取平级的节点 否则为null
6、previousSibling
上一个节点
.previousSibling.previousSibling 表示上一个的上一个 只能选取平级节点null
三、Element属性
不包括文本节点只算元素
firstElementChild 返回节点的第一个子节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
四、如何去兼容谷歌和IE8以及以下的浏览器呢?
1、在谷歌浏览器浏览器 使用firstChild lastChild nextSibling previousSibling 都是包括文本节点的
而IE8以及以下浏览器是不包括文本节点(换行空格)的
2、IE浏览器不支持变量let 用var
3、IE8会把注释当做元素节点 会被选中 IE5和IE7不会
因为IE8不支持nextElementSibling previousElementSibling等写法 所以后面的写法就是为了兼容IE8
var 定义变量 = 元素.nextElementSibling || 元素.nextSibling
var 定义变量 = 元素.previousElementSibling || 元素.previousSibling
var 定义变量 = 元素.firstElementChild || 元素.firstChild
var 定义变量 =元素.lastElementChild || 元素.lastChild
例如:

五、节点详细信息
nodeName:节点名称 #text(文本节点包括换行和空格) 大写的元素 comment注释
nodeValue:节点值 "/n " "LI" "我是注释"
nodeType:节点类型 3 1 8
节点类型 NodeType值
元素element 1
文本text 3
注释comments 8
文档document 9
查看方式:NodeType

设置属性
setAttribute()方法 添加设置本来就有的属性/自定义属性并为其赋指定的值 两个参数("指定属性名","添加的属性值")
removeAttribute() 方法删除指定的属性 一个参数("需要删除的属性名")
例如:
