JavaScript中BOM常用操作

这篇具有很好参考价值的文章主要介绍了JavaScript中BOM常用操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

BOM对象

window 对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性;
document 对象,文档对象;
location 对象,浏览器当前URL信息;
navigator 对象,浏览器本身信息;
screen 对象,客户端屏幕信息;
history 对象,浏览器访问历史信息;

Window对象

Window对象:BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过javascript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。 

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
弹框类的方法。前面省略window
alert('提示信息')
confirm("确认信息")
prompt("弹出输入框")
open("url地址",“打开的方式(可以是-self或-black)”,“新窗口的大小”)注:如果url为空,则默认打开一个空白页面,如果打开方式为空,则默认为新窗口方式打开页面。返回值为:返回新打开窗口的window对象
close()  关闭当前的网页。FF:禁止设置关闭浏览器的代码	Chrome:默认直接关闭	IE:询问用户
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

定时器,清除定时器。
setTimeout(函数,时间) 只执行一次
setInterval(函数,时间) 无限执行
clearTimeout/clearInterval(定时器名称) 清除定时器

location对象

window.location对象:用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。在编写时可不使用 window 这个前缀。

console.log(location)	查看当前location所有属性或方法

location.herf = 'url地址'
hash 返回#号后面的字符串,不包含散列,则返回空字符串。
host 返回服务器名称和端口号
pathname 返回目录和文件名。 /project/test.html
search 返回?号后面的所有值。
port 返回URL中的指定的端口号,如URL中不包含端口号返回空字符串
protocol 返回页面使用的协议。 http:或https:

navigator对象

window.navigator 对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。

navigator.platform:操作系统类型;
navigator.userAgent:浏览器设定的User-Agent字符串。
navigator.appName:浏览器名称;
navigator.appVersion:浏览器版本;
navigator.language:浏览器设置的语言;
userAgent是最常用的属性,用来完成浏览器判断。

screen对象

window.screen 对象包含有关用户屏幕的信息。

screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。

document.write(screen.availHeight+screen.availWidth);//获取屏幕的宽度和高度之和

history对象

window.history 对象包含浏览器的历史。为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。文章来源地址https://www.toymoban.com/news/detail-611227.html

