JavaScript学习：内置对象，DOM模型，BOM模型，事件编程

JavaScript学习：内置对象，DOM模型，BOM模型，事件编程

一，内置对象

内置对象就是JavaScript语言本身自带的一些功能对象，里面提供了很多常用的属性和方法。这些对象可以直接在代码中使用，而不需要引用其他文件或库。

1.JavaScript三大对象

JavaScript 有3大对象，分别是本地对象、内置对象和宿主对象

1.1JavaScript 三大对象关系：

• 宿主对象（DOM、BOM、自定义）

• 内置对象

• • 本地对象（Array、String、Date等需new出来的）
  • 标准内置对象（Global、Math、JSON）

1.2三大对象定义：

• （1）本地对象 ( native object )
  • 由 ECMAScript 实现提供并独立于宿主环境的任何对象。
  • 本地对象可以理解为 ECMA-262 定义的类（引用类型）。
  • 这些引用类型在运行过程中需要通过new来创建所需的实例对象。
  • 包含：Object、String、Array、Date、Number、RegExp、Function、Boolean、Error等。
• （2）内置对象 ( built-in object )
  • 由 ECMAScript 实现提供并独立于宿主环境的，在程序开始执行就出现的对象。
  • 本身就是实例化对象，开发者无需再去实例化。
  • 所有内置对象都是本地对象的子集。
  • 包含：Global和Math。
  • ECMAScript5中增添了JSON这个存在于全局的内置对象。
• （3）宿主对象 ( host object )
  • 由 ECMAScript 实现的宿主环境（如某浏览器）提供的对象（如由浏览器提供的 Window 和 Document），包含两大类，一个是宿主提供，一个是自定义类对象。
  • 所有非本地对象都属于宿主对象。
  • 对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，浏览器对象有很多，如Window和Document等。
  • 包含：DOM 、BOM和自定义对象。

---

2.查询文档

由于内置对象的成员众多，我们要学会查询文档。常用的，我们会使用MDN文档： JavaScript 标准内置对象 - JavaScript | MDN (mozilla.org)

下面有几个常用的内置对象：

• Math 对象
• Date 对象
• Array 对象
• String 对象
• Number 对象
• Boolean 对象

---

3.常用Math对象

Math.PI ：属性，返回圆周率。Math.PI 详情

Math.random() ： 生成0~1间的随机数(>0)。Math.random() 详情

Math.abs() ：取绝对值。 Math.abs() 详情

Math.ceil() ： 向上取整。Math.ceil() 详情

Math.floor() ：向下取整。Math.floor() 详情

Math.round() ：四舍五入取整。Math.round() 详情

Math.max(x,y) ： 取x、y中较大的那个。Math.max() 详情

Math.min(x,y) ： 取x、y中较小的那个。Math.min() 详情

Math.pow(x,y) ：求x的y次幂的值。Math.pow() 详情

Math.sqrt() ： 求平方根。Math.sqrt() 详情

---

4.常用Date对象

（1）创建日期对象：

Date是一个构造函数，需要通过new来调用，返回一个日期对象。

//获取当前时间，UTC世界时间，距1970年1月1日（世界标准时间）起的毫秒数
let now = new Date();

通过console.dir()可以打印对象的原始形式：

console.dir(now);

(2)Date构造函数的参数：

通过new Date() 创建的是当前时间的日期对象，可以给Date() 函数传入不同类型的参数，获取指定时间的日期对象。

• 传入数值，日期的毫秒数。
• 传入字符串，日期格式的字符串。
• 传入年月日时分秒的数值。

let day1 = new Date(123456);
let day2 = new Date('1991-1-1');
let day3 = new Date(1991, 1, 1);

(3)获取日期的指定部分：

getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

---

5.常用Array对象

（1）创建数组对象：

创建数组对象有两种方法：

// 1.使用构造函数创建数组对象
let arr1 = new Array();

// 2.使用数组字面量
let arr2 = [];

(2)数组常用属性：

// 1.获取数组元素数量
array.length

(3)数组常用方法：

// 1.push() ：可以在数组的末尾添加数据。返回值:  数组的长度。
数组名.push(数据)
// 2.pop() ：可以在数组的末尾删除数据。数组中最后一个元素删除且length-1。
数组名.pop()

//案例：
var arr = [10,20,30];
res1 = arr.push(40);
console.log(arr);   // [10,20,30,40]
console.log(res1);   // 4

res2 = arr.pop();
console.log(arr);  // [10,20,30]
console.log(res2);  // 40

// 3.unshift() ： 可以在数组的头部添加数据。返回值：数组的长度。
数组名.unshift(数据)
// 4.shift() ：可以在头部删除一个数据。返回值：删除的那个数据。
数组名.shift()

