这次给大家带来javascript的bom，使用javascript的bom的注意事项有哪些，下面就是实战案例，一起来看一下。
location对象
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些
导航的功能，它既是window对象的属性，也是document对象的属性。
语法：location.href
功能：返回当前加载页面的完整URL
说明：location.href与window.location.href等价
语法：location.hash
功能：返回URL中的hash(#号后跟零或多个字符),如果不包含则返回空字符串
语法：location.host
功能：返回服务器名称和端口号（如果有）
语法：locationhostname
功能：返回不带端口号的服务器名称。
语法：location.pathname
功能：返回URL中的目录和（或）文件名。
语法：location.port
功能：返回URL中指定的端口号，如果没有，返回空字符串。
语法：location.protocol
功能：返回页面使用的协议
语法：location.search
功能：返回URL的查询字符串。这个字符串以问号开头。
语法：location.replace(url)
功能：重新定向URL
说明：使用location.replace不会再历时记录中生成新纪录。
语法：location.reload()
功能：重新加载当前显示的页面。
说明：
location.reload()有肯从缓冲中加载
location.reload(true)从服务器重新加载
history对象
history对象保存了用户在浏览器中访问页面的历史记录
语法：history.back()
功能：回到历史记录的上一步
说明：相当于使用了history.go(-1)
语法：location.forward()
功能：回到历时记录的下一步
说明：相当于使用了history.go(1)
语法：history.go(-n)
功能：回到历时记录的前n步
语法：history.go(n)
功能：回到历史记录的后n步
navigator对象
useragent：用来识别浏览器名称，版本，引擎以及操作系统等信息的内容。
screen对象
语法：screen.availWidth
功能：返回可用的屏幕宽度
语法：screen.availHeight
功能：返回可用的屏幕高度
location01.html:
Document .box1{ height: 900px; background: #ccc; } .box2{ height: 500px; background-color: #333; } btn.onclick = function () { location.hash = '#box1'; console.log(location.hash); } console.log(location.href); console.log(location.hash); console.log(location.host); console.log(location.hostname); console.log(location.pathname); console.log(location.port); console.log(location.protocol); console.log(location.search);
location02.html:
Document /*setTimeout(function () { //location.href = "https://www.baidu.com"; //window.location = "https://www.baidu.com"; location.replace("https://www.baidu.com"); },1000);*/ document.getElementById('btn').onclick = function () { location.reload(); //location.reload(true); }
history01.html:
立即学习“Java免费学习笔记（深入）”；
Document example_2.html var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); btn1.onclick = function () { //history.back(); history.go(-1); } btn2.onclick = function () { history.forward() //history.go(1); }
navigator.html:
Document function getBrowser() { var explorer = navigator.userAgent.toLowerCase(); var browser = ""; if (explorer.indexOf("msie")>-1) { browser = "IE"; } else if (explorer.indexOf("chrome")>-1){ browser = 'Chrome'; } else { browser = 'asdf'; } return browser; } var msg = "您用的是" +getBrowser()+'浏览器'; console.log(msg);
screen.html:
Document console.log(screen.availWidth); console.log(screen.availHeight); console.log(window.innerWidth); console.log(window.innerHeight);
相信看了这些案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
相关阅读：
ES6 module语法加载 import export
判断登陆是否失效代码
如何利用getBoundingClientRect()来实现div容器滚动固定
实现瀑布流布局的俩种方法
以上就是JavaScript的BOM的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545852.html
微信扫一扫 
支付宝扫一扫 
![Go语言接口与切片：如何识别和操作[]interface{}](https://cdn.chuangxiangniao.com/www/2025/12/176369856569294-1.jpg?imageMogr2/crop/480x300/gravity/center)
