感觉自己DOM操作不清晰，借机会整理一下。
DOM即文档对象模型。
HTML的标准对象模型； HTML的标准编程接口； W3C标准
是针对XML并经过扩展用于HTML的应用程序的编程接口（API）。所以DOM本质上是一种接口（api）,是专门用于操作网页内容的接后标准。
DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每一个组成部分都是某种类型的节点。借助DOM提供的API，开发人员可以删，添加，替换或修改任何节点。
原生JS DOM操作
`dom.nodeType = 1 //元素节点
dom.nodeType = 2 //属性节点
dom.nodeType = 3 //文本节点`
编程接口
可通过JavaScript(以及其他编程语言)对HTML DOM进行访问。 所有HTML元素被定义为对象，而编程接口就是对象方法和对象属性。 方法是能够执行的动作（比如添加和修改元素）。 属性石能够获取或设置的值（如节点的名称或内容）
拿到指定节点
`var id = document.getElementById("id"); //返回带有指定id的元素
var name = document.getElementByTagName("li"); //返回带有指定标签的元素
var class = document.getElementByClassName("class"); //返回带有包含执行类名的所有元素节点列表。`
创建DOM节点
`var node = document.createElement("div");
var attr = document.createAttribute("class");
var text = document.createTextNode("菜呀菜");`
插入DOM节点
`node.appendChild(text) //插入新的子节点
node.insertBefore(pre,child) //在node元素内child前加入新元素`
删除DOM节点
node.removeChild(text) //从父元素删除子元素节点
修改DOM节点
`node.setAttribute("class","name") //修改设置属性节点
node.replaceChild(pre,child) //父节点内新子节点替换旧子节点`
常用DOM属性
`node.innerHtml //获取/替换元素内容
node.parentNode //元素节点的父节点
node.parentElement //元素节点的父元素节点（一般与Node节点相同）
node.firstChild //属性的第一个节点
node.lastChild //属性的最后一个节点
node.nextSibling //节点元素后的兄弟元素（包括回车，空格，换行）
node.nextElementSibling //节点元素后的兄弟元素节点
node.previousSibling //获取元素的上一个兄弟节点（元素，文本，注释）
node.previousElementSibling //获取元素的上一个兄弟节点（只包含元素节点）
node.childNodes //元素节点的子节点（空格，换行默认为文本节点）
node.children //返回当前元素的所有元素节点
node.nodeValue //获取节点值
node.nodeName //获取节点名字
node.attributes //元素节点的属性节点
node.getAttribute("name") //元素节点的某个属性节点
node.style.width = "200px" //设置css样式`
jquery 方法
待补充
| 标题 | |
|---|---|
增 删 改 查 设置样式 监听方法
