BOM和DOM详细知识点总结

Browser Object Model 浏览器对象模型，js封装好的用来操作浏览器的一个对象模型，BOM的顶级对象是window。

window.innerWidth 获取浏览器内容宽度

window.innerHeight 获取浏览器内容高度

location：地址栏

location对象里有很多属性，这些属性想要明白意思就直接在控制台打印就行

location.reload() 刷新，参数传true是强制刷新（清除缓存）

location.replace() replace是替换的意思，页面跳转

navigator 这个对象里可以获取浏览器相关的信息，但是以前的各种属性已经在逐渐被抛弃了

navigator.userAgent 返回浏览器信息（可用此属性判断当前浏览器）

判断当前浏览器类型的代码：这段代码拿去用就行

history（页面必须有历史纪录才能使用这些方法）

screen: 屏幕，用的很少

超时定时器

setTimeout 打开定时器

clearTimeout 清除定时器

间隔定时器

setInterval 打开定时器

clearInterval 清除定时器

不管是哪种定时器都可以用一个变量接收定时器的id，清除的时候用id来清除

window.onload 页面加载完成

window.onscroll 页面滚动

var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; //兼容

window.scrollTo(x, y) // 设置滚动条位置，x代表横坐标，y代表纵坐标

window.onresize 窗口大小改变

Document Object Model 文档对象模型，定义了表示和修改文档所需的对象、行为和属性，以及这些对象之间的关系

DOM是ECMAScript来操作页面元素的一种工具

DOM的核心对象是document

页面的所有元素可以看作是一颗倒挂的树，标签、文字、属性甚至包括注释都在这棵树上

document.getElementById 通过id获取到元素对象

document.getElementsByClassName 通过class获取元素集合，得到的是一个类数组对象，有length属性，可以通过索引取到某一个对象

document.getElementsByTagName 通过标签名获取元素集合，得到的是一个类数组对象，有length属性，可以通过索引取到某一个对象

但是现在因为对浏览器的兼容需求变小了（IE基本不用管了），所以前三种用的很少，用后面两种

document.querySelector 这个方法参数传选择器，取到的是第0个满足选择器的对象，就算有多个，仍然只取第0个对象

document.querySelectorAll 这个方法参数传选择器，取到所有满足选择器的元素，得到一个类数组对象，有length属性，可以通过索引取到某一个对象

children 获取所有子元素（用的最多）

parentNode 获取父级元素（用的最多）

firstElementChild 获取当前元素节点的第一个子元素

lastElementChild 获取当前元素节点的最后一个子元素

previousElementSibling 获取上一个兄弟元素

nextElementSibling 获取下一个兄弟元素

比如：img的src，a标签的href。。。这些属性可以直接用 . 来获取也可以赋值修改

getAttribute( ) 获取

setAttribute( ) 设置，两个参数，属性名和属性值，注意：设置的任意类型的属性值最终都会变成字符串

removeAttribute( ) 移除

className 这个获取或者设置的是整个class的字符串

classList （新增属性，低版本浏览器用不了）

获取到的是一个伪数组，帮我们把元素的多个class切开

add() 可以添加class

remove() 可以移除某个class

var oDiv = document.createElement(“div”) 创建一个div

document.body.appendChild(oDiv) 把div插入到body最后

parentNode.insertBefore(newNode, targetNode); //将newNode插入targetNode之前

替换

parentNode.replaceChild(newNode, targetNode); //使用newNode替换targetNode

克隆（复制）

clonedNode = Node.cloneNode(boolean) // 只有一个参数，传入一个布尔值，true表示深客隆，复制该节点下的所有子节点；false表示浅克隆，只复制该节点，不会复制里面的内容

parentNode.removeChild(childNode); // 移除目标节点

node.parentNode.removeChild(node); //在不清楚父节点的情况下使用

childNode.remove() // IE8-不支持

DOM树上的所有东西都是节点，包括换行，注释，属性。。。

元素也是节点中的一种，称之为元素节点，也叫DOM元素，也叫DOM对象

Node.nodeName 获取节点的名称，#text文本节点，#comment注释节点，元素可以得到大写的标签名

如果你已经确定这是一个元素节点了，可以使用tagName属性获取大写标签名

因为body在页面上是唯一的，所以DOM提供了一种特殊获取方式，document.body

像这样的还有 document.title 也可以直接获取或者设置title的内容

而不用自己取查找一遍

当然，你也可以使用 document.querySelector(‘body’) 来获取，但是没有必要

box.style.width、box.style.height可以获取和设置内联样式

getStyle(box,“width”) 可以获取最终生效得样式值（无论是行内内部还是外部）

box.offsetWidth、box.offsetHeight 获取占位尺寸，包含 width、padding以及border

box.clientWidth、box.clientHeight 获取内部大小，包含width和padding

box.scrollWidth、box.scrollHeight 获取滚动内容宽高，如果box没有滚动条，跟clientHeight是一样的，有的话就是整个所有内容得高度，宽度也一样

后三种都是只读的，可以实时获取尺寸，但是不能设置

box.offsetLeft、box.offsetTop 获取元素当前相对于offsetParent父元素的位置

offsetParent指的是box向上查找最近的有定位属性祖先元素，如果没有，则得到body

box.clientLeft、box.clientTop 获取左边框和上边框的宽度，获取的是元素加边框前后的偏移量，也就是左边框和上边框的宽度

box.scrollLeft、box.scrollTop 获取滚动内容上方的位置(就是隐藏的内容的高度)获取滚动内容左方的位置，一般配合onscroll事件来使用

附：box.scrollTop = box.scrollHeight - box.clientHeight

让滚动条在最底部的公式