JS中的BOM

最新推荐文章于 2024-07-26 18:35:26 发布

Taichi呀

最新推荐文章于 2024-07-26 18:35:26 发布

阅读量42

点赞数 1

分类专栏： js html 文章标签： javascript microsoft 开发语言

本文链接：https://blog.csdn.net/qq_56679246/article/details/134667166

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。

浏览器对象模型（Browser Object Model (BOM)）

不存在浏览器对象模型（BOM）的官方标准。

现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。

Window 对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header");

等同于：

document.getElementById("header");

窗口尺寸

两个属性可用用于确定浏览器窗口的尺寸。

这两个属性都以像素返回尺寸：

window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）

浏览器窗口（浏览器视口）不包括工具栏和滚动条。

对于 Internet Explorer 8, 7, 6, 5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或

document.body.clientHeight
document.body.clientWidth

一个实用的 JavaScript 解决方案（包括所有浏览器）：

实例

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

var x = document.getElementById("demo");
x.innerHTML = "浏览器内窗宽度：" + w + "，高度：" + h + "。";
</script>

</body>
</html>

该例显示浏览器窗口的高度和宽度：（不包括工具栏和滚动条）

其他窗口方法

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

window常见事件

窗口加载事件

window.onload = function(){} 
//  或者
window.addEventListener("load", function(){ });
// or
document.addEventListener("DOMContentLoaded", function(){ });

window.onload窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图片,脚本文件,css文档等).就调用的处理的函数.

有了window.onload就可以把js代码写到页面元素的上方,因为onload是等页面内容全部加载完完毕,再去执行处理函数.
window.onload传统注册事件方法只能写一次,如果有多个,会以最后一个window.onload为准
DOMContentLoaded 是DOM 加载完毕,不包含图片 falsh css 等就可以加载. 比load更快一些.

调整窗口大小事件

window.onresize = funcrion() {};
window.addEventListener("resize", function() {});

window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数.

只要窗口大小发生像素变化,就会触发这个事件.
我们经常利用这个完成响应式布局.window.innerWidth当前屏幕的宽度.windowHeihgt屏幕的高度

<script>
        window.addEventListener('load', function() {
            let div = document.querySelector('div');
            window.addEventListener('resize', function() {
                if (window.innerWidth >= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }
            })
        })
    </script>
    <div style="height: 200px;width: 200px;background-color: #000;">
    </div>

定时器

setTimeout() setInterval 定时器

window.setTimeout(调用函数,[延迟时间的毫秒])

setTimeout() 方法用与设置一个定时器,该定时器在到期后执行调用函数.

window可以省略.
这个调用函数可以**直接写函数,或者写函数名**.
延迟毫秒默认是0,如果写,必须是**毫秒**.
setInterval是**每隔这个时间调**用一次函数
setTimeout我们也称为**回调函数**,只能跳一次,

function yly() {
            console.log('爆炸了');
        }
        // 定时器
        let timer = setInterval(yly, 1000);
        // 延迟器
        let imer = setTimeout(yly, 2000);

清除定时器

window.clearTimeout(timeoutID)

语法: ID的意思是定时器的名字,括号里面是定时器的名字

只有**先声明**定时器才能清除

let but = document.querySelector('button');

        function yly() {
            console.log('爆炸了');
        }
        // 定时器
        let timer = setInterval(yly, 1000);
        // 延迟器
        let imer = setTimeout(yly, 2000);
        but.addEventListener('click', function() {
            //  停止定时器
            clearTimeout(timer);
        })

this指向

全局作用域或普通函数中this指向全局变量window
方法调用中谁调用this指向谁

location对象

1.什么是location对象

window对象给我们提供一个**location属性用于获取或设置窗口体的URL,并用解析URL.因为这个属性是个对象,所以我们将这个属性也称为location对象**.

2.URL

是互联网上标准的资源地址.互联网上每一个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器该怎么处理它.

URL的一般语法格式:

protocol://host[:port]/path/[?query]#fragment
https://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用的http,ftp,maito等
host	主机(域名) www.itheima.com
port	端口号可选,省略是使用方案的默认端口如http的默认端口为80
path	路径由零或多个符号隔开的字符串, 一般用来表示主机上一个目录或一个地址
query	参数以键值对的形式,通过&符号隔开来
fragment	片段 #后面内容常见于链接描点

3.location 对象的属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机名(域名)
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面的内容常见于锚点

**重点**记住: href和search.

4.location 对象的方法

location对象方法	返回值
location.assign()	跟href一样,可以跳转页面(也称为重定向页面)
location.replace()	替换当前页面,因为不记录历史,所以不能后退页面
location.reload	重新加载页面,相当于刷新按钮或者F5 如果参数为true强制刷新页面ctrl+F5

// 获取按钮
        let but = document.querySelector('button');
        but.addEventListener('click', function() {
            // location.assign是记录浏览历史的可以后退
            // location.assign('http://www.itcast.cn');
            // location.replace 不记录浏览历史不能后退
            // location.replace('http://www.itcast.cn');
            // 强制刷新 ,里面不加true是普通刷新
            location.reload(true);
        })

5.history对象

history对象方法	作用
back()	后退一步
forward()	前进一步
go(参数)	参数如果是1前进一个页面 -1倒退一个页面

