ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

BOM操作

2020-08-08 11:32:08  阅读:282  来源: 互联网

标签:返回 元素 location element window BOM 操作 页面


1.BOM
    即浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。
    BOM把浏览器当作一个对象。
    BOM的顶级对象是window,而DOM是document。
    BOM是浏览器厂商各自规定,兼容性较差。
    BOM大于DOM,包含DOM。
2.window对象
    是浏览器的顶级对象,具有双重角色。
    1)是JS访问浏览器的一个接口
    2)是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法
    *window下有一个特殊属性:window.name
3.window对象的常见事件
    1)窗口加载事件
        window.onload = function() {}--只能存在一个
        或
        window.addEventListener("load", function() {})--可以有多个
        当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数。
    2)窗口加载事件2
        document.addEventListener('DOMContentLoaded', function() {})
        事件触发时,仅当DOM加载完成,不包含样式表、图片,flash等。
        当页面图片很多时,从用户访问到onload触发可能需要较长的事件,交互效果不能实现,必然影响用户体验,此时用该事件较合适。
    3)调整窗口大小事件
        window.onresize = function() {}
        或
        window.addEventListener("resize", function() {})
        窗口大小发生变化就会被触发。
        应用:响应式布局。
        window.innerWidth为当前浏览器窗口宽度。
4.定时器
    1)setTimeout()定时器
        window.setTimeout(调用函数,[延迟的毫秒数])
        用于设置一个定时器,在定时器到期后执行调用函数,只调用一次。
    2)停止setTimeout()定时器
        window.clearTimeout(timeoutID)
        要先给定时器起个名字/标识符(timeoutID)
    3)setInterval()定时器
        window.setInterval(回调函数,[间隔的毫秒数])
        重复调用一个函数,每隔一段事件就调用一次回调函数。
    4)停止setInterval()定时器
        window.clearInterval(intervalID)
5.this的指向问题
    1)window
        一般情况下,this指向的是调用它的对象。
        定时器的this指向window。
        全局作用域或者普通函数中this指向全局对象window。
    2)方法内的this指向
        方法调用中谁调用指向谁
    3)构造函数中this指向
        构造函数中this指向构造函数的实例
6.JS执行机制
    1)简介
        JS语言的一大特点就是单线程,比如对某个DOM元素进行添加和删除操作,不能同时进行,应该先进行添加之后再删除。
        单线程就意味着所有任务需要排毒,前一个任务结束了才会执行后一个任务。
        导致问题:如果JS执行时间过长,会造成页面渲染不连贯,导致页面渲染加载阻塞的感觉。
        解决方式:(HTML5)同步和异步。
    2)同步和异步
        1 同步任务:同步任务都在主线程上执行,形成一个执行线。
        2 异步任务:JS的异步是通过回调函数实现的,放到任务/消息队列中执行
            异步任务类型:
                普通事件:click、resize等
                资源加载:load、error等
                定时器、包括setInterval、setTimeout等
        3 执行
            先执行执行栈中的同步任务,异步任务放入任务队列。
            同步任务执行完,异步任务进入执行栈开始执行。
    *由于主线程不断地重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(eventloop)。
7.location对象
    1)简介
        window对象提供地属性,用于获取或设置窗体地URL,并且可用于解析URL,此属性返回一个对象。
    2)属性
        *location.href:获取或设置整个URL
        location.host:返回主机(域名)
        location.port:返回端口号,如未写返回空字符串
        location.pathname:返回路径
        *location.search:返回参数
        location.hash:返回片段 #后内容,常见于链接、锚点
    3)方法
        location.assign('url'):跟href一样,可以跳转页面(也称为重定向页面),可后退页面
        location.replace('url'):替换当前页面,因为不记录历史,所以不能后退页面
        location.reload():重新加载页面,相当于刷新按钮或者f5,如果参数为true强制刷新ctrl+f5
8.navigator对象
    包含有关浏览器地信息,它有很多属性,最常用地是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
    应用:判断用户用哪个终端打开页面,实现跳转
        if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))){
            window.location.href = '';//手机
        } else {
            window.location.href = '';//电脑
        }
9.history对象
    history.forward()前进
    history.back()后退
    history.go(n) 正值前进n页,负值后退n页
