DOM也就是文档对象模型：document object model
主要用来动态操作HTML的元素节点，dom操作文档是居于DOM树为根据操作的。DOM树为html整体结构框架，其中有各种嵌套标签，最典型的就是以body为主容器，在body内部设置各种元素标签，body在这个时候就是dom里面的主根，其内部的标签为分支。如下图所示：
DOM的节点操作样式大致分为：增、删、改、查
操作DOM的元素时需要获取到元素的节点，类似于css的选择器，通过选择器获取到对应的标签节点。以下是获取元素的几个方法：
1、获取元素
document(当前文档的根节点)
document.getElementByid() 按照id获取节点
document.getElementsByClassName() 按照类名获取节点，使用非ID的节点获取，获取的节点为数组。
document.getElementsByTagName() 按照标签名获取节点，使用非ID的节点获取，获取的节点为数组。
document.querySelectorAll() 通过选择器匹配元素 [批量]
document.querySelector() 通过选择器匹配 [单个]
2、元素属性操作
获取到元素属性后可以对其进行操作，操作的方式如下：
方法一：
获取属性 : ele.属性（html） css的属性
设置属性 ： ele.属性（html） = “值” css的属性值
方法二：
获取属性：ele.getAttribute(“src”)
设置属性 ：ele.setAttribute(“src”,”1.jpg”)
3、设置元素样式
可以理解为DOM操作就是在操作标签的元素，其方法和css样式无异，只不过操作的方式改变了，但效果是相同的。下面是操作元素的样式属性(css样式）style属性
设置样式 ：ele.style.css样式属性=”值”
获取样式 ：ele.style.css样式（style=””）
4、操作标签
DMO操作不仅可以更改元素的样式，还可以对标签增加属性，可以这么理解，DOM操作就是可以更改HTML标签的万能操作，只要获取到id，即可对标签进行操作。
给元素增加属性：
ele.className = “name” 设置name
ele.id = “value” 设置value
ele.dataItem = “xxx”
5、节点操作
元素节点操作，除了更改和创建元素的样式之外，DOM操作还提供了增加节点操作，直接创建标签节点。
创建元素节点:
document.createElement(tagName) //节点对象（空标签）
document.createrTextNode=”value” //创建一个字符串（string）
ele.cloneNode(ele) //复制一个节点
ele.appendChile(ele) //追加子节点，创建的节点可以追加到父节点中，例如：创建li追加到ul标签中， 案例：ul.appendChile(li)
6、删除
删除自身：
ele.remove();