//案例：
 var arr = [10, 20, 30]
 res1 = arr.unshift(40)
 console.log(arr); // [40,10,20,30]
 console.log(res1); // 4

res2 = arr.shift();
console.log(arr); // [10,20,30]
console.log(res2); // 40

// 5.reverse() ：可以用来翻转数组。返回值: 翻转好的数组
数组名.reverse()
// 6.sort() ：
语法一: 数组名.sort()会排序 会按照位排序。
语法二: 数组名.sort(function (a,b) {return a-b})会正序排列。
语法三: 数组名.sort(function (a,b) {return b-a})会倒序排列。

//案例：
var arr1 = [10, 20, 30, 40]
res=arr.reverse()
console.log(arr);//[40,30,20,10]
console.log(res);//[40,30,20,10]

var arr2 = [2, 93, 47, 5, 4, 78, 11, 69, 23]
arr.sort()
console.log(arr);
arr.sort(function(a,b){return(a-b)})
console.log(arr);
arr.sort(function(a,b){return(b-a)})
console.log(arr);

// 7.splice() :
7.1：数组名.splice(开始索引，多少个) 
作用：截取数组。返回值: 是一个新数组 里面有你截取出来的数据。
7.2：数组名.splice(开始索引,多少个,你要插入的数据)
作用：删除并插入数据。返回值: 是一个新数组 里面有你截取出来的数据

//语法1：
var arr = [2, 3, 48, 5, 4, 75]
res = arr.splice(1,2)
console.log(arr);
console.log(res);

//语法2：
var arr = [2, 3, 48, 5, 4, 75]
res = arr.splice(1,1,99999,88888)
console.log(arr);
console.log(res);

// 以下是不改变原数组的方法：
//8.concat() 合并数组。返回值：一个新的数组。
数组名.concat(数据)

//9.join() 数组转字符串。返回值：一个转化好的字符串。
数组名.join('连接符')

//10.slice() 截取数组的一部分数据。返回值：截取出来的数据，存放在新的数组中。
数组名.slice( 开始索引, 结束索引)

// 11.indexOf 从左检查数组中有没有这个数值。
语法一: 数组名.indexOf( 要查询的数据)
作用: 就是检查这个数组中有没有该数据。
如果有就返回该数据第一次出现的索引。
如果没有返回 -1

语法二：数组名.indexOf( 要查询的数据, 开始索引)

---

6.基本类型包装对象

在JavaScript中除了 null 和 undefined 之外，所有基本类型都有其对应的包装对象，这里我们学习三种：

• String
• Number
• Boolean

(1)String：

(2)Number：

常用方法：

<1> toString() : 将数字作为字符串返回。

<2> toExponential() ：返回以指数表示书写的数字。

<3> toFixed() ：返回带小数位数的数字。

<4> toPrecision() ： 返回指定长度的数字。

<5> ValueOf() ： 以数字形式返回数字。

JavaScript 数字方法 参考

(3)Boolean：

常用方法：

<1> toString() ：可以将布尔值转换为字符串。

<2> valueOF() ： 返回 Boolean 对象的原始值。

---

二，DOM模型

1.DOM概念

DOM的全称是Document Object Model，即文档对象模型。它是一种描述HTML、XML等文档的对象模型，可以用来访问和操作文档中的各个元素。在DOM中，文档被表示为一个树形结构，每个元素都是一个节点，节点之间存在父子关系。通过DOM，我们可以通过JavaScript来访问和操作文档中的各个元素，例如修改元素的内容、属性和样式等。

当页面被加载时，浏览器会创建页面的 文档对象模型（DOM） 。

HTML DOM模型被结构化为对象树，对象的HTML DOM树如下图所示：

通过这个对象模型，JavaScript获得创建动态HTML的功能：

• JavaScript能改变页面中的所有HTML元素。
• JavaScript 能改变页面中的所有 HTML 属性。
• JavaScript 能改变页面中的所有 CSS 样式。
• JavaScript 能对页面中所有已有的 HTML 事件作出反应。
• JavaScript 能在页面中创建新的 HTML 事件。

2.元素获取方法:

常见的方法：

• 通过ID获取（getElementById）
• 通过name属性（getElementsByName）
• 通过标签名（getElementsByTagName）
• 通过类名（getElementsByClassName）
• 获取html的方法（document.documentElement）
• 获取body的方法（document.body）

根据CSS选择器获取元素：（推荐）

• id选择器：document.querySelector("#btn")
• 标签选择器：document.querySelectorAll("div")
• 类选择器：document.querySelectorAll(".cls")
• 后代选择器：document.querySelectorAll("#div p")
• 子元素选择器：document.querySelectorAll("#div>a")
• 结构选择器：document.querySelector("#div ul li:first-child"); document.querySelectorAll("#div ul li:first-child")[0]

