JavaScript的三大组成部分之BOM

是辉辉啦

已于 2023-06-17 13:52:06 修改

阅读量459

点赞数 3

分类专栏：前端文章标签： javascript 前端 html java

于 2023-03-20 11:48:14 首次发布

本文链接：https://blog.csdn.net/m0_74315688/article/details/129663871

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了BOM的基本概念，包括它是浏览器对象模型，核心对象是window，并详细讲解了window对象的属性如location和screen，以及事件如窗口加载事件。此外，还讨论了Math对象的数学运算，Date对象的日期处理，和字符串对象的各种方法，如截取和替换等。

摘要由CSDN通过智能技术生成

一.BOM基本介绍

1.基本概念：

①BOM全称 Browser Object Model 意为浏览器对象模型
②它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
③BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分

2.BOM 的组成

①window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
②document 对象，文档对象；
③location 对象，浏览器当前URL信息；
④navigator 对象，浏览器本身信息；
⑤screen 对象，客户端屏幕信息；
⑥history 对象，浏览器访问历史信息；

3.window对象

1.基本概念

①是浏览器的顶级对象
②是 JS 访问浏览器窗口的一个接口
③是一个全局对象，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
在调用的时候可以省略 window，前面的博客--《JavaScript的基础入门》中所提及到的对话框都属于 window 对象方法，例如 alert()、prompt() 等。

2.常用属性

（1）location

location.href：获取或者设置整个 URL 
location.href='目的路径'（设置自己想要跳转的页面，便会自动跳转过去）
location.reload()：    重新加载当前页面，相当于刷新，如果参数为 true，强制刷新

（2）screen

 screen.width:返回显示器屏幕的宽度
 screen.height:返回显示器屏幕的高度

（3）history:与浏览器的历史记录进行交互，该对象包含用户访问过的 URL

back()       可以后退
forward()    前进功能
go(n)        前进后退功能，参数如果是1，前进1个页面，如果是-1，后退一个页面

3.常用事件

（1）.窗口加载事件
①.前言
a.在JS的执行机制中，代码的执行是与Java类似的，按照从上往下的顺序执行的，所以如果我们要给一个按钮添加点击事件，只能先设置按钮，然后获得按钮在进行操作

   <body>
                    <button class="button">按钮1</button>
                    <button class="button">按钮2</button>
                        <script>
                      var btn = document.getElementsByClassName('button');
                            btn.onclick = function(){
                                alert('耶，恭喜您获得好运')
                            }
                        </script>
                    </body>

b.那如果我们想要把绑定的点击事件放置到页面的前面，很明显按照上述方法是无法操作的。那这个时候就可以通过窗口加载事件来完成想达成的效果

②.加载事件的基本概念
加载事件的方法为 window.onload
当文档内容完全加载完成会触发该事件
window.onload = function(){}
window.addEventListener("load",function(){});
注意：window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准（如果使用 addEventListener 则没有限制）

（2）有关鼠标的事件

①onmouseover:鼠标移入到某个元素上面触发
②onmouseout：鼠标移出某个元素上面触发
③onclick：鼠标移出某个元素上面触发
④onchange：域的内容改变时触发
（关于鼠标事件的详细可见之前的博客--《JavaScript的基础入门》）

4.常用方法

（1） open()：可以查找一个已经存在或者新建的浏览器窗口。
window.open([URL], [窗口名称], [参数字符串])
URL：在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档
窗口名称：被打开窗口的方式（这里列举几个常见的）

①_blank：在新窗口显示目标网页
②_top：框架网页中在上部窗口中显示目标网页
③_self：在当前窗口显示目标网页

参数字符串：设置窗口参数，各参数用逗号隔开（宽高等）

