JavaScript【九】JavaScript BOM(浏览器对象模型)

news2024/11/19 6:33:55

文章目录

  • 🌟前言
  • 🌟 Bom(浏览器对象模型)
  • 🌟window对象:
    • 🌟属性:
    • 🌟 方法:
    • 🌟 获取元素:
    • 🌟 添加点击事件:
    • 🌟 获取表单的值:用来连接js和html
    • 🌟 设置普通元素:
  • 🌟 console对象:
    • 🌟console对象方法
      • 🌟console.log
      • 🌟 console.time
      • 🌟console.table
  • 🌟 location 对象
    • 🌟 location属性
    • 🌟 location方法
  • 🌟 history 对象
    • 🌟 history 对象属性
    • 🌟 history 对象方法
    • 🌟 总结
  • 🌟 Navigator 对象
    • 🌟 Navigator的属性
    • 🌟 检测浏览器
    • 🌟 Vibration(震动)
    • 🌟 用途
  • 🌟写在最后

在这里插入图片描述

🌟前言

哈喽小伙伴们,本文将收录在JavaScript【前端童子功】这个专栏里;这个专栏里边会收录一些JavaScript的基础知识和项目实战;希望大家可以多多支持,你们的支持就是我创作的动力;让我们一起来看看吧🤘

🌟 Bom(浏览器对象模型)

BOM是浏览器对象模型,主要用于管理窗口与窗口之间的通信,核心对象是window

浏览器对象模型(Browser Object Model,简称 BOM)是 JavaScript 的组成部分之一,BOM 赋予了 JavaScript 程序与浏览器交互的能力。

window 对象是 BOM 的核心,用来表示当前浏览器窗口,其中提供了一系列用来操作或访问浏览器的方法和属性。另外,JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象,甚至我们前面介绍的 document 对象也属于 window 对象。

🌟window对象:

🌟属性:

  • innerWidth 浏览器的宽度
  • innerHright 浏览器的高度
  • screen.width 屏幕分辨率的宽度
  • screen.height 屏幕分辨率的高度

🌟 方法:

  • alert() 弹出框
  • prompt() 输入框
  • comfirm() 带有确定取消按钮的对会话框。返回布尔值
  • close() 关闭浏览器
  • open(url) 打开新窗口
  • srtInterval(回调函数,时间ms) 间隔一定的时间重复不断的执行回调函数
  • clearInterval(id) 清除时间函数
  • setTimeout(回调函数,时间ms) 间隔一定的时间只执行一次回调函数
  • clearTimeout(id) 清除时间函数

🌟 获取元素:

document.querySelector(选择器)

🌟 添加点击事件:

元素.onclick=function(){

}

🌟 获取表单的值:用来连接js和html

表单元素.value

🌟 设置普通元素:

元素.innerHTML

🌟 console对象:

浏览器控制台。属于window对象的子对象。window.console

🌟console对象方法

属性参数返回值功能兼容性
logmsgundefined向 Web 控制台输出一条消息全部
dirobjectundefined打印出对象的所有属性和属性值>ie8
errormsgundefined向 Web 控制台输出一条错误消息>ie7
warnmsgundefined向 Web 控制台输出一条警告信息>ie7
timetimerNameundefined启动一个计时器(timer)来跟踪某一个操作的占用时长>ie10
timeEndtimerNameundefined停止一个通过 console.time() 启动的计时器>ie10
tabletabledata, tablecolumnsundefined用于在控制台输出表格信息。>ie12

🌟console.log

console.log() 方法用于在控制台输出信息。

该方法对于开发过程进行测试很有帮助。

提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台)。

语法

console.log(message)

参数说明

参数类型描述
messageString 或 Object必需,控制台上要显示的信息

🌟 console.time

console.time()console.timeEnd()这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。

console.time方法是开始计算时间,console.timeEnd是停止计时,输出脚本执行的时间:

// 启动计时器
console.time('testForEach');
// (测试用代码)
// 停止计时,输出时间
console.timeEnd('testForEach');

// testForEach 4522.303ms

参数说明

参数类型描述
labelString可选,用于给计算器设置标签。
tablecolumnsArray可选,一个数组,表格标题栏的名称。

这两个方法中都可以传入一个参数,作为计时器的名称,它的作用是在代码并行运行时分清楚各个计时器。所以两个方法的参数必须相同

console.timeEnd的调用会立即输出执行总共消耗的时间,单位是毫秒

