JS中的DOM操作：盒子模型属性
DOM:document object model 文档对象模型，提供系列的属性和方法，让我们能在JS中操作页面中的元素
获取元素的属性和方法
方法：
1.document.getElementById([ID])
2.[context].getElementsByTagName([TAG-NAME])
3.[context].getElementsByClassName([CLASS-NAME])
//=>在IE6-8中不兼容第3种方法
4.document.getElementsByName([NAME])
//=>在IE浏览器中只对表单元素的NAME有作用
5.[context].querySeletor([SELECTOR])
6.[context].querySeletorAll([SELECTOR])
//=>这两种方法在IE6-8中不兼容
属性：
document
document.documentElement
document.head
document.body
childNodes 所有子节点
children 所有元素子节点
//=>在IE6-8中会把注释节点当做元素节点获取到
parentNode
firstChild / firstElementChild
lastChild / lastElementChild
previousSibling / previousElementSibling
nextSibling / nextElementSibling
//=>所有带Element的，在IE6-8中不兼容
DOM的增删改操作
创建：
document.creatElement([TAG-NAME])
document.createTextNode([TEXT CONTENT])
还有一种，叫字符串拼接（ES6模板字符串），然后基于innerHTML/innerText存到容器中
增加：
[PARENT].appendChild(ELEMENT) //=>把新增的元素放在父亲里面的末尾
[PARENT].insertBefore([NEW-ELEMENT]，[ELEMENT]) //=>在父亲中，把新增的元素放在某个元素前面
删除：
[ELEMENT].cloneNode(TRUE/FALSE) //=>深克隆 浅克隆
[PARENT].removeChild(ELEMENT) //=>移除父亲中的某个元素
//=>设置自定义属性,写在堆内存里面的, xxx表示某一个属性名或者属性值
[ELEMENT].xxx = xxx
console.log([ELEMENT].xxx);
delete [ELEMENT].xxx;
//=>这种是写在结构上的
[ELEMENT].setAttribute('xxx',xxx)
console.log([ELEMENT].getAttribute('xxx'));
[ELEMENT].removeAttribute('xxx')
获取元素样式和操作元素样式
//=>修改元素样式
[ELEMENT].style.xxx = xxx; //=>修改和设置它的行内样式
[ELEMENT].className = xxx; //=>设置样式类
//=>获取元素样式
console.log([ELEMENT].style.xxx); //=>获取的是当前元素写在行内上的样式，如果有这个样式，但是没有写在行内上，则获取不到
例如： let w = box.style.width
