一、获取元素
document.getlementById("id")通过id获取指定元素对象；
document.getElementsByTagName("标签名")：通过标签名获取元素对象的集合(伪数组)argument;
document.getElementsByName("name属性")：通过name属性获取元素对象的集合(伪数组)；
document.getElementsByClassName("class属性")：通过类名获取对象的集合(伪数组) IE9以下不兼容；
docuemnt.querySelector("选择器")：通过选择器获取元素对象；
document.querySelectorAll("选择器")：通过选择器获取元素对象的集合("伪数组")；
("伪数组")要在后面加[0]里面数字下标；
二、 创建元素节点
document.createElement() 创建元素(标签)节点；
document.createTextNode() 创建文本节点；
document.createDocumentFragment(): 创建文档碎片(提高性能)；
减少DOM一次重排，提高性能
- 将碎片存放在文档的文档节点
<a>给了<li> - 将文档给到已有的
<ul><li>给了<ul>
三、修改节点对象
父节点replacechild(新节点，旧节点)
四、删除节点对象
父节点.removechild(子节点)删除子节点；
当前节点.remove() 删除当前节点；
五、克隆节点
当前节点.cloneNode([true]):默认为false只克隆当前节点，不包括内容，true克隆当前节点，包内容；
六、追加节点
父节点.appendchild(子节点)：将子节点追加到父节点中孩子的末尾；
七、常见节点及属性
元素节点 nodeName 元素名称 nodeType类型 1 nodeValue值 null
color属性节点 属性名 2 属性值
哈哈-文本节点 #text 3 文本内容(纯文本)
设置或访问元素对象的属性(自定义属性)
1. 元素自己支持的属性
对象.属性 对象["属性"]
2.元素自己不支持的属性(自定义属性)
获取属性：对象.getAttribute("属性名")；
设置属性：对象.setAttribute("属性名","属性值")；
删除属性：对象.removeAttribute("属性名"，"属性值")；
outerHtml/innerHtml/innerText
给指定标签里加文本 将结果放在指定的位置；
对象.innerHtml = "<b></b>"解析超文本；
对象.innerText = "<b></b>"解析文本；
对象.outerHtml = ""解析文本；
outHTML:获取当前元素及内容；
console.log(对象.innerHTML):设置或获取当前元素的内容(可以解析超文本)
获取所有的子节点，去除空白文本子节点
输出是具体几个数字 { childNodes:可以获取当前节点中所有的文本子节点和元素子节点； children: 可以获取当前节点所有的元素子节点； }
高级选取
parentNode:父节点；
firstchild:第一个子节点；
firstElementChild:第一个元素子节点；
lastchild:最后一个子节点；
lastElementchild:最后一个元素子节点；
previoussibling:上一个兄弟节点；
previousElementsibling:上一个兄弟节点；
nextsibling:下一个兄弟节点；
nextElementsibling: 下一个元素兄弟节点；
偏移量 offsetwidth /offsetHeight
offsetwidth:width+border+padding获取当前对象相对宽度；
非行内样式的兼容
标准:getcomputedstyle(节点对象,value)标准浏览器获取对象的非行内样式；
节点对象currentstyle.属性 IE9以下获取对象的非行内样式；
offsetleft/offsetTop
offsetleft:
- 如果没有定位，则当前对象相对于body(页面)左边的距离(left);
- 如果有定位，则当前对象，相对于父对象左边的距离offsetTop;
- insertBefore:在指定节点前插入 inserBefore(新节点，旧节点) 指定节点前；
接下来进入 Event事件=>
