javascript学习笔记10(BOM)

 BOM：浏览器对象模型，操作浏览器的

在浏览器中有一个顶级对象 window ---> 皇上

页面中的顶级对象 document ---> 大内总管

页面中的所有内容都是属于浏览器的，即window的

顶级对象window是可以省略的

window.document.write("aaaa");
window.write("aaaa");// 报错
document.write("aaaa");

** 一般script标签写在body标签里面的最下面或者body下面

原因是:页面加载的时候,结构还没有解析

有一种办法是写在head标签里面 将script标签里的内容用window.onload = function(){}包裹

定时器 :

开始:  setnInterval(函数,时间:毫秒)  

每过一定时间执行一遍函数,返回值是定时器的id

结束: clearInterval(定时器id);

关闭对应id的定时器

BOM高级

一次性定时器(延时器)

setTimeout(函数,毫秒数)

网页打开过多少毫秒之后触发一次函数

clearTimeout(定时器id);  关闭一次性定时器

location对象

window.location地址栏对象   属于window

location.hash  获取到地址栏上#及后面的内容

location.host  主机名和端口号

location.hostname  主机名

location.port   端口号

location.href  完整的URL

location.protocol  协议

location.search  搜索的内容

location.href = "https://www.baidu.com/";   跳转网站

location.assign("https://www.taobao.com/");   加载新文档

location.replace("https://www.taobao.com/");// 用新的文档代替当前文档  这个跳转没有历史纪录

location.reload()  重新加载当前文档（刷新）

history对象

属于window

window.history.forward();  前进一个历史记录

history.back();      后退一个历史记录

history.go(数字);   负数表示后退,正数代表前进历史记录  

BOM进阶

offset系列

//获取盒子的宽度 高度  左边距 上边距等
.offsetWidth   
.offsetHeight
.offsetLeft
.offsetTop
 /* 
没有脱标：offsetLeft = 父级的margin-left + 父级的border-left + 父级的padding-    left + 自己的margin-left + 自己的border-left
脱标：offsetLeft = 自己的left + 自己的margin-left
 */

scrooll系列

// 内容没填满，获取元素内容区宽度（不含滚动条），内容超出，获取到实际内容区的宽度
document.getElementById("box").scrollWidth.scrollWidth



// 内容没填满，获取元素内容区高度（不含滚动条），内容超出，获取到实际内容区的高度
document.getElementById("box").scrollHeight


// 向上卷曲出去的距离
document.getElementById("box").scrollTop

// 向左卷曲出去的距离
document.getElementById("box").scrollLeft

// 监听滚动事件
document.getElementById("box").onscroll = function() {
    console.log(document.getElementById("box").scrollTop)
}


//获取body元素  用id或者直接document都可以
document.getElementById("body")
document.body

//监听body滚动
        document.getElementsByTagName("body").onscroll = function() {
            console.log(document.documentElement.scrollTop);
        }

// 获取html元素
document.documentElement   //监听body标签高度要用这个选择其高度

client系列

client系列：可视区域
clientWidth：可视区域的宽（不带边框，带内边距），边框内部的宽度
clientHeight：可视区域的高（不带边框，带内边距），边框内部的高度   
// 内容很少，是元素自身的高度（content+padding）
clientTop：上边边框的宽度
clientLeft：左边边框的宽度

// 阻止冒泡

// e.stopPropagation();

// window.event.cancelBubble = true;// IE特有的

// 阻止默认事件这个操作

 return false;

或

e.preventDefault();   //此操作取消事件后会继续执行下面代码