提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
1.浏览器API概述
- API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应 用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机 制的细节。
- Web API 是 Web 的应用程序编程接口。
- 浏览器 API 可以扩展 Web 浏览器的功能。
- 服务器 API 可以扩展 Web 服务器的功能。
- 所有浏览器都有一组内置的 Web API 来支持复杂的操作，并帮助访问数据。
2.DOM（文档对象模型）
2.1 概述
- 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
- DOM 是一项 W3C (World Wide Web Consortium) 标准。
- HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
- 换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
2.2 节点的概念
DOM的最小组成单位叫做节点(node)。
文档的树形结构(DOM树)，就是由各种不同类型的节点组成。
每个节点都可以看作是文档树的一片叶子。 最顶层的节点就是document节点，它代表了整个文档；是文档的根节点。
每张网页都有自己的document节点，window.document属性就指向这个节点的。
只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。
每一个HTML标签元素，在DOM树上都会转化成一个Element节点对象; 文档里面最高一层一般是HTML标签，其他HTML标签节点都是它的下级。
节点的关系
父节点关系(parentNode):直接的那个上级节点 子节点关系(childNodes):直接的下级节点 同级节点关系(sibling):拥有同一个父节点的节点
2.3 查找节点元素的几种方式
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
| document.getElementsByName(nameAttribute) | 通过标签的name属性获取 |
| querySelector() | 接受一个CSS选择器作为参数，返回匹配该选择器的元素节点； |
| querySelectorAll() | 法与querySelector用法类似， 区别是返回一个类似数组的HTMLCollection对象，包含所有匹配给定选择器的节点。 |
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取节点元素对象</title>
</head>
<body>
<div class="poem">
<p id="title1">静夜思</p>
<p name="other">李白</p>
<p>床前明月光,</p>
<p>疑是地上霜。</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>
</div>
<div class="poem">
<p id="title2">静夜思</p>
<p name="other">李白</p>
<p>床前明月光,</p>
<p>疑是地上霜。</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>
</div>
</body>
<script>
// 1.id选择器
var title1 = document.getElementById("title1");
console.log(title1);
var title2 = document.getElementById("title2");
console.log(title2);
// 2.class选择器
var poem = document.getElementsByClassName("poem");
console.log(poem);
// 3.标签选择器
var ps = document.getElementsByTagName("p");
console.log(ps);
// 4.name属性获取
var others = document.getElementsByTagName("other");
console.log(others);
// 5.querySelector
var div = document.querySelector("div");
console.log(div);
// 6.querySelectorAll
var divs = document.querySelectorAll("div");
console.log(divs);
</script>
</html>
3.DOM 事件
3.1 概述
一种触发—响应 的机制； 用户的行为 + 浏览器感知（捕获）到用户的行为 + 事件处理程序。
JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。
事件的三要素
- 事件源:(被)触发事件的元素
- 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件
- 处理程序:事件触发后要执行的代码(函数形式)
3.2 事件绑定的三种方式
事件绑定，就是将每一种事件源通过某种触发方式来执行某段程序。其绑定方式有：
1.行内绑定 : 实际上就是在标签上指定一个事件类型属性，其事件值指向一段js函数。
<标签 on事件类型 = "处理函数名(参数列表)"></标签>
<script>
function 处理函数名(参数列表){
事件执行的程序;
}
</script>
2.动态绑定 : 通过获取元素节点对象，调用对象的事件属性指向一段js匿名函数的方式。
// 1.获取元素节点对象,这里以通过id方式查找。（注意也可以用其它形式获取）
var 对象名 = document.getElementById("id名称");
// 2.绑定事件
对象名.on事件类型 = function(参数列表){
事件执行的程序;
}
3.添加监听事件方式 : 每一个节点对象都提供了 addEventListener 方法，这个方法可以给选中的节点添加指定类型的事件 及事件处理程序。
// 1.获取元素节点对象,这里以通过id方式查找。（注意也可以用其它形式获取）
var 对象名 = document.getElementById("id名称");
// 2.绑定事件
对象名.addEventListener('事件类型',function(参数){
事件执行的程序;
});
这里要注意的是，前两种绑定方式的事件类型前要加on，第三种不需要。
4.移除事件监听 :
对象名.removeEventListener("事件类型",事件执行函数);
注意: removeEventListener方法移除的监听函数， 必须与对应的addEventListener方法的参数完全一致， 而且必须在同一个元素节点，否则无效。
5.代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定的三种方式</title>
</head>
<body>
<button id="bt1" onclick="fun1()">行内绑定</button>
<button id="bt2">动态绑定</button>
<button id="bt3">添加事件监听绑定</button>
</body>
<script>
// 1.行内绑定
function fun1(){
alert("行内绑定的方式");
}
// 2.动态绑定
var bt2 = document.getElementById("bt2");
bt2.onclick = function () {
alert("动态绑定");
}
// 3.添加事件监听器
var bt3 = document.getElementById("bt3");
bt3.addEventListener("click",function () {
alert("添加事件监听器方式绑定");
})
</script>
</html>
6.三种绑定方式的比较
- 第一种 “HTML标签的on-属性”，违反了HTML与JavaScript代码相分离的原则；处理函数中 this 指向的 window对象；
- 第二种 “Element节点的事件属性” 的缺点是，同一元素同一个事件只能定义一个监听函数，也就是说， 如果定义两次onclick属性，后一次定义会覆盖前一次。但是处理函数中的 this 指向的选中的对象；
- 第三种：addEventListener方法可以针对同一个元素的同一个事件，添加多个监听处理函数。处理函数 中的 this 指向的也是选中的元素；
3.3 事件类型
页面加载事件
| 事件名称 | 何时触发 |
|---|---|
| load | 一个资源及其相关资源已完成加载。 |
焦点事件
| 事件名称 | 何时触发 |
|---|---|
| focus | 元素获得焦点 |
| blur | 元素失去焦点 |
鼠标事件
| 事件名称 | 何时触发 |
|---|---|
| mouseenter | 指针移到有事件监听的元素内 |
| mouseover | 指针移到有事件监听的元素或者它的子元素内 |
| mousemove | 指针在元素内移动时持续触发 |
| mousedown | 在元素上按下任意鼠标按钮 |
| mouseup | 在元素上释放任意鼠标按键 |
| click | 在元素上按下并释放任意鼠标按键 |
| dblclick | 在元素上双击鼠标按钮 |
| contextmenu | 右键点击 (右键菜单显示前) |
| mouseleave | 指针移出元素范围外（不冒泡） |
| mouseout | 指针移出元素，或者移到它的子元素上 |
| select | 文本被选中（input标签、textarea标签） |
| copy | 元素内容被拷贝时 |
键盘事件
| 事件名称 | 何时触发 |
|---|---|
| keydown | 按下任意按键 |
| keypress | 除 Shift, Fn, CapsLock 外任意键被按住. (连续触发) |
| keyup | 释放任意按键 |
form表单事件
| 事件名称 | 何时触发 |
|---|---|
| reset | 点击重置按钮时 |
| submit | 点击提交按钮 |
内容改变事件
| change | 当内容改变且失去焦点时触发 （存储事件） |
| input | 当内容改变时触发 （值变化事件） |
代码演示
<!--加载事件-->
<body onload="f1()" >
</body>
<script>
function f1(){
alert('f1');
}
</script>
<!--焦点事件-->
<body>
<input type="text" id="t" value="请输入用户名" onfocus="f1()" onblur="f2()">
</body>
<script>
function f1(){
document.getElementById('t').value = '';
}
function f2(){
var v = document.getElementById('t').value;
alert(v);
}
</script>
<!--鼠标事件-->
<body>
<div id="d" style="width:200px;height:200px;border:1px solid red">
来啊
</div>
</body>
<script>
var d = document.getElementById('d');
//当鼠标悬浮时触发
d.onmouseover = function(){
alert('mouseover');
}
//当鼠标离开时触发
d.onmouseout = function(){
alert('mouseout');
}
//当鼠标按下时触发
d.onmousedown = function(){
alert('mousedown');
}
//当鼠标弹起时触发
d.onmouseup = function(){
alert('mouseup');
}
//当鼠标移动时触发
d.onmousemove = function(){
alert('mousemove');
}
</script>
<!--键盘事件-->
<body>
<input type="text" value="" id="t">
</body>
<script>
var d = document.getElementById('t');
//当键盘按下时触发
d.onkeydown = function(){
console.log('keydown');
}
//当键盘按下时触发
d.onkeypress = function(){
console.log('keypress');
}
//当键盘弹起时触发
d.onkeyup = function(){
console.log('keyup');
}
</script>
<!--键盘事件-->
<body>
<form id="f" action="1.2.5.php">
姓名:<input type="text" name="" value=""> <br>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</form>
</body>
<script>
var d = document.getElementById('f');
//当表单提交时触发
d.onsubmit = function(){
alert('submit');
}
//当表单重置时触发
d.onreset = function(){
alert('reset');
}
</script>
<!--内容改变事件-->
<body>
<input type="text" id="t" value="">
</body>
<script>
var d = document.getElementById('t');
//当内容改变且失去焦点时触发
d.onchange = function(){
console.log('t');
}
//当内容改变时触发
d.oninput = function(){
console.log('in');
}
</script>
3.4 事件传播
三个包裹着的DIV，都绑定了点击事件，问： 当点击 div1 时，会发生什么现象？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件传播</title>
<style>
div {
padding: 40px
}
#div3 {
width: 300px;
height: 300px;
background-color: red
}
#div2 {
width: 200px;
height: 200px;
background-color: yellow
}
#div1 {
width: 100px;
height: 100px;
background-color: blue
}
</style>
</head>
<body>
<div id="div3">3
<div id="div2">2
<div id="div1">1</div>
</div>
</div>
</body>
<script>
var d1 = document.getElementById('div1');
var d2 = document.getElementById('div2');
var d3 = document.getElementById('div3');
d1.onclick = function () {
alert('1');
}
d2.onclick = function () {
alert('2');
}
d3.onclick = function () {
alert('3');
}
</script>
</html>
当点击div1时，触发 事件1，但是，紧跟着，事件2和事件3也被触发了； 这种现象，我们称为 事件冒泡
在JS中当一个事件发生以后，它会在不同的DOM节点之间传播。 这种传播分成三个阶段：
- 第一阶段：从window对象传导到目标节点，称为 捕获阶段。
- 第二阶段：在目标节点上触发，称为 目标阶段。
- 第三阶段：从目标节点传导回window对象，称为 冒泡阶段。
事件传播的最上层对象是window；
事件的传播顺序，在捕获阶段依次为window、document、html、body、div；
在冒泡阶段依次为div、body、html、document、window。
想让事件监听在捕获阶段，只能通过 addEventListener 方法的进行设置：
4.对元素节的操作
4.1 元素节点相关的操作
| 方法 | 功能 |
|---|---|
| document.createElement(“元素名称”) | 用来生成网页元素节点，参数为元素的标签名； |
| document.createTextNode(“内容”) | 用来生成文本节点，参数为所要生成的文本节点的内容； |
| appendChild() | 接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点； |
| removeChild() | 接受一个子节点作为参数，用于从当前节点移除该子节点 |
| hashChildNodes() | 返回一个布尔值，表示当前节点是否有子节点 |
| cloneNode() | 用于克隆一个选中的节点。 它接受一个布尔值作为参数，表示是否同时克隆子节点，默认是false，即不克隆子节点。 注意: 不会克隆绑定到该元素上的事件； |
代码演示
<!--
案例：给下拉选择框添加一个荆州选项
将下拉选择框中的最后一个选项删除
将下拉选择框中的最后一个选项修改为宜昌
-->
<html>
<head>
<meta charset="utf-8">
<title>Element元素的增删改</title>
<script>
/**
* 添加元素
*/
function fn1(){
//创建option元素节点
var option = document.createElement("option");
//创建文本节点
var text = document.createTextNode("荆州");
//将文本节点添加到元素节点中 <option>荆州</option>
option.appendChild(text);
//获取select元素节点
var select = document.getElementsByTagName("select")[0];
//将option添加到select中
select.appendChild(option);
}
/**
* 删除元素
*/
function fn2(){
//获取所有的option
var options = document.getElementsByTagName("option");
//获取最后一个option
var option = options[options.length - 1];
//获取select
var select = document.getElementsByTagName("select")[0];
//移除最后一个option
select.removeChild(option);
}
/**
* 修改元素
*/
function fn3(){
var selectEle = document.getElementsByTagName("select")[0];
var optionEles = document.getElementsByTagName("option");
var oldOptionEle = optionEles[1];
var newOptionEle = document.createElement("option");
newOptionEle.appendChild(document.createTextNode("宜昌"));
selectEle.replaceChild(newOptionEle,oldOptionEle);
}
</script>
</head>
<body>
<select>
<option>孝感</option>
<option>武汉</option>
<option>襄阳</option>
</select><br />
<button onclick="fn1()">添加</button>
<button onclick="fn2()">删除</button>
<button onclick="fn3()">修改</button>
</body>
</html>
4.2 属性相关操作
| 方法 | 描述 |
|---|---|
| setAttribute(“属性名”,“属性值”) | 为当前元素节点新增属性。如果同名属性已存在，就修改属性值。 |
| getAttribute(“属性名”) | 返回当前元素节点的指定属性。如果指定属性不存在，则返回null； |
| hasAttribute(“属性名”) | 返回一个布尔值，表示当前元素节点是否包含指定属性 |
| removeAttribute(“属性名”) | 从当前元素节点移除属性。 |
| style | 设置CSS样式 |
| value | 获取值 |
代码演示
<!--
需求
给a标签设置href属性为"http://www.baidu.com"
获取a标签的href属性
移除a标签的href属性
设置a标签中的文本内容的样式：color = "blue"、fontsize="100px"、fontFamily = "楷体"
-->
<html>
<head>
<meta charset="utf-8">
<title>Attribute属性的操作</title>
<script>
function fn1(){
var a = document.getElementsByTagName("a")[0];
a.setAttribute("href","http://www.baidu.com");
}
function fn2(){
var a = document.getElementsByTagName("a")[0];
var val = a.getAttribute("href");
console.log(val);
}
function fn3(){
var a = document.getElementsByTagName("a")[0];
a.removeAttribute("href");
}
function fn4(){
var a = document.getElementsByTagName("a")[0];
a.style.color = "blue";
a.style.fontSize = "100px";
a.style.fontFamily = "楷体";
}
</script>
</head>
<body>
<a >百度</a>
<br />
<button onclick="fn1()">设置属性</button>
<button onclick="fn2()">获取属性</button>
<button onclick="fn3()">移除属性</button>
<button onclick="fn4()">设置样式</button>
</body>
</html>
4.3 层级相关操作
| 方法 | 描述 |
|---|---|
| nextElementSibling | 返回紧跟在当前节点后面的第一个同级Element节点，如果当前节点后面没有同级节点，则返回null； |
| previousElementSibling | 返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null； |
| parentElement | 返回当前节点的父级Element节点； |
| childNodes | 返回一个NodeList集合，成员包括当前节点的所有子节点(注意空格回车也算)。 |
| firstChild | 返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。 |
| lastChild | 返回该节点的最后一个子节点，如果该节点没有子节点则返回 null 。 |
4.4 文本相关操作
| 方法 | 描述 |
|---|---|
| innerText | 添加文本内容，不解析标签 |
| innerHTML | 添加文本内容，解析标签 |
4.5 综合案例
案例：表格的增删操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的增删操作</title>
<style>
div{
width: 500px;
height: 40px;
margin: 0 auto;
}
input{
border-radius: 5px;
}
table{
width: 500px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<!-- 添加框 -->
<div>
<input type="text" id="name">姓名
<input type="text" id="age">年龄
<button id="addbtn" onclick="addFun(this)">添加</button>
</div>
<!--展示表格-->
<table id="table" border="1px" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>张三丰</td>
<td>11</td>
<td>
<button id="delbtn" onclick="delFun(this)">删除</button>
</td>
</tr>
</table>
</body>
<script>
// 1.删除操作
function delFun(obj) {
// ①找到tr节点
var trElement = obj.parentElement.parentElement;
// ②找到table节点
var tableElement = trElement.parentElement;
// ③移除节点
tableElement.removeChild(trElement);
}
// 2.添加操作
function addFun(obj) {
// 1.获取输入框内容
var inputs = document.getElementsByTagName("input");
var name = inputs[0].value;
var age = inputs[1].value;
// 2.创建节点
// ① 创建内容节点
var nameText = document.createTextNode(name);
var ageText = document.createTextNode(age);
// ②创建button节点
var delText = document.createTextNode("删除");
var buttonElement = document.createElement("button");
buttonElement.setAttribute("onclick","delFun(this)");
buttonElement.appendChild(delText);
// ③创建td节点
var tdElement1 = document.createElement("td");
tdElement1.appendChild(nameText);
var tdElement2 = document.createElement("td");
tdElement2.appendChild(ageText);
var tdElement3 = document.createElement("td");
tdElement3.appendChild(buttonElement);
// ④创建tr节点
var trElement = document.createElement("tr");
trElement.appendChild(tdElement1);
trElement.appendChild(tdElement2);
trElement.appendChild(tdElement3);
// ⑤获取table对象
var table = document.getElementById("table");
table.appendChild(trElement);
}
</script>
</html>
第二种方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的增删操作</title>
<style>
div{
width: 500px;
height: 40px;
margin: 0 auto;
}
input{
border-radius: 5px;
}
table{
width: 500px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<!-- 添加框 -->
<div>
<input type="text" id="name">姓名
<input type="text" id="age">年龄
<button id="addbtn" onclick="addFun(this)">添加</button>
</div>
<!--展示表格-->
<table id="table" border="1px" cellspacing="0" cellpadding="0">
</table>
</body>
<script>
// 存储数据的容器
var arr = [
{name:"张三",age:11},
{name:"李四",age:12},
{name:"王五",age:13}
];
showTable();
// 显示操作
function showTable() {
// 表头
var htmlStr ="<tr>"
+"<th>姓名</th>"
+"<th>年龄</th>"
+"<th>操作</th>"
+"</tr>";
// 拼接内容
for (var i = 0; i<arr.length;i++){
htmlStr+="<tr>"
+"<td>"+arr[i].name+"</td>"
+"<td>"+arr[i].age+"</td>"
+"<td> <button id=\"delbtn\" οnclick=\"delFun(this)\">删除</button></td>"
+"</tr>";
}
// 将内容添加到表格中
document.getElementById("table").innerHTML=htmlStr;
}
// 删除操作
function delFun(obj) {
// 找到当前元素的父元素tr
var trElement = obj.parentElement.parentElement;
console.log(trElement);
// 找到第一个子元素td的内容
var firstChildElement = trElement.firstChild;
var name = firstChildElement.innerText;
// 删除数组中的对象
// 创建一个新的数组
var newArr=[];
for (var i = 0; i<arr.length;i++){
if (arr[i].name != name){
newArr.push(arr[i]);
}
}
arr=newArr;
// 刷新页面
showTable()
}
//添加操作
function addFun(obj) {
// 获取输入框内容
var inputs = document.getElementsByTagName("input");
var name = inputs[0].value;
var age = inputs[1].value;
// 向数组中添加元素
arr.push({name:name,age:age});
// 刷新页面
showTable();
}
</script>
</html>
5.事件对象
事件的触发，大部分情况下是用户的一种行为，也就是说，我们并不能确定用户什么时间触发； 而且，由于事件的传播机制，我们甚至不能确定事件具体触发在哪个节点；这是一件很不爽的事情； 如何解决呢？ 事件发生以后，系统会调用我们写好的事件处理程序 系统会在调用处理程序时，将事件发生时有关事件的一切信息，封装成一个对象， 作为参数传给监听函数(事件处理程序)，我们把这个对象称为 事件对象。 有关事件发生的一切信息，都包含在这个事件对象中； 根据事件类型的不同，事件对象中包含的信息也有所不同； 如点击事件中，包含鼠标点击的横纵坐标位置，键盘事件中，包含键盘的键值等；
5.1 事件对象中的常用属性及方法
| 属性/方法 | 描述 |
|---|---|
| event.bubbles | 属性返回一个布尔值，表示当前事件是否会冒泡; |
| event.eventPhase | 返回一个整数值，表示事件流在传播阶段的位置0:事件目前没有发生。 1:事件目前处于捕获阶段。 2:事件到达目标节点。 3:事件处于冒泡阶段。 |
| event.type | 返回一个字符串，表示事件类型，大小写敏感; |
| event.timeStamp | 返回一个毫秒时间戳，表示事件发生的时间; |
| clientX、clientY | 获取鼠标事件触发的坐标 |
5.2 阻止浏览器默认行为&阻止事件传播
| 属性/方法 | 描述 |
|---|---|
| event.preventDefault() | 方法取消浏览器对当前事件的默认行为， 比如点击链接后，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。 |
| event.stopPropagation() | 方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数 |
5.3 事件代理/委托
| 属性/方法 | 描述 |
|---|---|
| event.target | 对事件起源目标的引用，属性返回触发事件的那个节点。 |
| event.currentTarget | 属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。 作为比较，target属性返回事件发生的节点。 |
5.4 案例
阻止链接跳转案例
<body>
<!--第1种写法-->
<a href="http://www.baidu.com" onclick="alert('哈哈'); return false;">百度</a>
<!--第2种写法-->
<script>
function f1() {
alert("嘎嘎");
return false;
}
</script>
<a href="http://www.baidu.com" onclick="return f1();">百度</a>
<!--第3种写法-->
<a href="http://www.baidu.com" id="ak">百度</a>
<script>
document.getElementById("ak").onclick=function () {
alert("哈哈");
return false;
};
</script>
</body>
点击小图显示大图
<body>
<a id="ak" href="images/1.jpg"><img src="images/1-small.jpg" alt="" id="im"></a>
<script>
//点击小图片,显示大图---修改了这个图片标签的src的属性值
//根据id获取小图,注册点击事件,添加事件处理函数
document.getElementById("im").onclick=function () {
//根据id获取超链接
var aObj=document.getElementById("ak");
this.src=aObj.href;
//阻止超链接的默认跳转事件
return false;
};
</script>
6.BOM(浏览器对象)
6.1 BOM概述
- 浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
- 不存在浏览器对象模型（BOM）的官方标准。
- 现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到。
- 浏览器对象模型的具体实例化对象就是 window 对象；
- window 对象下有很多属性和方法，我们前面学过的DOM对象，就是window对象的一个属性，只不过 这个属性的值又是一个对象，因此也成为window对象的子对象；
6.2 对话框
| 方法 | 描述 |
|---|---|
| window.alert() | 显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。 |
| window.prompt() | 显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字. |
| window.confirm() | 方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框 。 |
6.3 控制台
| 方法 | 描述 |
|---|---|
| window.console | 返回console对象的引用，该对象提供了对浏览器调试控制台的访问。 |
| Console.clear() | 清空控制台。 |
| Console.error() | 打印一条错误信息 |
| Console.table() | 将数组或对象数据在控制台以表格形式打印 |
| Console.log() | 打印字符串，使用方法比较类似C的printf、PHP的echo等格式输出 |
6.4 定时器
setTimeout()和clearTimeout(): 在指定的毫秒数到达之后执行指定的函数，只执行一次
// 语法格式
var timeout=setTimeout(function(){
执行的语句;
},时间);
// 清除计时器
clearTimeout(timeout);
setInterval()和clearInterval() 定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数
// 格式
var interval = setInterval(function(){
执行的语句;
},时间);
// 清除计时器
clearInterval(interval);
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时器</title>
</head>
<body>
<!--定时器-->
<button onclick="getTimeOut()">5秒后弹出helloword弹框</button>
<!--计时器-->
<button onclick="getInterval()">开始计时</button>
<div id="div" style="border: 1px solid black; color: red;width: 50px;height: 35px;text-align: center;font-size: 20px;padding-top: 15px">0</div>
</body>
<script>
// 5秒后弹出helloword弹框
function getTimeOut() {
var timeout = window.setTimeout(function () {
alert("HelloWord");
},5000);
// window.clearTimeout(timeout);
}
// 计时器
function getInterval() {
var i = 0;
var intervals = window.setInterval(function () {
i++;
document.getElementById("div").innerText=i;
},1000);
}
</script>
</html>
6.5 location对象
window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面。属性方法如下:
- window.location.href 返回当前页面的 href (URL)
- window.location.hostname 返回 web 主机的域名
- window.location.pathname 返回当前页面的路径或文件名
- window.location.protocol 返回使用的 web 协议（http: 或 https:）
- window.location.assign 加载新文档
6.6 history对象
- window.history 对象包含浏览器历史。
window.history对象可不带 window 书写。- 为了保护用户的隐私，JavaScript 访问此对象存在限制
- history.back() - 等同于在浏览器点击后退按钮
- history.forward() - 等同于在浏览器中点击前进按钮
6.7 navigator对象
- window.navigator 对象包含有关访问者的信息。
- window.navigator 对象可以不带 window 前缀来写。
- 来自 navigator 对象的信息通常是误导性的，不应该用于检测浏览器版本，因为：
- 不同浏览器能够使用相同名称
- 导航数据可被浏览器拥有者更改
- 某些浏览器会错误标识自身以绕过站点测试
- 浏览器无法报告发布晚于浏览器的新操作系统
- 常用的方法
- navigator.appName
- navigator.appCodeName
- navigator.platform
本文含有隐藏内容，请 开通VIP 后查看