例子
需求：打开http://www.baidu.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，
      有滚动条窗口：


  <script type="text/javascript">
     window.open('http://www.baidu.com','_blank','width=300,
     height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
                            </script>

（2）close():关闭窗口

 window.close();//关闭本窗口
 <窗口对象>.close();//关闭指定窗口

（3）与定时器有关的事件

 ①setTimeout:在指定毫秒数之后调用函数或者计算表达式
             window.setTimeout(调用函数 [,延迟的毫秒数]);
             window 可以省略
             延迟的毫秒数省略默认为 0，如果写必须是毫秒

 ②clearTimeout：清除由setTimeout（）方法设置的timeout
                window.clearTimeout()；

 ③setInterval：按照所指定的周期（所定义的毫秒数）来调用函数或者表达式
               window.setInterval(回调函数 [,间隔毫秒数]);
               window 可以省略
               间隔的毫秒数省略默认也是 0，如果写的话，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
               第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

 ④clearInterval:清除结束定时器的循环调用函数
                window.clearInterval(intervalID)  取消了先前调用 setInterval() 建立的定时器
                里面的参数就是定时器标识符

例子：发送短信的倒计时

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script>
   //定义初始的时间
   window.onload= function() {
    var time = 10;
    var bbtn = document.getElementById("btn");
   console.log(bbtn);
    bbtn.onclick = function() {
     bbtn.disabled = true; //设置按钮不能重复按动
     time = 10; //倒数计时结束后，又变成10s；
     var jsq = setInterval(
     function() {
      time--;
      bbtn.innerHTML = time + "s";
      if (time == 0) {
       bbtn.disabled = false;
       bbtn.clearInterval(jsq);
       bbtn.innerHTML = "发送短信";
      }
     },1000)
   
    }
   }
  </script>
 </head>
 <body>
  <input type="text">
  <button id="btn">发送短信</button>
  



 </body>
</html>

二.内置对象

1.Math数学对象

console.log(Math.PI);
console.log(Math.max(1,2,3,45)); // 取多个值中的最大数
Math.min(1,2,3);
Math.floor(3.4); // 向下取整 3
Math.ceil(3.4); // 向上取整 4
Math.round(1.1); // 四舍五入
Math.abs(-3); // 取绝对值 3
Math.pow(10,2) // 10的2次方
Math.sqrt(100) // 开平方
Math.random(); // 生成0~1之间的随机小数 [0，1) === 左闭右开区间

2.Date 日期对象

var date = new Date();
console.log(date); // Wed Apr 21 2021 19:34:46 GMT+0800
date.getFullYear(); // 返回当前年份
date.getMonth(); // 返回的月份小1月
date.getDate(); // 返回几号
date.getDay(); // 返回周几，周一是1，周日是0
date.getHours();
date.getMinutes();
date.getSeconds();
// 获得总毫秒数从1970年1月1日（时间戳）
date.valueOf();
date.getTime();
// H5 浏览器可以直接用 date 中的方法获取时间戳
var now = Date.now()
// 不支持 HTML5 的浏览器可以使用下面的方式获得时间戳
var now = +new Date()

3.字符串对象

①indexOf(), lastIndexOf() 查找字符位置（和数组类似，可以将字符串也看做数组，第一个字符索引为0）
返回值：
查找的字符串 searchValue 的第一次出现的索引，如果没有找到，则返回 -1

②charAt() 按索引返回字符串
var str = 'andy';
str.charAt(3); // 返回index位置的字符
str.charCodeAt(3); // 返回 index 位置的 ASCII 码
str[3]; // 获取指定位置处字符

③concat() 拼接字符串
var str1 = "a";
var str1 = "a";
var str2 = "b";
var str3 = "c";
var str4 = str1.concat(str2, str3);
console.log(str4);
// 输出结果
abc

④substr() 按长度截取字符串
substr(start, length); // 从start索引位置开始，length 为取的个数，不输入 length，截取到末尾

⑤substring() 截取字符串
substring 提取从 indexStart 到 indexEnd（不包括）之间的字符。

⑥slice() 截取字符串
slice(start, end); // 从 start 位置开始，截取到 end 位置（不包括end）。不输入 end 默认截取到结尾

substring()与slice()的不同
slice() 方法也可以使用在数组中，并且支持负数索引
substring() 只可以在字符串中使用，不支持负数索引

关于字符串的截取
如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。

⑦replace() 替换字符串
obj.replace('原始内容', '替换后的内容')；
字符串替换只替换第一个匹配项目
批量替换需要使用正则

⑧toUpperCase(), toLowerCase() 大小写转换
与JAVA用法类似