浏览器对象模型 BOM

最新推荐文章于 2024-07-11 21:34:43 发布

俊小赞

最新推荐文章于 2024-07-11 21:34:43 发布

阅读量398

点赞数

分类专栏： # JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44808483/article/details/113244449

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

前言
一、Window
二、Screen
三、Location
四、History
五、Navigator
总结

前言

BOM，全称 Browser Object Model（浏览器对象模型），它允许 JavaScript 与浏览器之间进行对话，其中主要的有 window、screen、location、history、navigator 等五大对象组成，下面我们将逐一进行介绍。

一、Window

window 对象代表了着浏览器窗口，是 javascrip 语言中最大的对象，下列将介绍到的四大对象也属于window当中，定义变量、常量、函数会自动成为 window对象成员。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>window BOM</title>
  </head>
  <body></body>
  <script>
    var a = '变量'; 
    console.log(a);			// 打印 a 变量，可以正常打印
    console.log(window.a);	// 在 a 变量前添加 window. ，也可以正常打印。
  </script>
</html>

1. 弹出框

alert：警告框，对用户某操作进行警示功能
window.alert(value)，value：警告内容。
confirm：确认框，对用户某操作进行判断，根据用户的需要执行
window.confirm(value)，value：需要用户确认的内容，返回布尔值。
prompt：提示框，对用户进行数据采集
window.prompt(value, defaultvalue)，value：为用户输入提示，返回用户输入内容；defaultvalue：输入框默认值（可省，为空）。

window.alert('这是一个警示框');
let boor = window.confirm('这是一个确认框');
console.log('确认框' + boor);
let userString = window.prompt('这是一个提示框', '默认值');
console.log('提示框中，你输入的是' + userString);

// 由于提示框是常用的方法，所以在 javascript 语法中使用提示框可以省略 window. 直接使用。
alert('这是一个警示框');
let boor2 = confirm('这是一个确认框');
console.log('确认框' + boor);
let userString2 = prompt('这是一个提示框', '默认值');
console.log('提示框中，你输入的是' + userString);

2. 定时器

setTimeout：等待指定毫秒数后执行函数 执行一次
setTimeout(function, milliseconds)，function：需要执行的函数；milliseconds：等待时间
setInterval：等待指定毫秒数循环执行函数 循环执行，直到被清除
setInterval(function, milliseconds)，function：需要执行的函数；milliseconds：等待时间
clearTimeout：停止Timeout定时器的执行
clearTimeout(id)，id：需要停止执行的序号。
clearInterval：停止Interval定时器的执行
clearInterval(id)，id：需要停止执行的序号。

// 在这里，window. 也可以省略
// 创建定时器的演示
window.setTimeout(function () {
  console.log('setTimeout定时器执行');
}, 100);

var i = 1;
window.setInterval(function () {
  console.log('setInterval定时器执行' + i++ +'次');
}, 1000);

// 清除定时器的演示
// 在定义定时器的时候，会返回一个定时器的 id，通过这个 id 即可清除停止定时器。
var j = 1;
var k = window.setInterval(function () {
  // 当执行到第十次时清除定时器。
  if (j === 10) {
    clearInterval(k);
  }
  console.log('setInterval定时器执行' + j++ + '次');
}, 1000);
// clearTimeout 同理

3. 位置

属性	描述
innerHeight	返回窗口的文档`显示区`的高度。
innerWidth	返回窗口的文档`显示区`的宽度。
outerHeight	返回窗口的外部高度。
outerWidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

方法	描述
resizeBy(x, y)	按照指定的像素调整窗口的大小。
resizeTo(x, y)	把窗口的大小调整到指定的宽度和高度。
scrollBy(w, h)	按照指定的像素值来滚动内容。
scrollTo(x, y)	把内容滚动到指定的坐标。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。

