1.BOM
1.1BOM介绍
BOM 浏览器对象模型 这里面有很多浏览器相关的方法
1.2window对象
1.2.1 window的系统对话框
-
alert(提示内容)
-
console.log()
-
confirm(提示信息) 带确定和取消按钮 点击确定返回true 点击取消返回false
-
prompt(提示信息,输入框中的默认值) 点击确定返回输入框中的值 点击取消返回null
1.2.2 window的open和close
-
window.open
-
语法:window.open(新的网址地址,打开方式(self,blank),设置新页面的样式)
-
作用:打开一个新网址
-
<button>打开一个新的页面</button>
<button>关闭当前页面</button>
<!-- 如果是行间引入 不能省略window对象 因为它的运行环境不是一个全局作用域 -->
<button onclick="window.open('https://www.jd.com')">打开京东页面</button>
<script>
var btn = document.querySelector("button");
// window.open(新的网址地址,打开方式(_self,_blank),设置新页面的样式)
btn.onclick = function () {
// window可以省略
window.open("https://www.baidu.com", "_blank", "width=500,height=500")
}
</script>
- window.close
-
作用:关闭当前页面
-
var btn1 = document.querySelectorAll("button")[1];
// window.close() 关闭当前页面
btn1.onclick = function () {
// window可以省略
window.close()
}
1.2.3 window的事件
-
window.onload
-
作用: window.onload 确保标签和资源都加载成功之后再加载window.onload里面的内容
-
<script>
/*如果script标签放在结构标签前面 会导致在js中拿不到标签 window.onload可以解决这个问题
window.onload 确保标签和资源都加载成功之后再加载window.onload里面的内容
*/
window.onload = function () {
var oDiv = document.getElementsByTagName("div")[0];
console.log(oDiv);// <div>123</div> 出现undefined的原因是没有找到div标签
}
</script>
- window.onscroll
-
作用:当页面或者元素发生滚动时触发事件
-
window.onscroll = function(){
console.log("内容发生了改变")
}
- window.onresize
-
作用:当窗口的可视区域发生改变触发
-
window.onresize = function(){
console.log("尺寸发生了改变")
}
1.3 location对象
-
localtion对象 主要是一些网址的信息
-
href 提供的是浏览器地址栏中的全部内容
-
hash 哈希 提供是锚点和网站参数
-
host 获取的浏览器地址中的域名和端口号
-
hostname 获取的是浏览器地址中的域名
-
origin 获取的是浏览器地址中网络协议和域名及端口号
-
pathname 获取的浏览器中运行的文件地址和参数
-
protocol网络协议
-
port 端口号
-
-
location对象中的方法
-
location.href = 新页面地址 跳转一个新页面
-
location.reload() 刷新本页面
-
1.4 navigator对象
console.log(navigator.userAgent);//可以获取到运行系统信息
1.5 history对象
-
history.forward() 前进页面
-
history.back() 后退一个页面
-
history.go()
-
1 前进
-
-1 后退
-
注意:前进或者后退页面一定要先形成历史关系
1.6BOM的三大系列属性
2.6.1client系列
-
元素.clientWidth:获取元素的可视宽度 content+padding
-
元素.clientHeight:获取元素的可视高度
-
元素.clientLeft和元素.clientTop:获取元素的左或上边框宽度
1.6.2offset系列
-
元素.offsetWidth 获取元素的占位宽度 content+padding+border
-
元素.offsetHeight 获取元素的占位高度
-
元素.offsetLeft 可以获取元素到最近定位父元素的左侧距离 如果没有最近定位父元素,则是相当于body
-
元素.offsetTo p可以获取元素到最近定位父元素的上侧距离 如果没有最近定位父元素,则是相当于body
1.6.3scroll系列
-
元素.scrollWidth 可以获取到元素的内容宽度
-
元素.scrollHeight 可以获取到元素的内容高度
-
元素.scrollLeft 可以获取元素内容被卷去的宽度
-
元素.scrollTop 可以获取元素内容被卷去的高度
-
注意 scrollTop和scrollLeft也可以设置具体被卷起的高度和宽度
-
2.6.4 页面的可视宽/占位宽/卷起的高宽
-
document.documentElement 根标签html
-
document.body body标签
-
兼容问题
-
document.documentElement存在兼容问题 IE6和5无法获取client系列和scroll系列的值
-
页面卷起高度兼容 document.documentElement.scrollTop || document.body.scrollTop
-
<script>
/*
document.documentElement html根标签
document.body body区域标签
*/
// 1.获取可视宽高 content+padding
console.log(document.documentElement.clientWidth) //IE6 5是无法获取值
console.log(document.documentElement.clientHeight)
console.log(document.body.clientWidth); // 不存在兼容问题
console.log(document.body.clientHeight);
// 2.获取占位宽高 content + padding + border
console.log(document.documentElement.offsetWidth);
console.log(document.documentElement.offsetHeight);
// 3.卷起的高度和宽度
window.onscroll = function () {
// 标准浏览器和Ie8 7 document.document.scrollTop有效
console.log(document.documentElement.scrollTop); // IE6和5无法获取
// ie 6和5 用doucment.body.scrollTop有效
console.log(document.body.scrollTop);
// 兼容 ||
var a = document.documentElement.scrollTop || document.body.scrollTop
console.log(a);
}
</script>
2.事件对象
2.1什么是事件对象
-
每一个事件 都会拥有一个对象,这个对象用来纪律该事件的重要信息
-
注意:事件对象只能存在于事件处理函数中 超过这个范围就不能使用了
2.2如何获取事件对象
-
标准浏览器和IE浏览器:window.event
-
火狐低版本浏览器:将事件处理函数中的第一个参数作为事件对象
document.documentElement.onclick = function(eve){
console.log(a);//如果是老版本获取浏览器 a就是事件对象
console.log(window.event);//标准浏览器和IE低版本浏览器的语法
var ev = window.event || eve;//兼容写法
console.log(ev);
}