10.元素偏移量offset
    1)概述
        使用相关属性可以动态得到该元素的位置(偏移)、大小等。
        1 获得元素距离带有定位父元素的位置
        2 获得元素自身大小(宽高)
        3 返回的数值都不带单位
    2)offset系列常用属性
        1 element.offsetParent:返回作为该元素带有定位的父级元素,如果父级都没有定位则返回body
        2 element.offsetTop:返回元素相对带有定位父元素上方的偏移
        3 element.offsetLeft:返回元素相对带有定位父元素左边框的偏移
        4 element.offsetWidth:返回自身包括padding、边框、内容区的宽度,返回数值不带单位
        5 element.offsetHeight:返回自身包括padding、边框、内容区的高度,返回数值不带单位
    3)offset和style区别
        1 offset可以得到任意样式表中的样式值,style只能得到行内样式表中的样式值
        2 offset系列获得的数值是没有单位的,style.width获得的是带有单位的字符串
        3 offsetWidth包含padding、border、width,style.width获得不包含padding和border的值
        4 offsetWidth等属性是只读属性,style.width是可读写属性
        5 想获取元素大小位置,用offset更合适,想更改元素的值,则用style
11.元素可视区client
    1)概述
        使用client系列的相关属性来获取元素可视区的相关信息。可动态获得该元素边框大小、元素大小等。
    2)xlient系列属性
        1 element.clientTop:返回元素上边距的大小
        2 element.clientLeft:返回元素左边框的大小
        3 element.clientWidth/Height:返回自身包括padding、内容区宽度/高度,不含边框,返回数值不带单位
    *与offset最大区别就是不包含边框
    3)立即执行函数:(function(){})()或(function(){}())
        主要作用:创建一个独立的作用域。
        特点:不需要调用,立马能够自己执行的函数。
    *多个立即执行函数之间应该用;分隔
    *pageshow事件:在页面显示时触发,无论页面是否来自缓存,在load事件触发后触发,e.persisted = true,说明这个页面从缓存取过来,需要触发pageshow事件来重新加载页面
12.元素scroll
    1)概述
        相关属性可以动态的得到该元素的大小、滚动距离等。
    2)scroll系列属性
        1 element.scrollTop:返回被卷去的上侧距离,返回数值不带单位
        2 element.scrollLeft:返回被卷去的左侧距离,返回数值不带单位
        3 element.scrollWidth/Height:返回自身实际的宽度/高度,不含边框,返回数值不带单位
        *页面被卷去头部/左侧:window.pageYOffset/pageXOffset(IE9开始支持)
        *元素被卷去头部/左侧:element.scrollTop/scrollLeft 有兼容性问题
        *兼容问题解决方案:
            声明了DTD:document.documentElement.scrollTop
            未声明:document.body.scrollTop
        *window.scroll(x,y):可以让页面到达指定x,y坐标位置(如回到页面顶部)--x,y无单位
    3)scroll事件
        当滚动条发生变化会触发的事件。
13.offset/client/scroll三大系列的总结
    1)大小对比
        offsetWidth:padding+边框+内容区
        clientWidth:padding+内容区
        scrollWidth:返回自身实际宽度
    2)主要用法
        offset:用于获得元素位置offsetLeft/offsetTop
        client:用于获取元素大小clientWidth/clientHeight
        scroll:用于获取滚动距离(非页面)scrollTop/scrollLeft
14.mouseenter/mouseover区别
    mouseenter/mouseleave不会冒泡。
    父盒子绑定事件,进入子盒子不会再触发事件,是因为不会冒泡。
15.动画函数封装
    1)原理:通过定时器setInterval()不断移动盒子位置。
    2)注意:动画元素需添加定位。
    3)缓动动画:缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来。
        *核心算法:(目标值-现在位置) / 10 作为每次移动的距离步长
16.节流阀
    应用:防止轮播图按钮连续点击造成播放过快。
    目的:当上一个函数动画内容执行完毕再去执行下一个函数动画,让事件无法连续触发。
    *核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数。
    步骤:
        1)开始设置一个变量var flag = true
        2)if(flag) {flag  = false; do somethig}关闭水龙头
        3)利用回调函数动画执行完毕,flag = true打开水龙头
17.本地存储
    1)特性
        1 数据存储在用户浏览器中
        2 设置、读取方便、甚至页面刷新不丢失数据
        3 容量较大,sessionStorage约5M、localStorage约20M
        4 只能存储字符串,可以将对象JSON.stringify()编码后存储
    2)window.sessionStorage
        1 生命周期为关闭浏览器窗口
        2 在同一个窗口(页面)下数据可以共享
        3 以键值对的形式存储使用
        4 存储数据:sessionStorage.setItem(key,value)
        5 存储数据:sessionStorage.getItem(key)
        6 删除数据:sessionStorage.removeItem(key)
        7 删除所有数据:sessionStorage.clear()
    3)window.localStorage
        1 永不失效,除非手动删除
        2 多窗口(页面)共享,只要是同一浏览器
        3 以键值对的形式存储使用
        4 存储数据:localStorage.setItem(key,value)
        5 存储数据:localStorage.getItem(key)
        6 删除数据:localStorage.removeItem(key)
        7 删除所有数据:localStorage.clear()         ————学习笔记

标签:返回,元素,location,element,window,BOM,操作,页面
来源: https://www.cnblogs.com/atao24/p/13456953.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有