一、DOM/BOM基本操作
这一部分都是实战用的，笔试面试一般不考，
脚本化就是操作的意思
1、查看滚动条的滚动距离
1 window.pageXOffset横向/pageYOffset纵向滚动条
IE8及IE8以下不兼容（IE9部分兼容）IE9以上能用
例：滚动条往下滚动了400px，求浏览器最顶端到滚动条滚动的位置的像素
答案 400px+首屏像素（此时这个屏幕的底端距离整个网页的最顶端也是这样算）
2 IE8 及 IE8 以下的使用方法
1）document.body.scrollLeft/scrollTop——求横向距离和纵向距离
2）document. documentElement.scrollLeft/scrollTop
上面两个兼容性比较混乱，其中一个有值，另外一个的值一定是 0。这两个最好的用法是取两个值相加，因为不可能存在两个同时有值
如 document.body.scrollLeft + document. documentElement.scrollLeft
3 封装兼容性方法（哪个浏览器都好用），求滚动轮滚动距离getScrollOffset（）
例：Offset是尺寸的意思（可以封装一个代码库，放在js文件里面）
<script>
function getScrollOffset() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
return {
x: document.body.scrollLeft + document.documentElement.scrollLeft,
y: document.body.scrollTop + document.documentElement.scrollTop
}
}
}
</script>
2、查看视口的尺寸
可视区窗口就是编写的html文档可以看到的部分，不含菜单栏、地址栏、控制台
1、window.innerWidth/innerHeight可视区域的宽高（加上滚动条宽度/高度）
IE8以及IE8以下不兼容
w3c标准方法
例：求可视区窗口的尺寸
<script>
function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
if (document.compatMode == "BackCompat") {
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
</script>
如果窗口放大页面了，页面的尺寸也会拉伸了，尺寸就会变小
注意渲染模式
- 标准模式：是html5的（在emmet插件下html：5就出来了）
- 怪异/混杂模式：试图去兼容之前的语法，去掉这一行即可开启（向后兼容）
2、document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容
client是客户端的意思
3、document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器
4、封装兼容性方法、返回浏览器视口尺寸getViewportOffset()
例：document.compatMode是用于判断是怪异模式还是标准模式的
封装查看可视窗口的兼容性方法
<script>
function getViewportOffset() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
if (document.compatMode == "BackCompat") {
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}
</script>
3、查看元素的几何尺寸
1、domEle.getBoundingClinetRect()；
//这是es5.0的方法，但是只用了解
<div style="width: 100px;height: 100px;background-color: red;position: absolute;left: 100px;top: 100px;"></div>
<script>
var div = document.getElementsByTagName("div")[0];
</script>
求的是四个边和窗口之间的像素距离，right是右边离document的边有200px，也可以理解成求的是左上点和右下点的位置
2、兼容性很好
3、该方法返回一个对象，对象里面有left，top，right，bottom等属性。left和top代表该元素左上角的X和Y坐标，right和botton代表元素右下角的X和Y坐标
4、height和width属性老版本IE并未实现
在老版本的ie里面，利用右侧边减左侧面解决
5、返回的结果并不是“实时的”
<div style="width: 100px;height: 100px;background-color: red;position: absolute;left: 100px;top: 100px;"></div>
<script>
var div = document.getElementsByTagName("div")[0];
var box = div.getBoundingClientRect();
</script>
4、查看元素的尺寸
dom.offsetWidth,dom.offsetHeight
求的值是包括padding的
例：我们求的是实际内容区的宽高，还是长的看起来的宽高（视觉尺寸）？
dom.offsetWidth和domELe.getBoundingClientRect()；出现的值是一样的，求的值都是padding+content(视觉尺寸），可以被代替.上面是间接的求这个div的宽高
5、查看元素的位置
1、dom.offsetLeft,dom.offsetTop
对于无定位父级的元素，返回相对文档的坐标
对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。（无论是left还是margin-left等都是距离）
例：offsetLeft忽略自身是不是定位元素，求出来的是这个元素距离自己有定位的父级元素的距离，不管距离是margin生成的还是定位生成或者是其他方法（圆形，五角星都是这样）
<div style="width: 300px;height: 300px;border: 2px solid black;position: relative;left: 100px;top: 100px;">
<div class="demo" style="width: 100px;height: 100px;background-color: red;position: absolute;left: 100px;top: 100px;"></div>
</div>
<script>
var div = document.getElementsByClassName("demo")[0];
</script>
position:static;是 position 是默认值，是不定位的写法，是静态的意思
下面这种情况是 margin 塌陷了（因为加了 border 又解决了塌陷的情况）
<div style="width: 300px;height: 300px;border: 2px solid black;margin-left: 100px;margin-top: 100px;">
<div class="demo" style="width: 100px;height: 100px;background-color: red;margin-left: 100px;margin-top: 100px;"></div>
</div>
<script>
var div = document.getElementsByClassName("demo")[0];
</script>
body 有个默认的 margin：8px;存在，横向的，是相加
body 有个默认的 margin：8px;存在，纵向的 body 的 margin 和外面的 div 的 margin重叠了，实现了 margin 塌陷
2、dom.offsetParent
返回最近的有定位的父级，如无，返回body，body.offsetParent返回null
这个方法能求有定位的父级
例：沿用上面的例子，在控制台上面操作
例：加上个relative定位
<div style="width: 300px;height: 300px;border: 2px solid black;margin-left: 100px;margin-top: 100px;position: relative;">
<div class="demo" style="width: 100px;height: 100px;background-color: red;margin-left: 100px;margin-top: 100px;position: absolute;"></div>
</div>
<script>
var div = document.getElementsByClassName("demo")[0];
</script>
作业：求元素相对于文档的坐标，以getElementPosition（）命名
思路：先看有没有有定位的父级，如果有，先求他与有定位的父级的距离，然后把视角换到他有定位的父级上，看他这个有定位的父级上还有没有有定位的父级，一段一段的加，一直加到最后，是一个循环递归的过程
六、让滚动条滚动
1、window上有三个方法scroll()，scrollTo()、两个功能一样，scroll()；累加滚动距离
scroll(x,y),scrollTo(x,y)功能是一样的，里面能填两个参数
scroll(x轴滚动条的距离，y轴滚动条的距离），里面的xy可以填负数
scrollBy(x,y)；是累加滚动距离，填负数就往上滚动
2、三个方法功能类似，用法都是将x，y坐标传入。即实现让滚动轮滚动到当前位置
3、区别：scrollBy（）会在之前的数据基础之上做累加
例子：
利用scrollBy（）快速阅读的功能
scroll会滚到当前距离（某个固定的顶）
不是累加使用，除非移动了滚动条的位置，才会重新计算距离
scrollBy();是累加滚动距离，填负数就往上滚动
scrollBy(0,10);是向下滚动 10 个距离
scrollBy(0,-10);是向上滚动 10 个距离
作业：点完收起，页面回到点展开时候的位置
思路：求滚动条的位置，记录点击展开时候的位置，点收起回到位置，记录是查看getScrollOffset()封装方法，回去是 window.scroll，在执行
例做个自动翻页的阅读（当点击 start 就自动阅读）
上面有个问题：多次点击 start 就会加速，并且停不下来了，按 stop 就只能停止一个加速，并不能使他停止
下面的例子是让多次点击 star 不能加速
所以加个锁 key，stop 以后再把锁打开
对比上一个增加了一个调速的按钮
增加一个 num 变量，通过调整变量来调速
注意不能通过控制 timer来调整速度
也不能通过 100 来调速
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
