BOM是英文Browser Object Model的首字母缩写即指"浏览器对象模型"。 它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM 如：获取浏览器信息，操作浏览器.
对象名描述window浏览器窗口对象,主要用于操作浏览器，浏览器中最大的对象,BOM核心对象location地址栏对象 - 提供了对地址栏操作的方法和属性history浏览历史对象，提供了对浏览器历史记录操作的方法和属性screen屏幕对象，获取屏幕的信息navigator浏览器对象，提供了获取浏览器信息的方法和属性document文档对象， - 代表整个网页，DOM的根节点window对象的属性及方法 属性
属性名描述window.innerWidth ws获取当前网页可显示区域宽度问题：ie浏览器有兼容性问题需要使用：document.documentElement.clientWidthwindow.innerHeight hd获取当前网页可显示区域高度问题：ie浏览器有兼容性问题需要使用：document.documentElement.clientHeight方法
方法alert()prompt(输入框提示信息,输入框默认值)confirm(确认框提示的信息)open(待打开的网页,窗口名,打开窗口的外观)close() 关闭当前网页location.reload(); //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新history对象 该对象包含浏览器访问过的url
history.length属性 记录了浏览器的历史窗口数量
方法：
名称作用history.forward()前进，需要后退一下之后，才有前进的方向history.go(num)参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新history.back()后退，加载前一个url。location对象 包含当前url的相关信息，比起history对象更加具体。
该对象的属性：
location.href; //设置或返回完整的url
location.search; //返回url?后面的查询部分(参数)
location.hash; //是一个可读写的字符串，是url的锚部分（从#开始的部分）
页面加载完成后执行 window.onload = function // 当html都加载完成,才执行里面的js 一般是控制资源的获取,必须是加载完成才能获取.就要使用onload
// 当文档加载完成后执行的一些操作 window.onload = function(){ console.log("页面加载完成") }滚动条
//监听滚动条，在滚动条发生变化的适合触发 window.onscroll = function(){ console.log(1) //当页面发生滚动时，打印1 } 一般与获取滚动条位置配合使用，以完成懒加载或者侧边栏等事件 页面滚动条距离顶部的距离 document.documentElement.scrollTop document.body.scrollTop (兼容写法) 页面滚动条距离左边的距离 document.documentElement.scrollLeft document.body.scrollLeft (兼容写法) 应用时考虑兼容一般这样获取 var top = document.documentElement.scrollTop || document.body.scrollTop;DOM是英文Document Object Model的首字母缩写（文档对象模型）
使javascript有能力操作HTML文档（获取HTML标记元素，添加HTML标记元素，删除HTML标记元素等）
而其中的节点则是指各种类型的html标签，在DOM中，文档的层次结构被表示为倒立的树形结构（类似数据结构树）。
节点的关系
根节点：一个HTML文档只有一个根，它就是HTML节点。 子节点：某一个节点（包含）的下级节点。 父节点：（将）某一个节点（包含）的上级节点。 兄弟节点：两个子节点同属于一个父节点。节点的分类
【属性节点（attribute）】，指定是HTML标签的属性 【文本节点（text）】，指定是HTML标签的内容 【空白节点】，在主流浏览器中标签和标签之间的换行会理解为一个空白节点，在IE浏览器中不会DOM的初级选择器
1、id选择器 document.getElementById("id名称") 2、标签选择器 document.getElementsByTagName("标签名称") 3、类选择器 document.getElementsByClassName("标签的class属性名称") 4、name选择器document.getElementsByName("标签name名称")注: 1.不是所有标签都有name值； 2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性
ES5选择器 借鉴了JQ的选择器，选择法与css选择器颇为相似
// 页面有多个符合条件的,默认只获取第一个 var classObj = document.querySelector('.str'); // querySelectorAll() 返回节点集合 // 只有一个符合条件的也返回集合 var class1Obj = document.querySelectorAll('.str');节点的常用内置属性
innerHTML／innerText //返回值是当前元素的内容 id //返回值是当前元素的ID title //获取title的标签值，这个title是从document中获取的 className //返回值是当前元素的class名称 href //返回值是当前的href的值 以上这些常用属性既可以获取，也可以设置节点的非内置属性
setAttribute(name,value)
描述：给指定对象设置属性名和属性值
getAttribute acbt(name)
描述：根据属性名获取属性值
domobj.setAttribute("a","1006") domobj.getAttribute("a");removeAttribute(name)
描述：根据属性名删除自定义属性
节点的公共属性
1、返回第一个子节点 节点.firstElementChild 节点.firstChild（会返回空白节点） 2、返回最后一个子节点 节点.lastChild 节点.lastElementChild 3、返回下一个兄弟节点 节点.nextSibling 节点.nextElementSibling 4、返回上一个兄弟节点 节点.previousElementSibling 节点.previousSibling 5、返回所有子节点（返回时一个组数） children 只返回标签元素节点 childNodes 包括空白 6、父节点 parentNode 7、返回节点名字 nodeName 8、返回节点自身的值 （针对文本节点） nodeValue元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
自定义属性设置：node.setAttribute(名称，值);
父节点.appendChild(子节点); // 向父节点添加最后一个子节点
父节点.insertBefore(newnode,oldnode); // 将newnode放到oldnode的前边,将节点放到指定的位置
父节点.removeChild(子节点);
父节点.remove(); 删除自身
cssDOM
功能：使js可以动态给HTML添加css样式属性 （行内样式） 语法：对象名.style.CSS属性转化为js后的名称 = 属性值; 【CSS属性转化为js后的名称规则】 1、一个单词直接写，如：color，background，margin，width，height 2、多个单词，第二个单词去掉“-”并且“首字母大写”： font-size => fontSize例外:非行内样式的获取
a）在ie浏览器里，我们用到obj的currentStyle方法，来获取。 obj.currentStyle[“height”]。
b)在非ie浏览器里，我们需要用到window自带的方法，getComputedStyle(obj).height;
浏览器各种元素的尺寸获取
offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body(与当前元素最近的经过定位(position不等于static)的父级元素) offsetLeft：表示元素的左外边框至offsetParent元素的左内边框之间的像素距离 offsetTop：表示元素的上外边框至offsetParent元素的上内边框之间的像素距离 clientWidth/clientHeight：元素视窗宽度/高度 clientWidth = width+左右padding clientHeight = height + 上下padding offsetWidth/offsetHeight：元素实际宽度/高度 offsetWidth = width + 左右padding + 左右boder offsetHeiht = height + 上下padding + 上下boder