window.location.href = '你所要跳转到的页面';
window.open('你所要跳转到的页面’);
window.history.back();返回上一页
window.history.forward();返回下一页
window.history.go(-1/1):返回上一页或下一页
history.go("baidu.com");

窗口尺寸与大小

可视区尺寸:
	document.documentElement.clientWidth
	document.documentElement.clientHeight
滚动条滚动距离:
	document.documentElement.scrollTop
	document.documentElement.scrollLeft
存在兼容性问题(Chrome与其它浏览器不同),解决办法如下
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;

内容高/宽:元素.scrollHeight/scrollWidth

当一个时间发生时鼠标到页面可视区的距离:event.clientX/event.clientY

获取url

window.location.href; /* 获取完整URL http://localhost:8080/home*/
window.location.pathname; /* 获取文件路径(文件地址) /home*/
window.location.protocol; /* 获取协议 http:*/
window.location.host; /* 获取主机地址和端口号 localhost:8080*/
window.location.hostname; /* 获取主机地址 localhost*/
window.location.port; /* 获取端口号 8080*/
window.location.hash; /* 获取锚点(“#”后面的分段) */
window.location.search; /* 获取属性(“?”后面的分段) */

/* 如果需要URL中的某一部分,可以自己进行处理 */
let url = window.location.pathname;
url = url.substring(url.lastIndexOf('/') + 1, url.length);

到了这里,关于JavaScript中BOM常用操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是JavaScript BOM

    BOM是Browser Object Model的缩写,即 浏览器对象模型 。由于BOM是和浏览器相关的一些操作,因此产生的后果就是无数的浏览器厂商各自使用自己的一套方式实现BOM(当然现在这个问题基本解决了。。) 在网站中有很多针对浏览器的操作,比如浏览器的标题、浏览器窗口的大小,

    2024年01月18日
    浏览(29)
  • JavaScript学习 --- BOM

    BOM(Browser Object Model,浏览器对象模型)是JavaScript中的一个重要组成部分,它提供了与浏览器窗口和文档进行交互的API。BOM包括了一个全局的 window 对象,以及许多其他对象,例如 location 、 navigator 、 screen 和 history 。在本文中,我们将深入探讨JavaScript中BOM的相关知识。 在

    2024年02月16日
    浏览(37)
  • JavaScript解构赋值常用操作

    所谓数组解构,就是获取数组中一部分有用的数据,例子: 数组解构还可以和 split 函数配合使用,优雅又高端: 解构也可以叫做“解构赋值”,其本质就是把数组的元素复制给变量,所以原数组没有发生任何的变化 在使用解构赋值的时候,希望得到数组的第 1 、 3 个元素,

    2024年02月16日
    浏览(31)
  • javascript基础二十一:说说你对BOM的理解,常见的BOM对象你了解哪些?

    一、是什么 BOM (Browser Object Model),浏览器对象模型,提供了独立于内容与浏览器窗口进行交互的对象 其作用就是跟浏览器做一些交互效果,比如如何进行页面的后退,前进,刷新,浏览器的窗口发生变化,滚动条的滚动,以及获取客户的一些信息如:浏览器品牌版本,屏幕分

    2024年02月07日
    浏览(43)
  • JavaScript的三大组成部分是什么?JavaScript的核心组成部分解析:语法、BOM和DOM

    🌷🍁 博主猫头虎 带您 Go to New World.✨🍁 🦄 博客首页——猫头虎的博客🎐 🐳《面试题大全专栏》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺 🌊 《IDEA开发秘籍专栏》学会IDEA常用操作,工作效率翻倍~💐 🌊 《100天精通Golang(基础入门篇)》学会Golang语言

    2024年02月10日
    浏览(46)
  • JavaScript 入门指南(三)BOM 对象和 DOM 对象

    BOM(browser Object Model)即浏览器对象模型 BOM 由一系列对象组成,是访问、控制、修改浏览器的属性的方法 BOM 没有统一的标准(每种客户端都可以自定标准)。 BOM 的顶层是 window 对象 window 对象表示浏览器中打开的窗口。 使用 window 对象中的属性和方法,可以省略对象名,直

    2024年04月09日
    浏览(43)
  • vue(javaScript) 操作字符串的常用方法

    1. 获取字符串长度 JavaScript中的字符串有一个length属性,该属性可以用来获取字符串的长度 2. 获取字符串指定位置的值 charAt()和charCodeAt()方法都可以通过索引来获取指定位置的值 charAt() 方法获取到的是指定位置的字符; charCodeAt()方法获取的是指定位置字符的Unicode值。 (1)

    2024年02月03日
    浏览(44)
  • 30个前端开发中常用的JavaScript函数

    🧑‍💻作者名称:DaenCode 🎤作者简介:啥技术都喜欢捣鼓捣鼓,喜欢分享技术、经验、生活。 😎人生感悟:尝尽人生百味,方知世间冷暖。 在前端开发中通常会用到校验函数,检验是否为空、手机号格式、身份证格式等等。现按照用途分类整理出了30个常用的方法,在V

    2024年02月14日
    浏览(46)
  • 开发语言漫谈-JavaScript

           JavaScript、Java名字很相近,但它们没有任何亲缘关系,是由不同公司开发的编程语言。Java由Sun公司(后被Oracle收购)开发,JavaScript最初是由Netscape公司开发的(当年浏览器的霸主)。JavaScript最初的名字是 LiveScript,Netscape将其命名为 JavaScript,无非是蹭 Java流量。当

    2024年04月16日
    浏览(50)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包