在h5中，经常需要修改某个元素节点的样式，内容等，如何找到对应的元素，是首先要解决的问题。
getElementsByTagName方法
这个方法来返回页面上所有包含tagName等于某个指定值的元素对象的集合，当得到相应的节点集合以后，就可以去访问某个子节点。
var eles = document.getElementsByTagName('img')
节点对象在DOM中定义为Node对象，Node对象定义了一些属性方法，如下：
| 属性/方法 | 返回类型 | 具体描述 |
|---|---|---|
| innerHTML | String | 表示当前节点的内部标签 |
| innerText | String | 表示当前节点的文字内容 |
| length | Number | 返回NodeList中的节点数 |
| nodeName | String | 节点名称，根据节点的类型而定义 |
| nodeValue | String | 节点的值，根据节点的类型而定义 |
| nodeType | Number | 节点的类型常量值之一 |
| firstChild | Node | 指向在childNodes节点集合中的第一个节点 |
| lastChild | Node | 指向在childNodes节点集合中的最后一个节点 |
| parentNode | Node | 指向所在节点的父节点 |
| childNode | NodeList | 指向所在节点的父节点 |
| previousSibling | Node | 指向前一个兄弟节点，如果当前节点本身就是第一个兄弟节点，则返回null |
| nextSibling | Node | 指向后一个兄弟节点，如果当前节点是最后一个兄弟节点的话，返回null |
| hasChildNodes() | Boolean | 是否包含一个或多个子节点 |
| AppendChild(node) | Node | 将node添加到childNodes的末尾 |
| removeChild(node) | Node | 从childNodes中删除node |
| replaceChild(newnode,oldnode) | node | 将childNodes中oldnode替换成newnode |
| insertBefore(newnode,refnode) | Node | 在childNodes中在refnode之前插入newnode |
| cloneNode(deep) | Node | deep为true是深复制，复制当前的节点以及子节点，false为浅复制，只复制当前节点 |
getElementsById
根据绑定的id返回一个唯一的元素节点
var el = document.getElementById('myId');
getElementsByClassName
通过类名获取相同class名的元素节点
var elems = document.getElementsByClassName('box');
querySelectorAll
返回页面所有匹配css选择器的元素节点对象集合
var elems = document.querySelectAll('.box');
querySelector
这个只会返回匹配选择器的第一个元素节点对象，而querySelectorAll返回的是所有匹配的元素节点对象的集合。
2、处理属性
对于元素节点，DOM提供了三个方法来处理其属性。
getAttribute(name)：获取某个属性的值
var ele = document.getElementById('myBox');
ele.getAttribute('class'); //打印id名为myBox的类名
setAttribute(name,newValue)：设置某个属性的值
var ele = document.getElementById('myBox');
ele.setAttribute('class','myStyle);
removeAttribute(name)：移除某个属性
var ele = document.getElementById('myBox');
ele.removeAttribute('class');
3、读取和设置内容
innerText
在通过innerText属性操作元素所包含的文本内容时，它会按照由浅入深的顺序，将子文档树中所有文本拼接起来。
注意一点的是：在使用innerText和innerHTML为元素对象设置内容时，会先将对象开始标签和结束标签之间的内容全清空。
innerHTML
用于获取标签对象起始和结束标签内的代码
var oDiv = document.getElementById('myId');
oDiv.innerHTML = `<img src='./img.png'>` //展示为一张图片显示出来
4、创建和操作元素节点
DOM元素节点还可以进行一系列的增、删、替换的操作。
创建新的dom元素节点
有几种不同的方法去创建不同类型的节点
| 方法 | 具体描述 |
|---|---|
| createTextNode(text) | 创建包含文本text的文本节点 |
| createElement(tagName) | 创建标签为tagName的HTML元素节点 |
| createDocumentFragment() | 创建文档碎片节点 |
使用createElement、createTextNode、AppendChild
先创建div元素，然后创建一个新的节点p标签元素节点，然后将元素追加至div中
var oDiv = document.createElement('div');
oDiv.setAttribute('id','my-div');//设置id
var oP = document.createElement('p');
var oText = document.createTextNode('新增的文本');
oP.AppendChild(oText);
oDiv.AppendChild(oP);
document.body.AppendChild(oDiv);
所有的DOM操作必须在页面完全载入后才能进行，当页面正在载入时，要向DOM插入相关节点是不可能的，因为DOM树还没有构建完成。
5、动态的删除元素节点
removeChild方法可以接受一个参数，代表要删除的节点对象，返回值也是这个节点对象，动态的删除节点时，需要利用parentNode的特性确保能够访问到它真正的父元素节点去删！直接删除是获取不到那个元素的
var oDiv = document.getElementById('child');
oDiv.parentNode.removeChild(oDiv);
6、替换节点
如果想要将节点替换成一个新的节点，则需要使用replaceChild方法，replaceChild方法有两个参数，被添加的节点对象和被替换的节点对象
var oList = document.getElementById('dataList');
var oLi = document.querySelector('#dataList li'); //返回的是第一个li元素
var nLi = document.createElement('li');
nLi.innetText('new Node');
oList.replaceChild(nLi,oLi);//第一个是被添加的对象，后面的是被替换掉的对象
