DOM
文档对象模型document object model
提供了一套操作文档流(页面)的api
1.先获取元素
2.再操作 操作样式
API
获取元素
1.document.getElementById('id名'); 通过id获取元素（获取一个）
2.document.getElementsByTagName('标签名'); 获取所有对应标签名的元素，获取的为 伪数组形式
3.document.getElementsByClassName('类名'); 获取所有对应类名的元素，获取的为 伪数组形式
4.document.getElementsByName('name值'); 获取所有对应类名的元素，获取的为 伪数组形式
5.document.querySelector('标签名'); 通过选择器获取，只获取一个（第一个）
document.querySelectorAll('标签名’); 通过选择器获取，获取所有
6.document.body; 获取body
document.documentElement; 获取html
document.title; 获取tltle
document.head; 获取head
操作样式【style方式，追加到行内】
style法把样式都添加到行内了
oDiv.style.属性名=“属性值”;
oDiv.style.background="颜色值";
oDiv.style.fontSize="值";
oDiv.style.width="值";
className法把样式都添加类名
oDiv.style.backgroundcolor="类名";
追加类名
oDiv.classList.add=('类名'); 增加类名
oDiv.classList.remove=('类名'); 删除类名
oDiv.classList.toggle=('类名'); 切换类名
操作内容
1.表单控件
获取内容：var oDiv=document.querySelector('div');
设置内容：oIpt.value = "新增内容 ";
2.非表单控件
获取内容：元素.innerHTML;（oDiv.innerHTML）
设置内容：innerHTML = "<b></b>";
可以解析标签
获取内容：元素.innerText;（oDiv.innerText）
设置内容：innerText = "xx";
不支持解析标签
设置属性
属性分为自定义属性和固有属性
自定义属性：自己定义的属性（自己命名和定义的）
getAttribute 获取元素的某个属性（包括自定义属性）
setAttribute 给元素设置一个属性（包括自定义属性）
removeAttribute 直接移除元素的某个属性
节点
页面上所有的元素都可以称为节点，DOM的最小单元就是节点
oDiv.firstChild.nodeType
属性：属性节点（nodeType 2）
文本：文本节点（nodeType 3）
注释：注释节点（nodeType 8）
文档：文档节点（nodeType 9）
DOM以树状图的形式出现
通过节点关系(父子关系)(兄弟关系)，来获取节点：
父节点.firstChild:获取父元素的第一个子节点
节点.nextSibling： 节点的下一个兄弟节点
节点.previousSibling： 节点的上一个兄弟节点
父节点.lastChild： 节点的最后一个子节点
节点.parentNode： 节点的父节点
父节点.childNodes： 获取所有的子节点（伪数组）
获取元素节点：
父节点.firstElementChild:获取父元素的第一个子元素节点
节点.nextElementSibling： 节点的下一个兄弟元素节点
节点.previousElementSibling： 节点的上一个兄弟元素节点
父节点.lastElementChild： 节点的最后一个子元素节点
节点.parentElementNode： 节点的父元素节点（兼容性不好，已弃用）
父节点.children： 获取所有的子元素节点（伪数组）
oDiv.children[2]; 第2个子元素节点
节点的操作：
1.创建节点：
语法：document.createElement('标签名');
var oLi=document.createElement('li')
返回值：创建好的元素节点
2.追加节点：
语法：父节点.appendChild(子节点)
含义：将子节点追加到父节点的尾部
例子：document.body.appendChild(子节点);
oBox.appendChild(oBtn);
3.插入节点
语法：父节点.insertBefore(子节点，插入的位置(谁的前面))
含义：将子节点插入到父节点的指定位置
例子：oBox.insertBefore(oBtn,oBox.Children[1]);
将button插入到oBox的头部
4.替换节点
语法：父节点.replaceChild(新节点，旧节点)
节点位置，比如children[0]/oUl.children[2]
5.删除节点
语法：父节点.removeChild(子节点)
节点.remove() //常用
oBox.children[0].remove;
oBox.removeChild(oBox.children[0]);
例：oUl.lastElementChild.remove();//删除最后一个元素
6.克隆节点
语法：节点.cloneNode()
含义：克隆出来一个节点
true：代表克隆
获取行间样式：
oDiv.style.width
window.getComputedStyle(oDiv,null['width']);
获取非行间样式
非ID浏览器写法：
window.getComputedStyle(oDiv,null)['width'];
IE浏览器写法：
oDiv.currentStyle["width"];