目前可以将BOM视为一个代表浏览器各种特性的依赖浏览器的对象，包括浏览器的按钮，URL地址栏，标题栏，浏览器窗口控件以及页面的各部分。
DOM仅处理浏览器窗口或页面的内容（即HTML文档）中的内容，于是任何浏览器都可以使用完全相同的代码来访问和操作文档的内容。
BOM可以访问浏览器以及文档的某些部门，而DOM可以访问文档中的任何元素，但仅限于文档本身，DOM的伟大之处在于它与浏览器和平台无关。
区别：
1.DOM仅包含Web页面的文档，而BOM提供了浏览器各个领域的脚本编程访问，包括按钮，标题栏以及页面的某些部门。
2.BOM专用于某个浏览器。浏览器是不能标准化的，因为它们必须提供有竞争力的特性。因此，需要另一组属性，方法甚至对象，才能使用JavaScript操作它们。
下面进入正题：
DOM核心对象
DOM提供了一组具体的对象，属性和方法，通过JavaScript可以访问它们，以便浏览DOM的树型结构。
1.基本的DOM对象
Node 。文档中的每个节点都有自己的Node对象
NodeList 。这是Node对象的列表
NameNodeMap 。允许按名称（而不是索引）访问所有Node对象
要表示文档，仅有这三个对象是不够的。实际上，有不同的对象表示树中不同类型的节点。下面介绍另外的一些对象
2.高级的DOM对象
Document 。文档的根节点
DocumentType 。XML文档的DTD或模式类型
DocumentFragment 。文档部分的临时存储空间
EntityReference 。XML文档中的实体引用
ELement 。文档中的一个元素
Attr 。文档中元素的一个属性
ProcessingInstruction 。处理指令
Comment 。XML文档或HTML文档中的注释
Text 。构成元素子节点的纯文本
CDATASection 。XML文档中的CDATA部分
Entity 。DTD中未解析的实体
Notation 。DTD中声明的记号
这些对象都继承了Node对象的所有属性和方法，还包含自己的一些方法和属性。下面只讨论Node，ELement和Document对象
(1).Document对象及其方法
只有document对象的方法可以在页面上查找，创建和删除元素
查找元素：
document对象的方法：
1.getElementById（idvalue）返回该元素的引用（节点）
2.getElementsByTagName（tagName）返回一组元素的引用（节点列表）
3.querySelector（cssSelector）返回与给定CSS选择器匹配的第一个元素的引用（节点）
4.querySelectorAll（cssSelector）返回与给定CSS选择器匹配的一组元素的引用（节点列表）
//document对象的查找方法 var id = document.getElementById(byid) document.write(id) var tagName = document.getElementsByTagName("td"), length = tagName.length console.log(typeof(tagName)) for(var i=0;i<length;i++){ document.write(tagName[i]) } var query = document.querySelector("span") query.style.color = "red" var queryAll = document.querySelectorAll("div") console.log(queryAll)
创建元素和文本：
document对象的方法：
1.createElement（elementName） 。使用指定的标记名创建一个元素节点，返回所创建的元素
2.createTextNode（text） 。创建并返回所包含提供文本的文本节点
document对象的属性：（获取文档的根元素）
documentElement 。返回对文档最外层元素的引用（即根元素，如<html/>）
//创建节点 var newTxt = document.createTextNode("hello world!"), newElem = document.createElement("h1") newElem.appendChild(newTxt) document.body.appendChild(newElem)
//显示根节点 var container = document.documentElement; document.write(container.tagName)
(2).Element对象及其方法
element对象的方法：
1.getAttribute() 。获取属性的值
2.setAttribute() 。设置属性的值
3.removeAttribute() 。从元素中删除指定的属性及其值
element的属性：
tagName 。获取元素的标记名称 （返回string类型）
//设置属性 var h = document.getElementById("h") h.setAttribute("align","center") alert(h.getAttribute("align")) var timer = setTimeout(function(){ h.removeAttribute("align") },2000)
(3).Node对象及其方法：
属性：（导航DOM）
1.firstChild 。返回元素的第一个子节点
2.lastChild 。返回元素的最后一个子节点
3.previousSibling 。在同级子节点中，返回当前子节点的前一个兄弟节点
4.nextSibling 。在同级子节点中，返回当前子节点的后一个兄弟节点
5.ownerDocument 。返回包含节点的文档的根节点
6.parentNode 。返回树形结构中包含当前节点的元素
7.nodeName 。返回节点的名称
8.nodeType 。返回一个数字，表示节点的类型（元素的节点类型是1，文本节点的类型是3）
9.nodeValue 。以纯文本格式获取或设置节点的值
document.getElementsByTagName("BUTTON")[0].childNodes[0].nodeValue;
现代浏览器的DOM和IE旧版本浏览器的DOM的区别：
现代浏览器的DOM把DOM树中的所有东西都看做节点，包括元素之间的空白。而IE旧版本会去除不必要的空白。
//区别：对空白内容的判断 //元素的节点类型为1，文本节点的类型为3 if(h1Element.nextSlibing.nodeType ==1){ pElement = h1Element.nextSlibing; }else{ pElement = h1Element.nextSlibing.nextSlibing; }
方法：（添加和删除节点）
1.appendChlid（newNode） 。将一个新node对象添加到子节点列表的末尾，该方法返回追加的节点
2.cloneNode（cloneChildren） 。返回当前节点的一个副本；该方法的参数是一个布尔值（true：克隆当前节点及其子节点 false：只克隆当前节点）
3.hasChildNodes（） 。判断是否有子节点；该方法返回布尔值
4.insertBefore（NewNode，referenceNode）。在referenceNode指定的节点前，插入一个node对象，返回新插入的节点
5.removeChild（childNode） 。从node对象的子节点列表中，删除一个子节点，并返回删除的子节点
//创建节点 var newTxt = document.createTextNode("hello world!"), newElem = document.createElement("h1") newElem.appendChild(newTxt) document.body.appendChild(newElem)
操作DOM
1.使用style属性：
style属性名与在css样式表中的名词略有不同：
//将连字符去掉，后的第一个字母改成大写 div.style.background-color = "gray"; //wrong div.style.backgroundColor = "gray";//correct
2.修改class属性：
element.className = NewClassName；
3.定位和移动：
div.style.position = "absolute";
div.style.lef = "100px";
4.实例
在开始实例之前先介绍HTML元素的两个属性：offsetTop（返回元素相对于父元素的上偏移量）和offsetLeft（返回元素相对于父元素的左偏移量）
//创建动画 var switchdir = false; function doAnimation(){ var divAdvert = document.getElementById("divAdvert") var currentLeft = divAdvert.offsetLeft var newLocation if(!switchdir){ newLocation = currentLeft +2 if(currentLeft >= 400){ switchdir = true } }else{ newLocation = currentLeft - 2 if(currentLeft <= 0){ switchdir = false } } divAdvert.style.left = newLocation +"px" } setInterval(doAnimation,10)
