节点的分类：
元素节点 html标签 img body input div
文本节点 文字部分
属性节点 标签内的属性
注释节点
1.document
页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。 根节点。
2.html
页面中最大的元素节点。根元素节点。
3.元素节点
html标签
4.文本节点
每一段文本内容都是一个文本节点
包含 换行 和 空格
一般来说作为元素节点的子节点存在。
5.属性节点：
属性节点不能单独存在，必须依赖于元素节点。
6.注释节点
页面中的注释，作为说明文本使用户。
操作元素节点的属性
标签上的属性分类：
1.原生属性
2.自定义属性
3.H5 自定义属性
1.原生属性
语法：元素.属性名
修改/新增：
元素.属性名 = "值"
获取：
元素.属性名
【注意】class属性是例外，不能直接通过属性名获取，而是用className
2.自定义属性
不能直接使用 元素. 这个语法来获取。
三个方法去操作：
获取
getAttribute("属性名");
返回值：字符串
设置
setAttribute("属性名","属性值")
删除
removeAttribute("属性名")
【注意】这三个方法也可以操作原生属性
3.H5新添 自定义属性
每一个元素节点上都有一个属性：dataSet
里面包含了所有的H5自定义属性。
键值对结构： 例子;data-id ="idBox"
key：data-XXX xxx的内容。
value:属性值
获取：
元素.dataset.key
设置：
元素.dataset.key = "值"
删除
delete 元素.dataset.key
操作元素类名：
1.按照原生属性的方式来操作
获取：
元素.className
设置：
元素.className = "值"
追加：
元素.className += " 值";
【注意】 追加时，值的前面要加一个空格。
删除：
1.重新设置一遍。
2.
2.1 获取classname属性值、
2.2 按照空格去分割字符串
2.3 遍历数组，将要删除的字符串删除
2.4 数组的join方法
2.H5标准给我们一个API
元素节点都有一个属性叫做：classList
里面包含了所有的class值。
获取：
元素.classList 获取class值的集合。
想要获取单个，使用下标。
新增：
元素.classList.add("新增的类名")
删除：
元素.classList.remove("删除的类名")
替换：
元素.classList.replace("旧类名","新类名") ;
toggle() 切换
语法：元素.classList.toggle(类名)
当元素拥有这个类名时，将类名删除
当元素没有这个类名时，将类名添加
操作元素节点的内容：
1.innerHTMl
获取元素节点中除了本身的标签外，所有的HTML代码。
获取：
元素.innerHTML
设置：
元素.innerHTMl = "新的内容"
【注意】 innerHTML 会覆盖原有的内容，而且会解析其中的标签。
2.innerText
获取元素节点中的文本内容,会覆盖原有的内容，不会解析内容中的标签。
获取：
元素.innerText
设置：
元素.innerText = "新的内容";
3.value
主要使用在表单元素中。
操作表单元素节点的value属性。
获取：
表单元素节点.value
设置：
表单元素节点.value = "值"
操作元素节点的样式：
1、 行内样式：
原生属性的方式获取
元素.style.样式的属性名
【注意】如果属性名是多个单词，第二个单词首字母大写，删除中划线。
该方法只能获取行内。
2、 获取元素的有效样式
标准浏览器：
getComputedStyle(要获取样式的元素)
IE低版本：（IE8以下）
元素.currentStyle.样式属性名 box.currentStyle.width
3、 设置样式
注意：只能设置行内式
语法：元素.style.样式名 = "值";
通过节点关系获取节点：
DOM节点不是孤立存在，我们可以通过节点之间的关系去获取他们。
节点的关系，是以属性的方式存在的。
获取父节点。
节点.parentNode
获取兄弟节点
1.下一个节点
node.nextSibling
对于标准浏览器，标签，空文档，换行都属于节点。
IE低版本：指下一个元素节点。
2.下一个元素节点
node.nextElementSibling
下一个兄弟节点 = 节点.nextElementSibling||节点.nextSibling
3.上一个节点
node.previousSibling
4.上一个元素节点
node.previousElementSibling
获取单个子节点
1.第一个子节点
node.firstChild
2.获取第一个元素节点
node.firstElementChild
3.获取最后一个子节点
node.lastChild
4.获取最后一个元素节点
node.lastElementChild
获取所有子节点
1.获取所有子节点
语法：node.childNodes
返回的是子节点的伪数组（元素节点，文本节点，注释节点）
2.获取所有的元素子节点
语法：node.children
返回元素节点。使用最多的方法。
节点的属性
属性：事物的特征
nodeName: 节点名称
注释节点： #comment
文本节点： #text
元素节点： 大写的标签名
属性节点： 属性名
nodeType：节点类型
注释节点：8
文本节点：3
元素节点：1
属性节点：2
nodeValue：节点的值
注释节点：注释内容
文本节点：文本内容
元素节点：null
属性节点：属性值