<!-- 实现点击导航栏快速定位页面内位置 -->
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Go To Page</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      nav {
        overflow: hidden;
      }
      nav ul {
        position: fixed;
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 80px;
        background-color: #2b2b2b;
        list-style-type: none;
        cursor: pointer;
      }
      nav ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 80px;
        color: #fff;
      }
      nav ul li:hover {
        background-color: #d19a66;
      }
      article {
        overflow: hidden;
      }
      article section {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: bold;
        width: 100vw;
        height: 100vh;
      }
      article section:nth-child(1) {
        background-color: #45aaf2;
      }
      article section:nth-child(2) {
        background-color: #4b7bec;
      }
      article section:nth-child(3) {
        background-color: #a55eea;
      }
      article section:nth-child(4) {
        background-color: #0fb9b1;
      }
      input[type='button'] {
        position: fixed;
        right: 20px;
        bottom: 50px;
      }
    </style>
  </head>
  <body>
    <nav>
      <ul>
        <li class="box1">首页</li>
        <li class="box2">关于</li>
        <li class="box3">服务</li>
        <li class="box4">联系</li>
      </ul>
    </nav>
    <article>
      <section id="box1">首页</section>
      <section id="box2">关于</section>
      <section id="box3">服务</section>
      <section id="box4">联系</section>
    </article>
    <!-- 这里！因为已经封装好了calculate函数，直接传对应的参数即可 -->
    <input type="button" value="按钮" onclick="calculate('body', 30);" />
  </body>
  <script>
    // 1.绑定点击事件
    let liList = document.querySelectorAll('nav ul li');
    for (let i = 0; i < liList.length; i++) {
      liList[i].addEventListener('click', function () {
        calculate(`#${this.className}`);
      });
    }
    // 2.计算高度，进行移动
    // @param {String} value , dom节点
    // @param {Number} speed , 每10毫秒移动的像素距离
    function calculate(value, speed = 10) {
      let nowHeight = window.pageYOffset; // 当前高度
      let newHeight = document.querySelector(value).offsetTop; // 需要移动的高度
      let poor = Math.abs(newHeight - nowHeight); // 计算两个高度差，并取正
      let add = newHeight > nowHeight ? true : false; // 判断需要移动的高度是在当前高度的前面还是后面，设置布尔值
      let setIntervalId = setInterval(function () {
        if (poor <= 0) {
          // 当高度差没有的时候清除定时器
          clearInterval(setIntervalId);
        }
        poor -= speed; // 根据速度，减去相对应的高度
        window.scrollBy(0, add ? speed : -speed); // 根据之前设置布尔值进行加减。
      }, 10);
    }
  </script>
</html>

4. 状态栏

属性	描述
status	设置窗口状态栏的文本。
defaultStatus	设置或返回窗口状态栏中的默认文本。

5. 焦点

方法	描述
focus()	把键盘焦点给予一个窗口。
blur()	把键盘焦点从顶层窗口移开。

6. 引用操作

属性	描述
top	返回最顶层的先辈窗口。
parent	返回父窗口。
length	设置或返回窗口中的框架数量。
self	返回对当前窗口的引用。
opener	返回对创建此窗口的窗口的引用。
name	设置或返回窗口的名称。
closed	返回窗口是否已被关闭。

方法	描述
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
close()	关闭浏览器窗口。

二、Screen

screen 对象包含有关客户端显示屏幕的信息。

Screen 对象属性：

属性	描述
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)。
width	返回显示器屏幕的宽度。
height	返回显示屏幕的高度。
bufferDepth	设置或返回调色板的比特深度。
colorDepth	返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI	返回显示屏幕的每英寸水平点数。
deviceYDPI	返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled	返回用户是否在显示控制面板中启用了字体平滑。
logicalXDPI	返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI	返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval	设置或返回屏幕的刷新率。

console.log(screen.height);	// 获取显示屏幕的高度
console.log(screen.availHeight); // 获取显示屏幕的高度（除window任务栏）

三、Location

location 对象包含有关当前 URL 的信息，是 Window 对象的一个部分，可通过 window.location 属性来访问。

location 对象属性:

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

href = protocol // hostname : port / pathname ? search # hash

location 对象方法：

属性	描述
assign(url)	加载新的文档。
reload()	重新加载当前文档。
replace(newUrl)	用新的文档替换当前文档。

console.log(location.href); // 返回完整的URl
console.log(location.assign("https://www.baidu.com")); // 加载新的文档

四、History

history 对象包含用户（在浏览器窗口中）访问过的 URL，是 window 对象的一部分，可通过 window.history 属性对其进行访问。

history 对象属性：

属性	描述
length	返回浏览器历史列表中的 URL 数量。

history 对象方法：

方法	描述：
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

// history.go(number|URL)
// number 可以使用负数，即退回。
history.go(1); // 加载 history 列表中的下一个 URL
history.go(2); // 加载 history 列表中的下第二个 URL
history.go(-1); // 加载 history 列表中的下一个 URL

五、Navigator

navigator 对象包含有关浏览器的信息。

navigator 对象属性：

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

navigator 对象方法：

方法	描述
javaEnabled()	规定浏览器是否启用 Java。
taintEnabled()	规定浏览器是否启用数据污点 (data tainting)。

console.log(navigator.appCodeName); // 返回浏览器的代码名。
console.log(navigator.appName); // 返回浏览器的名称。
console.log(navigator.appVersion); // 返回浏览器的平台和版本信息。

总结

以上便是对浏览器对象的全部介绍，需要了解更多可以阅读相关文档，相信里面会有你想要的。

最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我。
参考文档： w3school

俊小赞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
浏览器对象模型 BOM

文章目录前言一、是什么二、为什么三、怎么做总结前言一、是什么二、为什么三、怎么做总结以上便是对 SwiperJS 的介绍，需要了解更多可以阅读官方文档，相信里面会有你想要的。最后，如果您有更好的方法，欢迎在留言区中分享；或者实际操作中遇到什么问题均可留言或者私信我。官方文档： Swper...
复制链接

扫一扫