for 循环测试

var i;
console.time("for 循环测试");
for (i = 0; i < 100000; i++) {
  // 代码部分
}
console.timeEnd("for 循环测试");

测试ajax请求所需时间:

console.time("ajax请求时间")
$.ajax({
  url:"https://zhihu-daily.leanapp.cn/api/v1/last-stories",
  success(res){
    console.timeEnd("ajax请求时间")
  }
})
//  ajax请求时间: 189.089111328125ms

🌟console.table

console.table() 方法用于在控制台输出表格信息。

第一个参数是必需的,且对象类型需要是对象或数组,对应的数据会填充到表格中。

提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台)。

语法

console.table(tabledata, tablecolumns)

参数说明

参数类型描述
tabledataArray 或 Object必需,填充到表格中的数据。
tablecolumnsArray可选,一个数组,表格标题栏的名称。
console.table(["king", "lilei", "susan"]);

🌟 location 对象

JavaScript location 对象中包含了有关当前页面链接(URL)的信息,例如当前页面的完整 URL、端口号等,我们可以通过 window 对象中的 location 属性来获取 location 对象。由于 window 对象是一个全局对象,因此在使用window.location时可以省略 window 前缀,例如window.location.href可以简写为location.href。

🌟 location属性

当前文档的地址对象。也是window的子对象,window.location

一个完整的url 包括9个部分 协议://用户名:密码@域名:端口/路径;参数?查询#片段 不过几乎没有哪个url包含这些所有组件,最重要的三部分是协议,域名和路径:

以该url为例:

http://www.baidu.com:80/javascript/?file=001/BOM/README.md/#location对象
协议        域名    |端口号| 路径    |查询字符串|              |哈希|
属性描述可读写性结果
href包含整个URL的一个字符串读写http://www.baidu.com:80/javascript/001/BOM/?file=README.md#location对象
origin包含页面来源的域名的标准形式字符串只读http://www.baidu.com:80
protocol包含URL对应协议的字符串,最后有一个":"只读http:
host包含了域名和端口号的字符串,如没有端口号则只有域名只读www.baidu.com:80
hostname包含URL域名的字符串只读www.baidu.com
port包含端口号的字符串只读80
pathname包含URL中路径部分的字符串,开头有一个"/"只读/javascript/001/BOM/
search包含URL参数(查询字符串)的字符串,开头有一个“?”只读?file=README.md
hash包含块标识符的字符串,开头有一个"#"只读#location对象

🌟 location方法

属性参数返回值功能兼容性
assignurlundefined加载给定URL的内容资源全部
reloadBooleanundefined重新加载来自当前 URL的资源(刷新本页)全部
replaceurlundefined用给定的URL替换掉当前的资源全部
toString包含整个URL的字符串获取本窗口的url,将地址转换成字符串(只能获取,无法修改,读取效果与location.href相同)全部

location.assignlocation.replace的区别: replace()替换的新页面不会被保存在会话的历史 History中,这意味着用户将不能用后退按钮转到该页面

location.reload 的参数:

  • false或未写参数:检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
  • true:那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

🌟 history 对象

history 对象是 windows子对象。history 接口允许操作浏览器的曾经在标签页或者框架里访问的历史记录,这些方法和事件能够帮助我们优雅的实现单页面应用,同时又不会影响搜索引擎对我们网站的搜录。现在所有的现代浏览器都已经支持这些新的特性,并且涌现出大量的路由框架,都内置集成了这些新的特性。比方说著名的vue框架里面的 vue-route等路由框架。

🌟 history 对象属性

属性描述可读写性兼容性
length包含当前页面在内的历史记录个数只读全部

🌟 history 对象方法

属性参数返回值功能兼容性
backundefined加载 history 列表中的前一个 URL(等价于history.go(-1))全部
forwardundefined加载 history 列表中的下一个 URL(等价于history.go(1))全部
gonumberundefined通过当前页面的相对位置从浏览器历史记录加载页面全部
pushStatestate, title, urlundefined无刷新的向浏览器 历史最前方 加入一条记录>ie9
replaceStatestate, title, urlundefined无刷新的使用一条记录替换当前的历史记录>ie9
  • history.go方法
    • history.go(-1): 加载上一个历史记录
    • history.go(1): 加载下一个历史记录
    • history.go(0) 或不传参: 刷新本页 类似地,你可以传递参数值2并向前移动2个页面,等等。
      如果已经没有页面,该方法不会报错,页面不会发生任何变化; 如果参数不是整数,页面也不会发生任何变化。
  • history.pushStatehistory.replaceState 方法有3个参数
    • 状态对象state —— 需要保存的数据,这个数据在触发popstate事件时保存在event.state
    • 标题title —— 浏览器目前不识别该参数,传入一个空字符串
    • 地址URL —— 需要更改的url地址

