DocumentObjectModel的历史可以追溯至1990年代后期微软与Netscape的"浏览器大战"，双方为了在Javascript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的Dhtml格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
DOM概念-documentobjectmodel：文档对象模型
操作文档的一套方法，document是一个对象，是dom的顶级对象，属于window的一个对象，并且可以说是最出色的一个儿子。
DOM元素的获取：
document.getElementById("id名字")//根据ID名字来获取标签；
document.getElementByTagName("标签名")//根据标签名来获取；
document.getElementByClassName("类名")//根据类名来获取；
document.getElementByName("name的属性值")//根据name属性来获取；
document.querySelector(css选择器)//根据CSS选择器来获取；
document.querySelectorAll(css选择器)//根据CSS选择器来获取所有满足条件的元素；
//3、5、6在IE中不兼容
DOM元素的操作：
内容操作：
元素.innerText//文本内容操作；
元素.innerHTML//带标签的内容操作；
元素.value//表单元素的内容操作（input类型）
元素.outText//包含自身的标签；
元素.outHTML//包含自身的标签；
属性操作：
元素.getAttribute("属性名")//获取属性的值，只能获取不能修改
元素.setAttribute("属性名","属性值")//修改属性的值，相当于重新设置
元素.removeAttribute("属性名")//删除属性
//也可以直接通过"."来操作元素.属性="";//（通常不在标签上显示）
类名、样式操作：
元素.style.css(属性名)="值"；//设置样式；
元素.className="值";//设置class类名；
元素.className="";//清空class类名；
DOM节点：
概念：组成HTML页面的所有内容，都叫做节点；
组成：//（元素、文本、注释、属性等节点）
元素节点：（主要介绍）
元素节点的获取：
元素.children//获取所有的子元素；
元素.firstElementChild//获取第一个子元素；
元素.lastElementChild//获取最后一个子元素；
元素.previousElementSibling//获取上一个兄弟元素；
元素.nextElementSibling//获取下一个兄弟元素；
元素.parentElement//获取父元素；
元素节点的操作：
vartd=document.createElement('td');//创建标签节点
插入节点：
父元素.appendChild(子元素)//在父元素最后追加；
父元素.insertBefore(新元素，旧元素)//将新的元素插入到指定的子元素前面；
删除节点：父元素.remove(子元素)；
复制节点：父元素.cloneNode(true)；
//有true就会连标签里面的内容也复制出来，没有true只会复制空标签；
替换节点：父元素.replaceChild(新元素，旧元素)//使用新的子元素替换掉旧的元素；
获取元素节点的样式:
window.getComputedStyle(元素)
元素.currentStyle(IE兼容)
封装之后：
functiongetStyle(ele,attr){
if(window.getComputedStyle){
returnwindow.getComputedStyle(ele)[attr]
}else{
returnele.currentStyle[attr]
}
}
vardiv=document.getElementsByTagName("div")[0];
varw=getStyle(div,"width");
console.log(w);
获取元素位置：
元素.offsetLeft元素.offsetTop//这个就是于offsetParent的距离
元素.offsetParent//获取到定位是参考的那个设置过定位的父元素；
获取节点：
元素.childNodes//获取所有子节点；
元素.parentNode//获取父节点；
元素.firstChild//获取第一个子节点；
元素.lastChild//获取最后一个子节点；
元素.previousSibling//获取上一个兄弟节点；
元素.nextSibling//获取下一个兄弟节点；
节点属性：
节点属性nodeType节点类型元素节点1文本节点3注释节点8
nodeName节点名称元素节点大写的标签名文本节点#text注释节点#comment
nodeValue节点的值元素节点null文本节点文本内容注释节点注释的内容
获取/设置滚动过的距离
有文档声明的时候document.documentElement.scrollTopdocument.documentElement.scrollLeft没有文档声明的时候document.body.scrollTopdocument.body.scrollLeft
//做一个回到顶部的效果
获取浏览器大小
document.documentElement.clientWidthdocument.documentElement.clientHeight//不包含滚动条的尺寸
获取html基本结构
document.documentElement是html标签document.bodybody标签document.headhead标签document.titletitle标签
文档对象模型(DocumentObjectModel，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
