Loading... ## BOM对象的定义 当我们在 Web 中使用 JavaScript 的时候，BOM对象(浏览器对象模型)起着至关重要的作用。BOM 提供了很多对象，用于访问浏览器的功能。熟悉了解 BOM 对象对我们 WEB 开发有着重要的帮助，下面是我的一些理解和总结。 BOM是指浏览器对象模型，它是对一系列在浏览器环境中使用对象的统称，这些对象提供了访问浏览器的功能。 在BOM对象中，window对象是最顶层对象，在浏览器环境中它是一个Global全局对象，其它对象（如：DOM对象）对是这个对象的属性（子对象）。BOM对象是与内容无关，主要用于管理浏览器窗口及窗口之间的通讯。下面是BOM对象的组成结构：  **BOM对象可以实现：** 弹出新的浏览器窗口，移动、关闭浏览器窗口以及调整窗口的大小，页面的前进、后退等相关操作。 ## Window对象的常用属性 **window对象：** 表示浏览器中打开的窗口 | 属性名称 | 作用说明 | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | history | 有关客户访问过的URL的信息 | | location | 有关当前 URL 的信息 | | localStorage | 在浏览器中存储 key/value 对。没有过期时间。【了解更多：[localStorage](https://www.runoob.com/jsref/prop-win-localstorage.html)】 | | sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。【了解更多：[sessionStorage](https://www.runoob.com/jsref/prop-win-sessionstorage.html)】 | | screen | 只读属性，包含客户端显示屏幕的信息 | **语法：** 设定值：`window.属性名 = "属性值";` 获取值：`var info = window.属性名;` ## Window对象的常用方法 | 方法名称 | 作用说明 【💡：**已学习】** | | ---------------- | ------------------------------------------------ | | prompt() | 显示可提示用户输入的对话框 💡 | | alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 💡 | | confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 💡 | | close( ) | 关闭浏览器窗口 | | open( ) | 打开一个新的浏览器窗口，加载给定URL所指定的文档 | | setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 | | setInterval( ) | 按照指定的周期（以毫秒计）来调用函数或表达式 | | clearTimeout( ) | 用于停止执行setTimeout( )方法的函数代码 | | clearInterval( ) | 用于停止setInterval( )方法执行的函数代码 | **演示案例：** ```javascript //关闭当前浏览窗体 window.close(); //打开一个新窗口 window.open("url地址","可选。指定target属性或窗口的名称","可选。参数字符串,一个逗号分隔的项目列表",replace) /** * 指定target属性或窗口的名称: * _blank → URL加载到一个新的窗口。默认 * _parent → URL加载到父框架 * _self → URL替换当前页面 * _top → URL替换任何可加载的框架集 * name → 窗口名称 * ------------------------------------- * 参数字符串支持以下值（在主流浏览器中，很多属性现已不再被支持）： * channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器 * directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器 * fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器 * height=pixels 窗口的高度。最小值为100 * width=pixels 窗口的宽度。最小值为100 * left=pixels 该窗口的左侧位置 * top=pixels 窗口顶部的位置。 * location=yes|no|1|0 是否显示地址字段。默认值是yes * menubar=yes|no|1|0 是否显示菜单栏。默认值是yes * resizable=yes|no|1|0 是否可调整窗口大小。默认值是yes * scrollbars=yes|no|1|0 是否显示滚动条。默认值是yes * status=yes|no|1|0 是否要添加一个状态栏。默认值是yes * titlebar=yes|no|1|0 是否显示标题栏，默认值是yes * toolbar=yes|no|1|0 是否显示浏览器工具栏。默认值是yes * ------------------------------------- * replace: boolean类型，可选。 * true：URL 替换浏览历史中的当前条目。 * false： URL 在浏览历史中创建新的条目 */ //其他方法的使用方式将会在后续的演示代码中体现 ``` 如需了解更多window属性和方法，请访问：[https://www.runoob.com/jsref/obj-window.html](https://www.runoob.com/jsref/obj-window.html) ## history对象 **概念：** 保存用户上网的历史记录，可通过 `window.history`属性访问 **常见属性和方法：** <table> <tr> <th>类别</th> <th>名称</th> <th>说明</th> </tr> <tr> <td>属性</td> <td>length</td> <td>返回历史记录列表中的网址数</td> </tr> <tr> <td rowspan="3">方法</td> <td>back()</td> <td>加载 History 对象列表中的前一个URL</td> </tr> <tr> <td>forward()</td> <td>加载 History 对象列表中的下一个URL </td> </tr> <tr> <td>go()</td> <td>加载 History 对象列表中的某个具体URL</td> </tr> </table> **演示案例：** ```javascript history.back() ==> history.go(-1) //等价，相当于浏览器的后退 history.forward() ==> history.go(1) //等价，相当于浏览器的前进 //注意: go()方法的参数还可以是要访问的URL或URL的子串 ``` ## location对象 **概念：** 包含有关当前URL的信息，可通过window.location属性访问 **常见属性和方法：** <table> <tr> <th>类别</th> <th>名称</th> <th>说明</th> </tr> <tr> <td rowspan="3">属性</td> <td>host</td> <td>设置或返回主机名和当前URL的端口号</td> </tr> <tr> <td>hostname</td> <td>设置或返回当前URL的主机名</td> </tr> <tr> <td>href</td> <td>设置或返回完整的URL</td> </tr> <tr> <td rowspan="2">方法</td> <td>reload()</td> <td>重新加载当前文档</td> </tr> <tr> <td>replace()</td> <td>用新的文档替换当前文档</td> </tr> </table> ## document对象的常用方法 **概念：** document对象代表整个HTML文档 **常见方法：** | 方 法 名 称 | 说 明 | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ | | getElementById() | 返回对拥有指定id的第一个对象的引用 【返回1个元素 或 null】 | | getElementsByName() | 返回带有指定名称的对象的集合 【返回多个元素】 | | getElementsByTagName() | 返回带有指定标签名的对象的集合 【返回多个元素】 | | | | | getElementsByClassName() | 返回带有指定class名称的对象的集合 【返回多个元素】 | | querySelector() | 返回文档中匹配指定的选择器（ID选择器、类选择器、标签选择器、属性选择器等CSS中所支持的选择器形式）的第一元素 💡 | | querySelectorAll() | 返回文档中匹配的指定的选择器（ID选择器、类选择器、标签选择器、属性选择器等CSS中所支持的选择器形式）的所有元素节点列表 💡 | | write() | 向文档写文本、HTML表达式或JavaScript代码 | **演示案例：** html文件代码： ```html <div class="content"> <img src="images/pro4.jpg" alt="1+8Plus" style=""> <div class="r"> 产品名称：<span id="phone">1+8 Plus</span> <br> <input name="changephone" value="更换产品名称" type="button" onclick="changeName();" /><br> 规格选择： <input name="size" type="text" value="64G" /> <input name="size" type="text" value="128G" /> <input name="size" type="text" value="256G" /> <input name="size" type="text" value="512G" /><br> <input name="b2" type="button" value="input内容" onclick="all_input()" /> <input name="b3" type="button" value="所有规格" onclick="s_input()" /> <input name="b4" type="button" value="清空页面内容" onclick="clearAll()" /> <p id="replace"></p> </div> </div> ``` JavaScript脚本代码： ```javascript /** * 根据ID获取页面中的元素 */ function changeName() { document.getElementById("phone").innerHTML = "修改文本内容"; } /** * 根据标签名称获取页面中的元素 */ function all_input() { var aInput = document.getElementsByTagName("input"); var sStr = ""; for (var i = 0; i < aInput.length; i++) { sStr += aInput[i].value + " "; } document.getElementById("replace").innerHTML = sStr; } /** * 根据名称获取页面中的元素 */ function s_input() { var aInput = document.getElementsByName("size"); var sStr = ""; for (var i = 0; i < aInput.length; i++) { sStr += aInput[i].value + " "; } document.getElementById("replace").innerHTML = sStr; } /** * 清空页面中所有的元素 */ function clearAll() { document.write(""); } ``` 呈现效果：  <div class="tip inlineBlock warning simple"> ⚠注意： `innerHTML`几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。（获取HTML当前标签的起始和结束里面的内容） `innerText`可以获取或设置指定元素标记内的**文本的值**，从元素标记的开始到元素标记的结束（不包括HTML标记，不适用于input表单元素） </div> ## 定时函数 **超时调用：** `window.setTimeout("调用的函数", 等待的毫秒数);` 案例： ```javascript //设定定时器 var myTime = setTimeout("disptime()", 1000); //1秒(1000毫秒)后执行disptime()函数一次，执行结束后，将不再继续执行该定时器 //取消定时器 clearTimeout(myTime); //代码执行到此处时，myTime定时器将会停止 ``` **间歇调用：** `window.setInterval("调用的函数", 间隔的毫秒数);` 案例： ```javascript //定义定时器 var myTime = setInterval("disptime()", 1000); //每隔1秒(1000毫秒)执行一次disptime()函数，执行结束后，等待1000毫秒后将继续执行该定时器 //取消定时器 clearInterval(myTime); ``` <div class="tip inlineBlock error simple"> **⚠注意：** 使用清除定时器函数时，需要与定义时的定时器函数对应，clearTimeout()函数不能清除setInterval()所创建出的定时器。 </div> **演示案例:** 需求描述：页面打开时，小球上显示“开始”，用户点击小球后，小球开始向右移动，且显示文字变为“停止”，当用户再次点击小球时，小球停止移动，显示文字变为“开始”。 ```html <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <title>青鸟技术栈</title> <style> #ball { width: 100px; height: 100px; border: 5px solid #999; border-radius: 50%; position: relative; left: 0; line-height: 100px; text-align: center; font-size: 20px; font-weight: 900; box-shadow: 0px 0px 10px #999; } </style> <script> //窗体加载完毕后,执行此代码 window.onload = function () { //获取ID为ball的元素 var node = document.getElementById("ball"); //创建time变量,用于存储setInterval()返回的 ID 值 var time; //给获取的元素动态绑定一个点击事件 node.onclick = function () { var text = this.innerText; //获取文本内容 if (text == "开始") { //创建lefe变量,用于存储元素偏移量 var left = 0; //创建定时器,每隔10毫秒,累加偏移量 time = setInterval(() => { left++; //修改元素的偏移量信息 this.style.left = left + "px"; }, 10); //将文本值修改为:"停止" this.innerText = "停止" } else { //清除定时器 clearInterval(time); //将文本值修改为:"开始" this.innerText = "开始" } } } </script> </head> <body> <p id="ball">开始</p> </body> </html> ``` **案例效果演示:**  <div class="tip inlineBlock error simple"> 🧐问题：当用户第二次点击开始时，元素将从最开始的地方开始移动，如何实现在原有的位置上继续移动呢？ 【查看下方解决方案，采用**闭包**的形式或者将 `var left = 0;` 提升为全局变量】 </div> ```javascript //窗体加载完毕后,执行此代码 【html代码以及css代码无变化】 window.onload = function () { //获取ID为ball的元素 var node = document.getElementById("ball"); //动态绑定一个点击事件 node.onclick = (function () { //创建lefe变量,用于存储元素偏移量 var left = 0; //创建time变量,用于存储setInterval()返回的 ID 值 var time; return function () { var txt = this.innerText; if (txt == "开始") { //创建定时器,每隔10毫秒,累加偏移量 time = setInterval(() => { left++; this.style.left = left + "px"; }, 10); this.innerText = "停止" } else { clearInterval(time); this.innerText = "开始" } } })(); } ``` ## JavaScript内置对象 ### 常见内置对象 **Array：** 用于在单独的变量名中存储一系列的值 【📢重要】 **String：** 用于支持对字符串的处理 **Math：** 用于执行常用的数学任务，包含若干个数字常量和函数 **Date：** 用于操作日期和时间 ### Array数组 **创建数组语法：** ```javascript var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(size); //指定长度 var arr3 = new Array(element0, element1, …, elementN); //创建时给定初始值 /**************简单写法****************/ var arr1 = []; //创建一个空数组 var arr2 = [element0, element1, …, elementN]; //创建时给定初始值 ``` **演示案例：** ```javascript var arr = new Array(3); //注意，在创建数组的时候，Array大小写不能错 arr[0] = 1; arr[1] = 3; arr[2] = 5; arr[4] = 7; //请问，此段代码是否会出错？ console.log(arr); //输出结果： [1, 3, 5, 空白, 7] 说明Array允许动态维护数组长度 ``` **常见属性和方法：** <table> <tr> <th>类别</th> <th>名称</th> <th>描述</th> </tr> <tr> <td>属性</td> <td>length</td> <td>设置或返回数组中元素的数目</td> </tr> <tr> <td rowspan="4">方法</td> <td>join()</td> <td>把数组的所有元素放入一个字符串，通过逗号或指定的分隔符进行分隔</td> </tr> <tr> <td>sort()</td> <td>对数组排序</td> </tr> <tr> <td>push()</td> <td>向数组末尾添加一个或更多元素，并返回新的长度</td> </tr> <tr> <td>forEach()</td> <td>遍历数组，forEach()方法不会直接修改原始数组，但是回调函数可能会修改</td> </tr> </table> ### forEach()方法 **语法：**`array.forEach(function(currentValue, index, arr), thisValue)` **参数解释与说明：** <table> <tr> <th>参数</th> <th>描述</th> </tr> <tr> <td><em>function(currentValue, index, arr)</em></td> <td>必需。 数组中每个元素需要调用的函数。<br>函数参数:<br> currentValue：必需。指当前元素<br> index：可选。指当前元素的索引值<br> arr：可选。指当前元素所属的数组对象<br> </td> </tr> <tr> <td><em>thisValue</em></td> <td>可选。传递给函数的值一般用 "this" 值。<br> 如果这个参数为空， "undefined" 会传递给 "this" 值</td> </tr> </table> 演示案例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>青鸟技术栈</title> </head> <body> <p>点击按钮将数组中的所有值乘以特定数字。</p> <p>乘以: <input type="number" id="multiplyWith" value="10"></p> <button onclick="calc()">点我</button> <p>计算后的值: <span id="demo"></span></p> <script> /** * 定义数组 */ var numbers = [65, 44, 12, 4]; /** * 执行计算 */ function calc(){ var demo = document.getElementById("demo"); numbers.forEach((item, index, arr)=>{ arr[index] = item * document.getElementById("multiplyWith").value; demo.innerHTML = numbers; }) } </script> </body> </html> ``` **演示效果：**  如需了解更多Array对象的属性和方法，请访问：[https://www.runoob.com/jsref/jsref-obj-array.html](https://www.runoob.com/jsref/jsref-obj-array.html) ### Date日期 **概念：** Date 对象用于处理日期与时间。 **创建 Date 对象：** **`new Date()`** 以下四种方法同样可以创建 Date 对象： ```javascript var d = new Date(); var d = new Date(milliseconds); // 参数为毫秒 var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); /** * 参数解释： * milliseconds 参数是一个 Unix 时间戳（Unix Time Stamp），它是一个整数值，表示自 1970 年 1 月 1 日 00:00:00 UTC（the Unix epoch）以来的毫秒数。 * dateString 参数表示日期的字符串值。 * year, month, day, hours, minutes, seconds, milliseconds 分别表示年、月、日、时、分、秒、毫秒。 */ ``` **常用方法：** | 方 法 | 说 明 | | -------------------- | ------------------------------------------------------ | | getDate() | 返回Date对象的一个月中的每一天，其值介于1～31之间 | | getDay() | 返回Date对象的星期中的每一天，其值介于0～6之间 | | getHours() | 返回Date对象的小时数，其值介于0～23之间 | | getMinutes() | 返回Date对象的分钟数，其值介于0～59之间 | | getSeconds() | 返回Date对象的秒数，其值介于0～59之间 | | getMonth() | 返回Date对象的月份，其值介于0～11之间 | | getFullYear() | 返回Date对象的年份，其值为4位数 | | getTime() | 返回自某一时刻（1970年1月1日）以来的毫秒数 | | toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 | | toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 | | toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 | 如需了解更多Date对象的属性和方法，请访问：[https://www.runoob.com/jsref/jsref-obj-date.html](https://www.runoob.com/jsref/jsref-obj-date.html) ### Math对象 **概念：** Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。 **常见属性：** | 属性 | 描述 | | :--- | :-------------------------- | | PI | 返回圆周率（约等于3.14159） | **常见方法：** | 方法 | 说 明 | 示例 | | -------- | -------------------------- | ------------------------------------------------- | | ceil() | 对参数进行上舍入 | Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 | | floor() | 对参数进行下舍入 | Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 | | round() | 把参数四舍五入为最接近的数 | Math.round(25.5);返回26 Math.round(-25.5);返回-26 | | random() | 返回0~1之间的随机数 | Math.random(); 例如：0.6273608814137365 | **案例演示：** ```javascript var num = Math.floor(Math.random()*100+1); //返回1～100（含1和100）之间的整数 ``` 如需了解更多Math对象的属性和方法，请访问：[https://www.runoob.com/jsref/jsref-obj-math.html](https://www.runoob.com/jsref/jsref-obj-math.html) --- <div class="tip inlineBlock info simple"> ▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之DOM操作](https://jbea.cn/archives/535.html) </div> 最后修改：2022 年 09 月 05 日 © 允许规范转载 赞 1 都滑到这里了，不点赞再走！？