3.事件

常用事件：

• 点击事件： document.getElementById("id").onclick
• 鼠标事件：
  • 移入元素时触发：onmouseover
  • 移出元素时触发：onmouseout
  • 在元素中移动时触发：onmousemove
• 焦点事件：
  • 获取焦点：onfocus
  • 失去焦点：onblur

多事件注册：

• addEventListener ：绑定事件。
• removeEventListener ：解绑事件。

事件参数e：

JavaScript事件进阶：事件对象e(event)（三）-CSDN博客

JS中function(e) 其中的e到底代表什么-CSDN博客

事件冒泡：

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

Dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

如下图所示的三个阶段：

事件冒泡（dubbed bubbling）：是指当一个事件被触发时，它会从最内层的元素开始，然后逐级向外传播，直到最外层的元素。在这个过程中，事件会经过每一个元素，直到它到达最外层的元素。

例如，当你单击一个按钮时，事件会从按钮开始向外传播，直到它到达文档的最外层。在这个过程中，事件会经过按钮的父元素、父元素的父元素 ，以此类推，直到它到达文档的最外层。

事件源 =>根节点（由内到外）进行事件传播。

4.节点

节点概念：

DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树)，就是由各种不同类型的节点组成。网页中，所有内容弄都是节点，包含了：标签，属性，文本，注释，回车，换行，空格。

节点属性：

• nodeType ：节点类型

  • nodeType 属性以数字形式返回指定节点的节点类型。

    • 如果节点是元素节点，则 nodeType 属性将返回 1。
    • 如果节点是属性节点，则 nodeType 属性将返回 2。
    • 如果节点是文本节点，则 nodeType 属性将返回 3。
    • 如果节点是注释节点，则 nodeType 属性将返回 8。

    该属性是只读的。

• nodeName ：节点名称

  • nodeName 属性返回节点的名称：

    • 如果节点是元素节点，则 nodeName 属性返回标签名（大写）。
    • 如果节点是属性节点，则 nodeName 属性返回属性的名称。
    • 如果节点是文本节点，则 nodeName 属性返回 #text。
    • 如果节点是注释节点，则 nodeName 属性返回 #comment。
    • 如果节点是文档节点，则 nodeName 属性返回 #document。

    nodeName 属性是只读的。

• nodeValue ：节点值

  • nodeValue 属性设置或返回节点的值。

    如果节点是元素节点，则 nodeValue 属性将返回 null。

获取节点：

父节点：

• 元素：parentElement
• 节点：parentNode

子节点：

• 元素：children
• 节点：childNodes

首尾与兄弟节点：

• 元素
  • firstElementChild
  • lastElementChild
  • previousElementSibling
  • nextElementSibling
• 节点
  • firstChild
  • lastChild
  • previousSibling
  • nextSibling

操作节点：

• Dom创建元素
  • document.write()
  • innerHTML
  • 节点创建：
    • createElement("element")
    • appendChild(obj)
    • insertBefore(obj1, obj2)
• 删除元素：removeChild

综合案例：

1.购物车：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input {color:black;}
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label for="inputUnitPrice">商品价格</label>
            <input type="number"  id="inputUnitPrice" value="5">
        </div>
        <div>
            <label>商品数量</label>
            <button id="btnSub">-</button><span id="spanAmount">2</span>
            <button id="btnAdd">+</button>
        </div>

        <div>
            总价格：<strong><span id="spanTotalPrice">10</span></strong>
        </div>

    </div>

    <script>
        // 获取元素：
        let inputUnitPrice = document.querySelector('#inputUnitPrice');
        let spanAmount = document.querySelector('#spanAmount');
        let spanTotalPrice = document.querySelector('#spanTotalPrice');
        let btnSub = document.querySelector('#btnSub');
        let btnAdd = document.querySelector('#btnAdd');
		
        // 点击事件1：
        btnAdd.onclick = function() {
            let inputPrice = inputUnitPrice.value;
            let amount = spanAmount.innerText;
            amount ++;
            spanAmount.innerText = amount;
            spanTotalPrice.innerText = amount * inputPrice;
        }
        //点击事件2：
        btnSub.onclick = function() {
            let inputPrice = inputUnitPrice.value;
            let amount = spanAmount.innerText;
            amount--;
            spanAmount.innerText = amount;
            spanTotalPrice.innerText = amount * inputPrice;

        }
        

    </script>
</body>
</html>

---

三，BOM模型

BOM（Browser Object Model）全称浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 比 DOM 更大，它包含 DOM。 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

​ BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，奇特对象都是该对象的子对象。我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器；弹出新浏览器窗口；后退，前进，在浏览器中输入URL，支持cookies等。

1.windows对象

​ 在JavaScript中，一个浏览器窗口就是一个window对象。一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

---

2.定时器

（1）延时定时器：setTimeout() - Web API 接口参考

setTimeout(code, milliseconds)

function test() {
    setTimeout(function(){alert("hello")}, 1000);
}

（2）闹钟定时器：setInterval() - Web API 接口参考

setInterval() 是 JavaScript 中的一个内置函数，它用于在指定的间隔时间内重复执行一段代码，实现周期性操作。

setInterval(code, milliseconds)

// 使用匿名函数：
// 每秒钟输出一次当前时间
setInterval(function() {
  console.log(new Date().toLocaleTimeString());
}, 1000);

// 停止setInterval()的方法：clearInterval(intervalId);

---

3.加载–onload

window.onload 是一个在浏览器加载完整个网页后（包括所有图片、js文件和 CSS 文件）才会执行的 JavaScript 事件。

这个事件通常用于以下场景：

1. 初始化一些需要DOM元素存在的功能，例如响应用户交互事件、显示加载动画等。
2. 执行一些需要等待页面完全加载才能进行的操作，例如发送Ajax请求获取数据。
3. 进行一些页面性能优化，例如延迟加载某些内容，避免在页面加载初期就加载过多的资源。

语法与用法：

JavaScript 页面资源加载方法onload，onerror总结

Window：load 事件 - Web API 接口参考

---

4.定位–location

Window：location 属性 - Web API 接口参考

补充：我们先要了解URL的组成：

• protocol 通信协议常用的http、ftp、maito等。
• host 主机(域名) 如：www.baidu.com .
• port 端口号可选，省略时使用方案的默认端口如http的默认端口为80。
• path 路径由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
• query 参数以键值对的形式通过 & 符号分隔开来。
• fragment 片段#后面内容常见于链接锚点。

location 常用属性

location.href -> 属性，设置或返回完整的URL地址，赋值时用于地址跳转。

location.search -> 属性，设置或返回地址中携带的参数，？ 号 后面的部分。

location.hash -> 属性，设置或返回地址中的哈希值，# 号 后面部分。

location.host -> 属性,设置或返回从井号 (#) 开始的 URL（锚）。

location.hostname -> 属性，设置或返回当前 URL 的主机名。

location.pathname -> 属性,设置或返回当前 URL 的路径部分。

location.port -> 属性,设置或返回当前 URL 的端口号。

location.protocol -> 属性,设置或返回当前 URL 的协议。

假设当前的 URL 是: http://example.com:1234/test.htm#part2：
hash    设置或返回从井号 (#) 开始的 URL（锚）。//#part2
host    设置或返回主机名和当前 URL 的端口号。//example.com:1234
hostname    设置或返回当前 URL 的主机名。//example.com
href    设置或返回完整的 URL。//http://example.com:1234/test.htm#part2：
pathname    设置或返回当前 URL 的路径部分。///test/test.htm
port    设置或返回当前 URL 的端口号。//1234
protocol    设置或返回当前 URL 的协议。//http:

假设当前的 URL 是: http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search
search    设置或返回从问号 (?) 开始的 URL（查询部分）。//?f=hdom_loc_search

location 常用方法

reload()方法

重新加载，接收一个可选参数，如下：

• location.reload(); //可能从缓存中加载
• location.reload(true); //从服务器重新加载

replace()方法

虽然会导致浏览器位置的改变，但不回在历史纪录中生成新的记录。并且用户不能返回到值钱的页面。

reload()方法

重新加载，接收一个可选参数，如下：

• location.reload(); //可能从缓存中加载
• location.reload(true); //从服务器重新加载

---

5.历史

Window.history - Web API 接口参考

window.history 对象包含浏览器的历史。

• history.back() 方法加载历史列表中的前一个 URL。

• history forward() 方法加载历史列表中的下一个 URL。

• history.pushState(object, title, url)方法接受三个参数，object 为随着状态保存的一个对象，title为新页面的标题，url为新的网址。

• replaceState(object, title, url) 与pushState的唯一区别在于该方法是替换掉history栈顶元素。

• history.go(x) 去到对应的url历史记录。

---

6.本地存储–localStorage

为了满足需求，我们会经常性在本地存储大量的数据。HTML5规范提出了相关的解决方案：

• 数据存储在用户浏览器中。
• 设置，读取方便，甚至页面刷新不丢失数据。
• 容量较大，sessionStorage 和 localStorage约5m左右。

本地存储增删操作：

存：localStorage.setItem(key, value)

取：localStorage.getItem(key)

删：localStorage.removeItem(key)

---