BOM , DOM

BOM

BOM是三个单词的首拼Browser Object Model 即浏览器对象模型，提供了操作浏览器的标准。

window,对于浏览器操作的顶级对象。定义在全局中的变量和函数其实都是window的属性和方法，只是在使用时候将window省略了

navigator记录浏览器信息 : appName浏览器名称，appCodeName浏览器内核名称，appVersion浏览器版本，userAgent用户信息。

history操作历史记录：back（）后退一个页面，forward（）前进一个页面，go（）前进给正数，后退给负数，数字是几就前进或者后退几个页面。

location操作地址栏：href获取/设置当前完整地址，search获取/设置当前地址栏中的数据部分，hash获取/设置地址栏中的锚点，assign（）跳转，能后退。replace（）跳转，不能后退。reload（）刷新。

浏览器大小：innerWidth。innerHeight。两个都包含滚动条大小。

弹出层：alert（）。confirm（）。prompt（）。他们都属于window的方法。

事件：window.onload当浏览器中所有资源都加载完成才触发。window.onscroll当浏览器的滚动条滚动就会触发。window.onresize当浏览器窗口大小改变就会触发的事件。

定时器：setlnterval（）每隔一段时间就执行函数一次，不停的执行。setTimeout（）延迟一段时间执行函数一次，就执行一次。

DOM

概念：document，object，model。文档对象模型，操作html文档的标准

 获取html基本结构：获取html标签document.documentElement。获取body标签document.body。获取head标签document.head。获取网页标题document.title。设置标题document.title=值。

获取标签：document.querySelector()获取到匹配css的第一个元素。document.querySelectorAll（）获取到匹配css的所有元素。          document.getElementByld（"标签id名"）通过标签的ld名来获取标签。document.getElementsByTagName（"标签名"）通过标签明获取标签。document.getElementsByClassName（"标签类名"）通过类名获取标签。document.getElementsByName（"标签的name属性的值"）通过标签的name属性获取标签。                                 

上述除了id可以准确获取到元素，其他的都只能获取到元素的集合（类数组）

父.childern获取所有子标签。父.firstElementChild获取第一个子标签、父.lastElementChild获取最后一个子标签。子.parentElement获取父标签。                      兄弟.previousElementSibling获取上一个兄弟标签。兄弟.nextElementSibling获取下一个兄弟标签

内容操作：标签.innerText  获取标签中文本内容，标签.innerText=值  设置标签文本内容。    标签.innerHTML  获取标签中带标签的内容，标签.innerHTML=值   设置标签中带标签的内容，标签可以解析。标签.valu  获取表单元素的内容，标签.valu=值   设置表单元素的内容。

样式设置/获取：标签.style.css键=值。css键如果是带有连字符的，可以使用小驼峰写法，或使用中括号写法。css值一定是个字符串，一定是行内元素。

获取：window.getComputedStyle（标签），返回所有css键值对组成的对象

类名设置/获取：标签.className=值。标签.className

属性操作：标签.setAttribute（键，值）设置属性。

标签.getAttribute（键）获取属性。   

标签.removeAttribute（键）删除属性。

获取到的标签都是对象，使用console.dir（）可以输出对象的样子，既然是对象，就可以像对象一样进行属性操作。

节点操作：创建节点 document.createElement（标签名）。

插入节点，给父的末尾追加一个子标签    父.appendChild（子）。给某个子前面添加一个新的子  父.insertBefore（新的子，旧的子）。

替换节点：  父.repalceChild（新的子，旧的子）。

复制节点：  节点.cloneNode（true）。

删除节点 ： 父.removeChild（子）。

获取标签位置 ： 标签.offsetLeft ，标签.offsetTop。

获取标签大小：  包含边框的，  标签.offsetWidth，标签.offsetHeight。

不包含边框的  ，标签.clientWidth，标签.clientHeight。

窗口大小：包含滚动条的大小:window.innerWidth , window.innerHeight。

不包含滚动条大小：document.documentElement.clientWidth，document.documentElement.clientHeight。

获取body大小：document.body.clientWidth，document.body.clientHeight

滚动过的距离：有文档声明：document.documentElement.scrollTop , document.documentElement.scrollLeft。

没有文档声明：document.body.scrollTop，document.body.scrollLeft。

兼容写法：var t =document.documentElement.scrollTop || documentbody.scrollLeft。

document.documentElement.scrollTop=document.body.scrollTop=值

短路运算：利用&&和||根据判断将两个数据选择一个赋值给变量