BOM
2.1BOM介绍
BOM 浏览器对象模型 这里面有很多浏览器相关的方法
2.2window对象
2.2.1 window的系统对话框
-
alert(提示内容)
-
console.log()
-
confirm(提示信息) 带确定和取消按钮 点击确定返回true 点击取消返回false
-
prompt(提示信息,输入框中的默认值) 点击确定返回输入框中的值 点击取消返回null
2.2.2 window的open和close
-
window.open
-
语法:window.open(新的网址地址,打开方式(self,blank),设置新页面的样式)
-
作用:打开一个新网址
<button>打开一个新的页面</button> <button>关闭当前页面</button> <!-- 如果是行间引入 不能省略window对象 因为它的运行环境不是一个全局作用域 --> <button οnclick="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() }
-
2.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("尺寸发生了改变") }
-
2.3 location对象
-
localtion对象 主要是一些网址的信息
-
==href 提供的是浏览器地址栏中的全部内容==
-
hash 哈希 提供是锚点和网站参数
-
host 获取的浏览器地址中的域名和端口号
-
hostname 获取的是浏览器地址中的域名
-
origin 获取的是浏览器地址中网络协议和域名及端口号
-
pathname 获取的浏览器中运行的文件地址和参数
-
protocol网络协议
-
port 端口号
-
-
==location对象中的方法==
-
location.href = 新页面地址 跳转一个新页面
-
location.reload() 刷新本页面
-
2.4 navigator对象
console.log(navigator.userAgent);//可以获取到运行系统信息
2.5 history对象
-
history.forward() 前进页面
-
history.back() 后退一个页面
-
history.go()
-
1 前进
-
-1 后退
-
==注意:前进或者后退页面一定要先形成历史关系==
2.6==BOM的三大系列属性==
2.6.1client系列
-
元素.clientWidth:获取元素的可视宽度 content+padding
-
元素.clientHeight:获取元素的可视高度
-
元素.clientLeft和元素.clientTop:获取元素的左或上边框宽度
2.6.2offset系列
-
元素.offsetWidth 获取元素的占位宽度 content+padding+border
-
元素.offsetHeight 获取元素的占位高度
-
元素.offsetLeft 可以获取元素到最近定位父元素的左侧距离 如果没有最近定位父元素,则是相当于body
-
元素.offsetTo p可以获取元素到最近定位父元素的上侧距离 如果没有最近定位父元素,则是相当于body
2.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>
-
3.事件对象
3.1什么是事件对象
-
每一个事件 都会拥有一个对象,这个对象用来纪律该事件的重要信息
-
==注意==:事件对象只能存在于事件处理函数中 超过这个范围就不能使用了
3.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); }
3.3事件对象中的属性
-
clientX/clientY:这两个属性表示鼠标的位置