DOM操作

DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM中三个字母分别代表：
D（文档）：可以理解为整个web加载的网页文档；
O（对象）：可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象
M（模型）：可以理解为网页文档的树型结构
DOM 标准被分为 3 个不同的部分：1.核心 DOM - 针对任何结构化文档的标准模型 2.XML DOM - 针对 XML 文档的标准模型 3.HTML DOM - 针对 HTML 文档的标准模型
什么是节点呢？
加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。html标签没有父辈，没有兄弟，所以html标签为根标签。head标签是html子标签，meta和title标签之间是兄弟关系。如果把每个标签当作一个节点的话，那么这些节点组合成了一棵节点树。
下面就是9种查找元素节点的方法：

getElementById()             获取特定id元素节点
getElementsByClassName()     获取特定class元素节点
getElementsByTagName()       获取相同元素的节点列表
getElementByName()           获取相同名称的节点列表
getAttribute()               获取特定元素节点属性的值
setAttribute()               设置或改变特定元素节点的值
removeAttribute()            移除特定元素节点属性
querySelector()              返回与该模式匹配的第一个元素，如果没有则返回null
querySelectorAll()           返回所有的元素节点列表，类似一组元素的快照，而非不断对文档进行搜索的动态查询 

设置元素样式：

ele.style.styleName = styleValue/ele.style = 'style.....'

innerHTML：返回元素开始和结束标签之间的HTML
innerText ：返回元素里面的所有文本
两者区别：1、innerHTML:也就是从ele的起始位置到终止位置的全部内容,包括Html标签。
2、innerText:从起始位置到终止位置的内容, 但它去除Html标签