第十九节：BOM 对象-CSDN博客

本文链接：https://blog.csdn.net/qq_41952539/article/details/112534504

第十九节：BOM 对象

Browser Object Model，浏览器对象模型

作用：浏览器窗口交互的一些对象

在这里插入图片描述

3.7.1 BOM 的构成

location

url 统一资源定位符：

/ 语法格式：
protocol://host[:port]/path/[?query]#fragment

http ://www.itcast.cn /index.html ?name=andy&age=18 #link

location 对象属性

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

location.href

/ 百度例子：
console.log(location.href);		// https://www.baidu.com/

location 对象方法

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

location.reload()：强制刷新

location.reload(true);

navigation

navigation 对象属性

对象方法	说明
userAgent	判断Pc端还是手机端

userAgent

history

history 对象方法

对象方法	说明
history.back()	后退
history.forward()	前进
history.go()	前进后退/ 正数前进的页数，负数后退的页面

history.go()

history.go(2);	// 前进2个页面
history.go(-2);	// 后退2个页面

同步和异步

异步

setTimeout() ：不堵塞后面代码的执行

/ 语法格式：
setTimeout(function () {
    // 异步执行代码块
}, 时间);

console.log(1);
console.log(2);
setTimeout(function () {
    console.log(3);
},1000);
console.log(4);
console.log(5);

// 1 2 4 5 3

offset、client、scroll 三大家族

offset 系列

偏移量，offset系列相关属性可以动态得到该元素的位置（偏移）、大小等

返回数值不带单位（px）

offset系列属性	说明
offsetParent	返回该元素带有定位的父元素节点，父元素没有定位则返回body节点
offsetTop	返回元素相对带有定位父元素上方的偏移量，父元素没有定位则返回body
offsetLeft	返回元素相对带有定位父元素左边框的偏移量，父元素没有定位则返回body
offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
offsetHeight	返回自身包括padding边框、内容区的高度，返回数值不带单位

offsetTop、offsetLeft

返回的是当前元素相对于已经定位的父元素的上 / 左边距，父元素没有定位则相对于body

<style>
    .father { width: 200px; height: 200px;
        margin: 200px;
    }
    .son { width: 100px; height: 100px;
        margin: 20px;
    }
</style>


<div class='father'>
	<div class='son'></div>
</div>

<script>
	let father = document.querySelector('.father');
    let son = document.querySelector('.son');
    // 父元素
    console.log(father.offsetTop);	// 200
    console.log(father.offsetLeft);	// 200
    
     / 如果不给父元素设置 定位
    // 子元素：相对于body的距离
    console.log(son.offsetTop);		// 220
    console.log(son.offsetLeft);	// 220
    
    / 如果给父元素设置 定位 position: relative / absolute;
    // 子元素：相对于已定位的父元素
    console.log(son.offsetTop);		// 20
    console.log(son.offsetLeft);	// 20
    
</script>

offsetWidth、offsetHeight

返回自身包括 padding、border、内容区的宽度 / 高度

<style>
    div { width: 200px; height: 100px;
    	border: 5px solid #f00;
    }
</style>

<div></div>

<script>
	let div = document.querySelector('div');
    
    console.log(div.offsetWidth);	// 205
    console.log(div.offsetHeight);	// 105
</script>

offsetParent

返回该元素带有定位的父元素节点，没有父元素没有定位则返回 body节点

<style>
    .father { width: 200px; height: 200px;
        margin: 200px;
    }
    .son { width: 100px; height: 100px;
        margin: 20px;
    }
</style>


<div class='father'>
	<div class='son'></div>
</div>

<script>
	let father = document.querySelector('.father');
    let son = document.querySelector('.son');
    // 父元素
    console.log(father.offsetParent);	// 200
    
    / 如果给父元素设置 定位 position: relative / absolute;
    // 子元素：相对于已定位的父元素
    console.log(son.offsetParent);	// <father></father>
    
    / 如果不给父元素设置 定位
    // 子元素：相对于body的距离
    console.log(son.offsetParent);	// <body> ... </body>
    
</script>

offset 与 style 的区别

offset：

只读不写

能获取任意样式的属性，返回值不带单位

包含 padding、border、内容的宽 / 高

style：

可读可写

只能获取行内样式的属性，返回值带单位

行内样式：

不包含 padding 和 border，只包含内容的宽 / 高

结论：我们想要给元素更改值，则需要使用 style 改变

更改属性值

/ offsetWidth 不能修改属性值
div.offsetWidth = 500;

/ style 可以修改属性值
div.style.width = '300px';

client 系列

client 对象属性

client系列属性	说明
clientWidth	返回自身不包括padding、边框、内容区的宽度，返回数值不带单位
clientHeight	返回自身不包括padding、边框、内容区的高度，返回数值不带单位
clientTop	获取上边框大小，返回数值不带单位
clientLeft	获取左边框大小，返回数值不带单位

scroll 系列

滚动系列

scroll 对象属性

scroll系列属性	说明
scrollWidth	返回自身不包括边框，但包含padding，获取实际宽度，返回数值不带单位
scrollHeight	返回自身不包括边框，但包含padding，获取实际高度，返回数值不带单位
scrollTop	返回被滚动条卷去的上侧距离，返回值不带单位

offsetWidth && clientWidth && scrollWidth 之间的区别

offsetWidth：返回自身包含padding、边框、内容区的宽度

clientWidth：返回自身包括padding、内容区的宽度，不含边框

scrollWidth：返回自身实际宽度，不含边框

offsetWidth && clientWidth && scrollWidth 实际用法

offset系列：经常用于获取元素的位置 offsetLeft、offsetTop
client：经常用于获取元素大小 clientWidth、clientheight
scroll：经常用于获取滚动距离 scrollTop、scrollLeft

pageXoffset、pageYoffset

页面滚动的距离通过 window.pageXoffset 获取

mouseenter 和 mouseover 的区别

mouseenter：不存在事件冒泡，给谁绑定，鼠标经过绑定元素时触发
mouseover：存在事件冒泡，经过子元素也会触发

动画封装

// 场景：元素向右移动10单位长度，到达一定值时停止定时器

/ 参数1：element 获取到的元素，参数2：target  最大值

animate(box, 200);

function animate(element, target) {
    element.timeId = setInterval(function () {
        if (element.offsetLeft >= target) {
            return clearInterval(element.timeId);
        }
        element.style.left = element.offsetLeft + 10 + 'px';
    }, 20);
}

回调函数

调用函数时，

<div class="box"></div>
<p class="p1"></p>
<button>向钱进</button>


<script>
    // 获取box
    let box = document.querySelector('.box');
    let p = document.querySelector('.p1');
    let btn = document.querySelector('button');

    // 绑定点击事件
    btn.addEventListener('click', function () {
        animate(box, 1000 , function () {
            box.style.backgroundColor = 'red';
        });
    });

    function animate(ele, target, callback) {
        // 先清除上一个定时器
        clearInterval(ele.timeId);
        // 开启定时器
        ele.timeId = setInterval(function () {
            // step 每个20毫秒移动的距离
            // 1. 步长
            let step = (target - ele.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            // 3. == ? >= 
            console.log(ele.offsetLeft);
            if (ele.offsetLeft == target) {
                clearInterval(ele.timeId);
                // 回调函数
                // 0 undefined NaN null ''  =>false
                if ( typeof callback == 'function') {
                    callback();
                }
                // 后面所有代码不执行
                return;
            }
            // 2.移动的位置
            ele.style.left = ele.offsetLeft + step + 'px';
        },20);
    }
</script>