整理总结JavaScript常见的BOM操作
时间:2022-06-01 [网络编程]作者:fabuyuan 浏览:6 次
window对象的常见事件
窗口加载事件:
- window.onload:页面加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)就调用的处理函数。
- document.addEventListener(‘DOMContentLoaded’, function(){}):仅当DOM加载完成,不包括样式表、图片,flash的的,兼容性
调整窗口大小的事件:
- window.onresize:调整窗口大小加载事件
window.open()方法可以用于导航到指定 URL,也可以用于打开新浏览器窗口
- 这个方法接收 4 个参数:要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否代当前加载页面的布尔值
window.open("http://www.wrox.com/", "wroxWindow","height=400,width=400,top=10,left=10,resizable=yes");
计时器:
- setInterval(handler: any, timeout?: long, arguments…: any):循环调用
- clearInterval(handle?: long):取消setInterval
- setTimeout(handler: any, timeout?: long, arguments…: any):一次性
- clearTimeout(handle?: long):取消setTimeout
window.scroll(x, y)
window.scrollTo(x, y):两者是一样的用法 改变横向和垂直的滚动条的位置,前提是必须有滚动条在页面中
window.scrollBy(x, y):滚动条的累加滚动,正数向下 ,负数向上 window.scrollBy(0, 10):每100毫秒调用一次的时候,滚动条运动10个像素
window.getComputedStyle(elem, 伪类)
对话框
- alert
- alert(“提示字符串”)
- 弹出一个警告框,在警告框内显示提示字符串文本
- confirm
- confirm(“提示字符串”)
- 显示一个确认框,在确认框内显示提示字符串
- 当用户单击"确认"按钮返回true,单击"取消"返回false
- prompt
- prompt(“提示字符串”,“默认值”)
- 显示一个输入框,在输入框内显示提示字符串,等待用户输入
- 当用户单击"确认"按钮返回用户输入,单击"取消"返回null值
- alert
JavaScript执行机制
运行js脚本,将js代码以同步执行方式放入执行栈,运行执行栈过程中遇见JS异步代码(事件、计时器、ajax、资源加载load、error)放入web APIs(任务队列),当执行栈里的代码运行完成以后,去任务队列里拿第一个进行执行,执行外以后在去任务队列拿一个过来执行,反复执行(事件循环)直到任务队列里的执行完成
location对象
window.history 用于获取当前页面的地址URL,并把浏览器重定向到新的页面
http://www.itcast.cn:80/index.html?name=andy&age=1#link http:通信协议 www.itcast.cn:域名80:端口 index.html:路径?name=andy&age=1:参数 #link 片段:锚点、链接
对象属性:
- href*:获取或者设置整个URL
- host:返回主机名(域名)
- hostname:设置或返回当前URL的主机名
- post:返回端口号
- pathname:返回路径
- search*:返回参数
- hash:返回片段(#后面的内容)
- protocol:设置或返回当前URL的协议
对象方法:
- assign:和href一样,可以跳转页面(也称为重定向页面)
- replace:替换当前页面,因为不记录历史,所以不能后退页面
- reload:重新加载页面,相当于刷新功能
navigator对象
navigator:封装浏览器配置信息的对象
- cookieEnabled 当前浏览器是否开启了cookie
- cookie:在客户端的存储空间,且容量较小根据不同的浏览器有不同的大小,可以做到永久保存 密匙
- 缺点:特别容易泄露个人信息
- plugins 封装了浏览器安装的所有插件信息
- userAgent 浏览器的名称,内核 版本号 等一些列的字符
- onLine 电脑是否处于脱机状态 电脑联网了吗?
- platform 返回运行浏览器的操作系统平台
- appCodeName 返回浏览器的代码名
- appName 返回浏览器的名称
- appVersion 返回浏览器的平台和版本信息
history对象
window.history 对象包括浏览器的历史(url)集合
- 浏览器的后退功能:history.back()
- 浏览器的向前功能:history.forward()
- 进入历史中的某一个页面:history.go()
screen对象
window.screen 对象包含有关用户的信息
// screen:获得显示设备的分辨率大小 // 完整的分辨率:screen.widht/height // 如何鉴别客户端的种类 兼容所有的客户端 宽度 // 大屏 中屏 小屏 超小屏 // lg md sm xs // TV pc pad phone //宽 >= 1200 >=992 >= 768 < 768 // 全掉任务栏之后剩余的分辨率 // screen.availHeight/availWidth
- 可用屏幕宽度:screen.availWidth
- 可用屏幕高度:screen.availHeight
- 屏幕高度:screen.Height
- 屏幕宽度:screen.Width
- 屏幕的颜色的位数:colorDepth
元素偏移量offset系列
可以动态得到该元素的位置(偏移)、大小等
- 获取元素距离定位父元素的位置
- 获取元素自身大大小
- ps:返回的数值不带单位
offset系列常用属性:
- element.offseParent:返回作为该元素带有定位的父级元素,如果父级元素都没有定位则返回body
- element.offsetTop*:返回元素相对带有定位父元素上方的偏移
- element.offsetLeft*:返回元素相对带有定位父元素左方的偏移
- element.offsetWidth:返回自身包括padding、边框、内容的宽度,不带单位
- element.offsetHeight:返回自身包括padding、边框、内容的高度,不带单位
元素可视区client系列
动态获取元素的边框大小、元素大小等
常用属性:
- element.clientTop:元素上边框的大小
- element.clientLeft:元素左边框的大小
- element.clientWidth*:返回自身包括padding、内容区的宽度,不含边框,不带单位
- element.clientHeight*:返回自身包括padding、内容区的高度,不含边框,不带单位
元素滚动scroll系列
动态获取元素的大小、滚动距离
常用属性
- element.srcollTop*:返回被卷去的上侧距离,不带单位
- element.srcollLeft*:返回被卷去的左侧距离,不带单位
- element.srcollWidth:返回自身实际的宽度,不含边框,不带单位
- element.srcollHeight:返回自身实际的高度,不含边框,不带单位
滚动条在滚动的时候会触发onscroll事件
查看滚动条的滚动距离
window.pageXOffset/pageYOffset
IE8 及IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop
兼容性比较混乱,用时取两个值相加,因为不可能存在两个值同时有值 封装兼容性方法,求滚动条滚轮滚动距离getScrollOffet()
/* 封装一个获取滚动条的滚动距离 返回:x:水平滚动条滚动的距离 y:垂直滚动条滚动的距离 */function getScrollOffet(){ if(window.pageXOffset){ return {//对象的{}一定要在关键字后,否则系统会自动加上; 则返回值会是undefined x : window.pageXOffset, y : window.pageYOffset } }else{//兼容IE8以及以下 return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop } }}
查看视口的尺寸
window.innerWidth/innerHeight
IE8及IE8以下不兼容(注意:这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) document.documentElement.clientWidth/clientHeight
标准模式下,任意浏览器都兼容 document.body.clientWidth/clientHeight
适用于怪异某事下的浏览器 封装兼容性方法,返回浏览器视口尺寸getViewportOffset()
/*封装返回浏览器视口尺寸 返回值: w :视口的宽度 h : 视口的高度 */function getViewportOffset(){ if(window.innerWidth){ return { w : window.innerWidth, h : window.innerHeight } }else{ //兼容IE8以及以下的浏览器 if(document.compatMode == 'BackCompat'){ //怪异渲染模式下 return { w : document.body.clientWidth, h : document.body.clientHeight } }else{ // 标准模式 return { w : document.documentElement.clientWidth, h : document.documentElement.clientHeight } } }}console.log(document.compatMode);// BackCompat 怪异模式// CSS1Compat 标准模式
查看元素的几何尺寸 ES5新增了解
domElement.getBoundingClientRect()
兼容性很好;返回一个对象,该对象中有left、top、right、bottom等属性,left、top代表元素左上角的X和Y坐标, right和bottom表示元素右下角的X和Y坐标height 和 width属性老版本IE未实现 返回的结果并不是’实时的’
// 获取元素在文档中的位置function getElementPosition(target){ // 支持 BoundingClientRect()方法 if(0 && target.getBoundingClientRect){ var pos = target.getBoundingClientRect(); return { // 涉及到滚动条有移动的情况下 加上滚动条的位置 x : pos.left + Math.max(document.body.scrollLeft, document.documentElement.scrollLeft), y : pos.top + Math.max(document.body.scrollTop, document.documentElement.scrollTop) } } else { var pos = { left : 0, top : 0 } var _elm = target; while(target.offsetParent){ if(_elm == target){//首次累加left 和 top pos.left += target.offsetLeft; pos.top += target.offsetTop; }else{ pos.left += target.offsetLeft + target.clientLeft; pos.top += target.offsetTop + target.clientTop; } // target 重新赋值 target = target.offsetParent; } return { x : pos.left, y : pos.top} }}
属性
状态栏
- defaultStatus 改变浏览器状态栏的默认显示
- status 临时改变浏览器状态的显示
窗口位置
- IE
- screenLeft 声明窗口的左上角的x坐标
- screenTop 声明窗口的左上角的y坐标
- document.body.screenLeft
- document.documentElement.screenLeft 声明当前文档向右滚动过的像素数
- document.body.screenTop
- document.documentElement.screenTop 声明当前文档向右滚动过的像素数
- !IE
- screenX 声明窗口的左上角的x坐标
- screenY 声明窗口的左上角的y坐标
- pageXOffset 声明当前文档向右滚动过的像素数
- pageYOffset 声明当前文档向右滚动过的像素数
- FF
- innerHeight 返回窗口的文档显示区的高度
- innerWidth 返回窗口的文档显示区的宽度
- outerWidth 返回窗口外部宽度
- outerHeight 返回窗口外部高度
其他属性
- opener 可以实现同域名下跨窗体之间的通讯 一个窗体要包含另一个窗体的opener
- closed 当前窗口关闭时返回true
- name 设置或返回窗口的名称
- self 返回对当前窗口的引用
【相关推荐:javascript视频教程、web前端】
以上就是整理总结JavaScript常见的BOM操作的详细内容,更多请关注站长家园其它相关文章!
本文标签: javascript
转载请注明来源:整理总结JavaScript常见的BOM操作
本文永久链接地址:https://www.adminjie.com/post/13035.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- app是什么应用程序的简称
- 华为dubal20是什么型号
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- 电脑显示信号线无连接是什么意思
- ana an00华为是什么型号
- html5中onclick是什么意思
- 超清视效是什么意思
- vivov1818a是什么手机型号
- html5的标题标记一共有几个等级

- 最新文章
-
-
php中restful风格是什么意思
php中restful风格指的是一种网络应用程序的设计风格和开发方式,基于HTTP,可以使用XML格式定义或JSON格式定义;RESTFUL适用于移动互联网厂商...
-
php中preg_replace怎么替换变量数据
在php中,“preg_replace”函数可以执行一个正则表达式的搜索和替换来替换变量数据,语法为“preg_replace(规定搜索的模式,用于替换的字符串...
-
vue抽象语法树和虚拟dom的区别是什么
vue抽象语法树和虚拟dom的区别:1、抽象语法树指的是源代码语法结构的一种抽象表示,而虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构;2、虚拟...
-
vue3和vue2的语法有什么区别
vue3和vue2的语法区别:1、vue2使用的是webpack形式去构建项目,而vue3使用vite构建项目;2、vue2中可以使用pototype的形式去进...
-
66个面试问题,带你梳理MySQL知识点!数据库架构存储引擎日志SQL 优化索引锁事务高可用/性能运维
作为SQLBoy,基础部分不会有人不会吧?面试也不怎么问,基础掌握不错的小伙伴可以跳过这一部分。当然,可能会现场写一些SQL语句,SQ语句可以通过牛客、Lee...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-