// 获取按钮
        let but = document.querySelector('button');
        but.addEventListener('click', function() {
            // location.assign是记录浏览历史的可以后退
            location.assign('http://www.itcast.cn');
            // location.replace 不记录浏览历史不能后退
            // location.replace('http://www.itcast.cn');
            // 强制刷新 
            // location.reload(true);
        })

PC端网页特效

1.元素偏移量offset系列

offset翻译过来就是边偏移量,使用offset系列相关属性可以**动态的**得到元素位置(偏移),大小等.

获得元素距离带有定位父元素的位置
获得元素自身的大小
注意:返回的数值都不带大小.

offset属性系列	作用
element.offsetParent	返回作为该元素带有定位的父元素,如果父元素都没有定位返回的是body
element.offsetTop	返回元素相对带有定位父元素上的偏移
element.offsetLeft	返回元素相对带有定位父元素左的偏移
element.offsetWidth	返回自身包括padding, 边框 , 内容区的宽度.
element.offsetHeihgt	返回自身包括padding, 边框 , 内容区的高度.
element.offsetTop	返回元素相对带有定位父元素上的偏移

2.offset与style的区别

offset.

offset可以得到任意值样式表中的样式值
offset系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth等属性只是读属性,不能赋值
所以,想要获取元素大小位置,用offset更合适.

style.

style.只能得到行内样式表中的样式值
style,width 获得的是带有单位的字符串
style.width 获得不包含padding和border的值
style.width 是可读写属性,可以获取也可以赋值.
所以,想要给元素改值,则需要用style改变.

3.元素可视区client系列

client翻译过来就是客户端,跟**offset一样,区别是这个可以获取边框**.

client系列属性	作用
ele.ment.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding,内容区的宽度,不包含边框,返回数值不带单位
element.clientHeight	返回自身包括padding,内容区的宽度,不包含边框,返回数值不带单位

4.立即执行函数

主要作用是为了**创建作用域**, 避免命名冲突问题


        //  1.立即执行函数: 不需要调用, 立马能够自己执行
        function fn() {
            console.log(213);
        }
        fn();
        // 2. 写法  也可以传递参数出来
        // (function() {})()  或者  (function(){}())

        (function(a, b) {
            console.log(a, b);
        })(120, 110); // 后面这个括号可以看作为调用
        // 如果有多的立即执行函数 必须有分号来解为";"
        (function(a, b) {
            console.log(a + b);
            console.log(this);
        }(2, 3));
        console.log('alkjvn');
        // 3. 立即执行函数最大的作用是  创建了一个独立的作用域.

5. 元素 scroll 系列属性

**scroll翻译过来就是滚动的意思,我们使用scroll相关属性可以动态得到该元素的大小滚动距**离等等.

scroll系列作用	作用
element.scrollTop	返回被卷去的上侧距离,返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离,返回数值不带单位
element.scrollWidth	返回自身实际的宽度,不包含边框,返回数值不带单位
element.scrollHeight	返回自身实际的高度,不包含边框,返回数值不带单位

scroll事件, 通过滚动属性条来触发函数 onscroll

div.onscroll = function() {
            console.log(div.scrollTop);
        }

如果想使用页面滚动触发函数 页面被卷去的头部: 可以通过window.pageYOffset 获得. 如果是被卷进去的左侧用window.pageXOffset
注意如果是元素被卷去的头部是**element.scrollTop, 如果是页面被卷去的头部是window.pageYOffset**.

三大系列总结

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding,边框,内容区的宽度,
element.clientWidth	返回自身包括padding,内容区的宽度,不包含边框
element.scrollWidth	返回自身实际的宽度,不包含边框,返回数值不带单位

他们的用法:

offset获取元素位置,offsetLeft offsetTop.
client经常用于获取元素大小 clientWidth clientHeihgt.
scroll经常用于获取页面滚动距离 scrollTop scrollLeft.
注意页面滚动的距离是通过 window.pageXOffset 获得

mouseenter和mouseover的区别

onmouseover和onmouseenter都是鼠标移入该元素的时候触发的事件，但是，不一样的地方是，如果打开页面的时候鼠标刚好在该元素上面，onmouseenter就没有被触发，而onmouseover会被触发，因为onmouseenter只有在鼠标进入该元素的瞬间才会被触发
onmouseleave和onmouseout的区别也是如此，只要鼠标不在该元素身上，onmouseout就会触发，而onmouseleavr只有在鼠标从该元素身上离开的时候才会触发
mouseenter没有冒泡概念.
mouseover有冒泡.

onmouseover：鼠标经过事件 //冒泡
onmouseout:鼠标离开事件

onmouseenter:鼠标进入事件 //不冒泡
onmouseleave：鼠标离开事件

Taichi呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的BOM

window对象给我们提供一个**location属性用于获取或设置窗口体的URL,并用解析URL.因为这个属性是个对象,所以我们将这个属性也称为location对象**.三大系列大小对比作用返回自身包括padding,边框,内容区的宽度,返回自身包括padding,内容区的宽度,不包含边框返回自身实际的宽度,不包含边框,返回数值不带单位offset获取元素位置,client经常用于获取元素大小scroll经常用于获取页面滚动距离注意页面滚动的距离是通过。
复制链接

扫一扫

专栏目录