初识DOM
DOM是Document Object Model，即是文档对象模型。
文档对象模型有三种节点关系。分别是父节点，兄弟节点，子孙节点。
DOM节点类型
元素节点 Node.ELEMENT_NODE(1)
属性节点 Node.ATTRIBUTE_NODE(2)
文本节点 Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点 Node.ENTITY_NODE(6)
处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点 Node.COMMENT_NODE(8)
文档节点 Node.DOCUMENT_NODE(9)
文档类型节点 Node.DOCUMENT_TYPE_NODE(10)
文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 Node.NOTATION_NODE(12)
nodeType
nodeType查看节点类型
Object.nodeName查看节点属性名
nodeValue：查看值
Object.childNodes：获得元素下的所有子节点集合：
children：获得元素的子节点集合：
Object.attributes查看节点的属性，比如说ID
parentNode
object.parentNode
nextElementSibling和previousElementSibling
同级
lastElementChild和firstElementChild
子元素节点
offsetParent
定位
/适用条件就是 父级有定位，本级也要有定位，并且设置可width与height/
/指向最近的有定位属性的祖先节点，如果都没有，则指向body/
offsetLeft和offsetLeftTop
offsetLeft·：当前元素（子元素）的外边框到定位父元素的内边框的距离
offsetTop
加边框的绝对位置
parseInt(getComputedStyle(elem).borderLeftWidth)//需要添加上边框最后再减去；
getBoundingClientRect
获取某个元素相对于视窗的位置集合。返回值是一个对象
元素的属性操作
获取元素的属性。获取行间属性，无法获取自定义属性
elem.getAttribute('key');
设置元素的属性
elem.setAttribute('key'，'value');//是可以凭空进行设置的
删除元素的行间属性
elem.removeAttribute('key');
img.getAttribute('src';//这里输出的值就是可预测的
元素的尺寸
获取元素的宽高，文字溢出不会被计算，都不支持padding值
elem.clientWidth（获取某个元素的宽高）：不计算边框，加上padding
elem.offsetHeight（获取某个元素的宽高）：计算边框，加上padding
document.documentElement？指的是html
document.documentElement.clientWidth//获取可视区域的宽
document.documentElement.clientHeight//获取可视区域的高
使得一个不确定宽高的元素居中
div.style.left = (document.documentElement.clientWidth - div.offsetLeft)/2 - parseInt(getComputedStyle(div).width)/2+'px';
元素的操作
document.createElement('标签的名字'); //创建元素
parentNode.appendChild(childNode);//向元素末尾添加一个子元素
parentNode.inserBefore(newElement，nowElement)//向nowElement元素之前添加newElement元素。如果第二个元素为假，那会添加到元素的末位
elem.removeChild(DeleteChildElement)；//删除元素。如果元素并不存在，那么将会报错。
elem.remove();//把这个元素给删除掉了
elemParent.replaceChild(替换成什么,被替换)；//是替换，并没有分身。
element.cloneNode(Boolean);//克隆。克隆之后还没有添加到body上面去.如果Boolean是false，不会克隆子元素，事件不会被克隆。
appendChild/insertBefore/replaceChild在操作一个已有的元素时， 是将已有的元素移动，而不是复制一份进行操作。
表格的操作
//get是table的id
/*获取头部*/
get.tHead.style.backgroundColor = 'yellow';
/*获取底部*/
get.tFoot.style.backgroundColor = 'blue';
/*tBodies的内容是一个集合，可有很多tbody*/
get.tBodies[1].style.background = 'red';
/*获取tr.tr表示的是一行，rows表示的是一行.rows是一个复数*/
get.rows[1].style.backgroundColor = 'green';
/*cells[]单元格*/
get.rows[2].cells[2].style.background = 'pink';