window.onpopstate事件: 浏览器点击前进后退(或者在js中调用history.back()history.forward()history.go()方法)时触发的事件。event.state可以获取当前url下设置的state

注:pushStatereplaceState方法只能加载同源下的资url源(存在跨域问题)

window.onpopstate = function (event) {
    console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({ page: 1 }, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({ page: 2 }, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({ page: 3 }, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 输出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 输出 "location: http://example.com/example.html, state: null
history.go(2);  // 输出 "location: http://example.com/example.html?page=3, state: {"page":3}

🌟 总结

  • js刷新本页面方法汇总:
    1. history.go(0)
    2. location.reload()
  • js跳转页面方法汇总:
    1. window.open(url)
    2. location.href = “”
    3. location.assign(url)

🌟 Navigator 对象

Navigator 对象包含有关浏览器的信息,是window对象的属性,中文是"导航器"的意思

🌟 Navigator的属性

属性描述
language返回当前浏览器的语言“zh-CN”、"en"等
cookieEnabled返回指明浏览器中是否启用 cookie 的布尔值true,false
onLine返回指明系统是否处于联网状态的布尔值true,false
platform返回运行浏览器的操作系统平台。“Win32”, “Linux i686”, “MacPPC”, “MacIntel”, 等
userAgent返回由客户机发送服务器的 user-agent 头部的值userAgent: “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36”

🌟 检测浏览器

检测浏览器版本:

 function getExplorerInfo() {
    var explorer = window.navigator.userAgent.toLowerCase();
    //ie
    if (explorer.indexOf("msie") >= 0) {
        var ver = explorer.match(/msie ([\d.]+)/)[1];
        return { type: "IE", version: ver };
    }
    else if (explorer.indexOf("edge") >= 0) {
        var ver = explorer.match(/edge\/([\d.]+)/)[1];
        return { type: "Edge", version: ver };
    }
    //firefox
    else if (explorer.indexOf("firefox") >= 0) {
        var ver = explorer.match(/firefox\/([\d.]+)/)[1];
        return { type: "Firefox", version: ver };
    }
    //Chrome
    else if (explorer.indexOf("chrome") >= 0) {
        var ver = explorer.match(/chrome\/([\d.]+)/)[1];
        return { type: "Chrome", version: ver };
    }
    //Opera
    else if (explorer.indexOf("opera") >= 0) {
        var ver = explorer.match(/opera.([\d.]+)/)[1];
        return { type: "Opera", version: ver };
    }
    //Safari
    else if (explorer.indexOf("safari") >= 0) {
        var ver = explorer.match(/safari\/([\d.]+)/)[1];
        return { type: "Safari", version: ver };
    }
}

检测浏览器是否为PC端

function getExplorerType(){
    var explorer = window.navigator.userAgent.toLowerCase();
    return explorer.indexOf('mobile') === -1
}

结果:true PC , false 为 Mobile

检测当前网络状态

//浏览器在线
window.ononline = function(){
    console.log(window.navigator.onLine)
}

//浏览器离线
window.onoffline = function(){
    console.log(window.navigator.onLine)
}

h5相机拍照

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script>
            window.addEventListener("DOMContentLoaded", function () {
                var canvas = document.getElementById("canvas"),
                    context = canvas.getContext("2d"),
                    video = document.getElementById("video"),
                    videoObj = {
                        "video": true
                    },
                    errBack = function (error) {
                        console.log("Video capture error: ", error.code);
                    };
                $("#snap").click(function () {
                    context.drawImage(video, 0, 0, 330, 250);
                })
                if (navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia(videoObj)
                    .then(function (stream) {
                        video.srcObject = stream;
                        video.play();
                    })
                    .catch(errBack)
                } else if (navigator.webkitGetUserMedia) {
                    navigator.webkitGetUserMedia(videoObj, function (stream) {
                        video.src = window.webkitURL.createObjectURL(stream);
                        video.play();
                    }, errBack);
                }
            }, false);
        </script>
    </head>    
    <body>
        <div id="contentHolder">
            <video id="video" width="320" height="320" autoplay></video>
            <input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" />
            <canvas style="" id="canvas" width="320" height="320"></canvas>
        </div>
    </body>
</html>

🌟 Vibration(震动)

// 可以传入一个大于0的数字,表示让手机震动相应的时间长度,单位为ms
navigator.vibrate(100)

// 也可以传入一个包含数字的数组,比如下面这样就是代表震动300ms,暂停200ms,震动100ms,暂停400ms,震动100ms
navigator.vibrate([300,200,100,400,100])

// 也可以传入0或者一个全是0的数组,表示暂停震动
navigator.vibrate(0)

🌟 用途

使手机震动,用来给用户一个提示,例如说数据校验失败。

🌟写在最后

更多JavaScript知识以及API请大家持续关注,尽请期待。各位小伙伴让我们 let’s be prepared at all times!

✨原创不易,还希望各位大佬支持一下!
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/419096.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大数据Flink进阶(二十):Flink细粒度资源管理

文章目录 Flink细粒度资源管理 一、细粒度资源管理介绍 二、细粒度资源适用场景

关于合金电阻

合金电阻是一种具有高精度、高稳定性和高温度特性的电阻器件&#xff0c;广泛应用于各种电子设备中。选型合适的合金电阻并进行合理的设计&#xff0c;可以有效地提高电路的性能和可靠性。本文将从合金电阻的基本原理、选型方法及设计要点等方面进行详细介绍。 一、合金电阻的基…

简单认识下with和上下文管理器

with 对于系统资源如文件、数据库连接、socket&#xff0c;应用程序打开这些资源并执行完业务逻辑之后&#xff0c;必须关闭&#xff08;断开&#xff09;该资源。系统允许打开的最大文件数量是有限的&#xff0c;如果我们打开文件后没有及时关闭&#xff0c;极端情况下会出现…

21天学会C++:Day2----命名空间的那些事儿

CSDN的uu们&#xff0c;大家好。这里是C入门的第二讲。 座右铭&#xff1a;前路坎坷&#xff0c;披荆斩棘&#xff0c;扶摇直上。 博客主页&#xff1a; 姬如祎 收录专栏&#xff1a;C专题 目录 1. 为什么要有命名空间 2. 命名空间的定义 3. 访问命名空间域中成员的三种方…

基于Java+SpringBoot+vue的人职匹配推荐系统设计与实现【源码(完整源码请私聊)+论文+演示视频+包运行成功】

博主介绍&#xff1a;专注于Java技术领域和毕业项目实战 &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不然下次找不到哟 Java项目精品实战案例&#xff08;300套&#xff09; 目录 一、效果演示 二、…

virtualbox如何配网

配网搞了一天&#xff01;&#xff01;&#xff01; 百度到的所有教程都是垃圾&#xff01;&#xff01; 就没有一个写全的&#xff01;&#xff01;写明白怎么配的&#xff01;&#xff01;&#xff01; 我自己来&#xff01;&#xff01;&#xff01;不会配的看我&#xf…

浅析 Queue 和 Deque

终于开始了 LeetCode 的练习&#xff0c;看到 102. 二叉树的层序遍历 有种解法利用到了队列&#xff0c;想着挨个看看基础队列中的方法&#xff0c;便有了这篇文章。 基于 Java 对 Queue 以及 Deque&#xff08;double ended queue&#xff09; 实现进行学习介绍&#xff0c;JD…

Vue之代码传送(teleport)

代码传送是啥 在Vue中&#xff0c;代码传送就是将某部分的代码从Vue的template标签下传送到指定的地方&#xff0c;这个地方通常是body标签下。在使用Vue编写界面时&#xff0c;我们都是在html的Body中写一个div&#xff0c;然后指定一个id&#xff0c;然后在Vue的实例中的tem…

2023春招offer收割机,阿里架构师耗时半月写的《Java面试手册》

程序猿在世人眼里已经成为高薪、为人忠诚的代名词。 然而&#xff0c;小编要说的是&#xff0c;不是所有的程序员工资都是一样的。 世人所不知的是同为程序猿&#xff0c;薪资的差别还是很大的。 众所周知&#xff0c;目前互联网行业是众多行业中薪资待遇最好的&#xff0c;包…

Java语法理论和面经杂疑篇《九. 网络编程》

目录 1. 网络编程概述 1.1 软件架构 1.2 网络基础 2. 网络通信要素 2.1 如何实现网络中的主机互相通信 2.2 通信要素一&#xff1a;IP地址和域名 2.2.1 IP地址 2.2.2 域名 2.3 通信要素二&#xff1a;端口号 2.4 通信要素三&#xff1a;网络通信协议 2. 谈传输层协议…

时间序列教程 四、自回归和移动平均模型

一、本节目标 了解自相关函数(ACF)。 了解部分自相关函数(PACF)。 了解自回归和移动平均模型是如何工作的。 使用Python来拟合自相关模型。 二、ACF和PACF 1、自相关函数(ACF) 测量信号与自身延迟数据的相关性。 它用于发现信号中的重复模式,例如周期性信号的存…

Spring相关概念

Spring家族 官网&#xff1a;Spring | Home&#xff0c;从官网我们可以大概了解到&#xff1a; Spring能做什么:用以开发web、微服务以及分布式系统等,光这三块就已经占了JavaEE开发 的九成多。Spring并不是单一的一个技术&#xff0c;而是一个大家族&#xff0c;可以从官网的…

.NET基础加强第七课--文件流

序列化 JSON序列化 例子 using Nancy.Json; Person p1 new Person(); p1.Name “zs”; // json 序列化 JavaScriptSerializer javaScriptSerializer new JavaScriptSerializer(); string json javaScriptSerializer.Serialize(p1); Console.WriteLine(json); Console.…

linux-创建子进程的过程与原理(fork讲解)

我们知道&#xff0c;子进程可以被命令行创建&#xff0c;被fork函数创建&#xff0c;但是子进程创建了什么呢&#xff0c;是完全拷贝父进程函数&#xff1f;还是继承父进程数据呢&#xff1f; 首先我们要知道&#xff0c;进程的构成&#xff1a;进程内核数据结构可运行程序载…

二维差分【算法推导,图文讲解清晰】

798. 差分矩阵 - AcWing题库 算法推导 二维差分相对一维差分会复杂一点&#xff0c;而且还要结合二维前缀和的一些细节处理 A、B数组角色问题 在差分思想中&#xff0c;构造并不是那么重要&#xff0c;而是其中A、B数组的角色。 我们假想存在一个数组B&#xff0c;输入的A…

论文阅读《NeRF-Supervised Deep Stereo》

论文地址&#xff1a;https://arxiv.org/pdf/2303.17603.pdf 源码地址&#xff1a;https://nerfstereo.github.io/ 概述 针对深度估计的标签数据难以获取&#xff0c;自监督方法在病态&#xff08;遮挡、非朗伯面&#xff09;区域的表现差&#xff0c;跨域泛化能力弱的问题&…

【jvm系列-06】深入理解对象的实例化、内存布局和访问定位

JVM系列整体栏目 内容链接地址【一】初识虚拟机与java虚拟机https://blog.csdn.net/zhenghuishengq/article/details/129544460【二】jvm的类加载子系统以及jclasslib的基本使用https://blog.csdn.net/zhenghuishengq/article/details/129610963【三】运行时私有区域之虚拟机栈…

Vue——组件基础

目录 定义一个组件​ 使用组件​ 传递 props​ 监听事件​ 通过插槽来分配内容​ 动态组件​ DOM 模板解析注意事项​ 大小写区分​ 闭合标签​ 元素位置限制​ 组件允许我们将 UI 划分为独立的、可重用的部分&#xff0c;并且可以对每个部分进行单独的思考。在实际应…

Learning to summarize from human feedback导读(1)

总结&#xff1a; &#xff08;1&#xff09;生成摘要等模型&#xff0c;虽然有评估方法&#xff0c;但是人类总结的质量依旧难以相比 总结&#xff1a; &#xff08;1&#xff09;在各种NLP任务中&#xff0c;大规模语言模型的预训练以及取得了很高的性能 &#xff08;2&am…

PHP快速入门09-正则相关,附一定要学会的20个高频使用案例

文章目录前言一、正则表达式介绍二、正则高频案例20个2.1 检查字符串是否以字母开头2.2 检查字符串是否以数字开头2.3 检查字符串是否包含特定字符2.4 检查字符串是否以特定字符结尾2.5 检查字符串是否为纯数字2.6 检查字符串是否为纯字母2.7 检查字符串是否为有效的电子邮件地…