1、window 对象
浏览器对象模型(Brower Object Model,BOM)使 JavaScript 有能力与浏览器“对话”。BOM 由多个对象组成,其中代表浏览器窗口的 window 对象是 BOM 的顶层对象,其他对象都是该对象的子对象,如下图所示。
1.1、window 对象的属性
所有浏览器都支持 window 对象,window 对象表示浏览器窗口。所有 JavaScript 全局对象、函数、变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。window 对象主要包括以下属性。
属 性 | 含 义 |
---|---|
screen | 有关客户端的屏幕和显示性能的信息 |
history | 有关客户访问过的 URL 的信息 |
location | 有关当前 URL 的信息 |
navigator | 包含有关浏览器的信息 |
document | 窗口中显示的文档对象 |
frames | 返回窗口中所有命名的框架 |
注意:有些 window 对象的属性本身也是对象。其中,表中的前五个属性也是对象,具有自己的属性和方法。
1.2、window 对象的常用方法
window 对象中除了有很多的属性之外,还有很多的方法,而且这些方法大多是开发过程中常用的方法。
需要注意的是,window 对象中的所有方法均可以省略前面的 window,比如 close()。
1. window 弹窗的输入输出
1)prompt():弹窗接收用户输入。
2)alert():弹窗警告。
3)confirm():带有确认或取消按钮的提示框。
2. open() 与 close()
1)open():重新打开一个窗口,主要传入三个参数:URL地址、窗口名称、窗口特征。
2)close():关闭浏览器的当前选项卡
3. setTimeout() 与 clearTimeout()
1)setTimeout():设置延时执行(以ms为单位计时),只会执行一次。
2)clearTimeout():清除延时,传入参数:调用 setTimeout 时返回一个id,通过变量接收id,传入clearTimeout。
var timeOutId = setTimeout(function () {
console.log("Hello World");
}, 2000);
setTimeout(function () {
clearTimeout(timeOutId);
}, 5000);
4. setInterval() 与 clearInterval()
1)setInterval():设置定时器,循环每个 N 毫秒执行一次,两个参数:需要执行的 function / 毫秒数。
2)clearInterval():清除定时器,传入参数:调用 setInterval 时返回一个 id,通过变量接收 id,传入 clearInterval。
var interValId = setInterval(function () {
console.log("Hello World");
}, 1000);
setTimeout(function () {
clearInterval(interValId);
}, 5000);
2、浏览器对象模型的其他对象
在 JavaScript 中,除了最常用的 window 对象,还有很多常用的其他对象,如 screen 对象,location 对象、history 对象等。这些对象都是包含在 window 对象里面的,以 screen 对象为例,可以使用 window.screen 表示,当前也可以省略 window 直接使用 screen 表示。
2.1、screen:屏幕对象
screen 对象包含有关客户端显示屏幕的信息,有四个常用属性,分别是屏幕宽度、屏幕高度、可用宽度和可用高度。
screen.width; // 屏幕宽度
screen.height; // 屏幕高度
screen.availWidth; //屏幕可用宽度
screen.availHeight; //屏幕高度 = 屏幕高度 - 底部工具栏
注意:
- 当 Windows 桌面的任务栏在底部或上部时,可用高度等于屏幕高度减去任务栏高度,可用宽度等于屏幕宽度。
- 当 Windows 桌面的任务栏在左侧或右侧时,可用宽度等于屏幕宽度减去任务栏宽度,可用高度等于屏幕高度。
2.2、location:地址栏对象
location 对象包含有关当前 URL 的信息。它存储在 window 对象的 location 属性中,表示那个窗口中当前显示的文档的 Web 地址,可通过 window.location 属性来访问。
location 作为 window 对象属性时,可以设置页面跳转。
window.location = "http://www.baidu.com";
一个完整的 URL 路径中包含的所有部分。
完整的 URL 路径:
协议名://主机名(IP地址):端口号/文件路径?传递参数(name1=value1&name2=value2)#锚点
例如:
http://127.0.0.1:8080/wenjianjia/index.html?name=test#top
属 性 | 说 明 |
---|---|
href | 完整路径 |
protocol | 使用的协议(http、https、ftp、file、mailto) |
pathname | 文件路径 |
port | 端口号 |
search | 从?开始往后的部分 |
hostname | 主机名(IP地址) |
host | 主机名和端口号 |
hash | 从#开始的锚点 |
除了 URL 属性外,location 对象还具有三个常用方法。location 对象的 reload() 方法可以重新装载当前文档;replace() 方法可以装载一个新文档而无须为它创建一个新的历史记录,即在浏览器的历史列表中,新文档将替换当前文档;assign() 方法可以加载新的文档。
方 法 | 说 明 |
---|---|
assign() | 加载新的文档 |
replace() | 用新的文档替换当前文档 |
reload() | 重新加载当前文档 |
注意:reload() 传参与不传参情况的区别,当 reload(true) 时,表示从服务器重新加载当前页面;而当 reload() 不传参时,表示在本地刷新当前页面。
2.3、history:历史记录对象
history 对象包含用户(在浏览器窗口中)访问过的 URL。它是 window 对象的一部分,可通过 window.history 属性对其进行访问。
history 对象是浏览器历史记录相关的对象。
属性或方法 | 说 明 |
---|---|
length | 返回浏览器历史列表中的 URL 数量 |
back() | 加载 history 列表中的前一个 URL,与在浏览器中单击后退按钮相同 |
forward() | 加载 history 列表中的下一个 URL,与在浏览器中单击按钮向前相同 |
go() | 跳转到浏览器历史列表的任意位置。位置标志:当前页为第 0 个,前一个页面第 1 个,后一个页面 -1 个 |
2.4、navigator:浏览器配置对象
navigator 对象包含了有关浏览器基本配置的各种信息,所包含的属性较多。
属 性 | 说 明 |
---|---|
appName | 产品名称 |
appVersion | 产品版本号 |
userAgent | 用户代理信息 |
platform | 系统平台 |
plugins | 返回一个数组,检测浏览器安装的所有插件 |
MimeTypes | 检查浏览器安装的插件支持的文件类型 |
plugins 属性,可以查看浏览器安装的所有插件,包括四个属性。
1)description:插件的描述信息。
2)filename:插件在本地磁盘的文件名。
3)length:插件的个数。
4)name:插件名。
3、Core DOM
文档对象模型(DOM)是万维网联盟(W3C)的标准。DOM 定义了访问 HTML 和 XML 文档的标准。W3C DOM 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM 标准被分为三个不同的部分:
1)Core DOM 是核心 DOM,定义了一套标准的针对任何结构化文档的对象,包括HTML、XHTML 和 XML。核心 DOM 适合操作节点,如创建、删除、查找等。
2)XML DOM 定义了所有 XML 元素的对象和属性,以及访问它们的方法。
3)HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。HTML DOM 适合操作属性,如读取或修改属性的值等。
当网页被加载时,浏览器会创建页面的文档对象模型。Document 对象使用户可以从脚本中对 HTML 页面中的所有元素进行访问。另外,Document 对象是 window 对象的一部分,可通过 window.document 属性对其进行访问。
3.1、DOM 树结构分析
DOM 节点分为三大类:元素节点、文本节点、属性节点。其中,元素节点又叫标签节点,指文档中的各种 HTML 标签:文本节点和属性节点为元素节点的两个子节点,分别表示标签中的文字和标签的属性。通过 getElement 系列方法,可以取到元素节点。
3.2、操作元素节点
在 DOM 操作中,操作元素节点是最基础的一步,使用 HTML 操作任何内容都需要选中一个标签,才能对标签以及标签的文字、属性、样式进行修改。
1.getElementById
getElementById() 方法可返回对拥有指定 id 的第一个对象的引用。如果需要查找文档中一个特定的元素,最有效的方法是 getElementById()。在操作文档中一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用此 id 查找想要的元素。
注意:通过 id 获取唯一的节点,如果存在多个同名 id,则只会选取第一个。
2.getElementsByName / getElementsTagName / getElementsClassName
通过 Name、TagName、ClassName 取到一个数组,包含多个节点。
它们的使用方式是,通过循环取到每一个节点。而循环的次数是从 0 开始,直到数组的最大长度后结束。
3.document.querySelector / querySelectorAll
querySelector() 方法仅仅返回匹配指定 CSS 选择器的第一个元素。如果需要返回所有的元素,则使用 querySelectorAll() 方法替代。
注意:圆括号 “()” 中传入参数指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id、类、类型、属性、属性值等来选取元素。对于多个选择器,使用逗号隔开,返回一个匹配的元素。
3.3、操作文本节点
在 DOM 操作中,操作元素节点取到标签节点后,接下来就可以通过 JavaScript 中提供的方法对标签中的文字进行获取、修改操作。
1.tagName
tagName 属性返回元素的标签名,即获取节点的标签名。在 HTML 中,tagName 属性的返回值始终是大写字母。
2.innerHTML
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,即设置或者获取节点内部的所有 HTML。
3.innerText
innerText 属性用来定义对象所要输出的文本,即它可以用来设置或者获取节点内部的所有文字。
innerHTML 与 innerText 的区别。
1)innerHTML 指的是从对象的起始位置到终止位置的全部内容,包括 HTML 标签。
2)innerText 指的是从起始位置到终止位置的内容,但它去除 HTML 标签。
建议:innerText 只适用于 IE 浏览器(现在也适应 Chrome 浏览器),而 innerHTML 是符合 W3C 标准的属性。因此,尽可能地使用 innerHTML,而少用 innerText。
3.4、操作属性节点
在 DOM 操作中,操作元素节点取到标签节点后,接下来就可以通过 JavaScript 中提供的方法对标签的属性进行获取、修改操作。
1.查看属性节点
getAttribute() 方法返回指定属性名的属性值,如果以 attr 对象返回属性,则需要使用 getAttributeNode。
// 基本语法如下:
getAttribute("属性名");
2.设置属性节点
setAttribute() 方法添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置或更改属性值。
// 基本语法如下:
setAttribute("属性名", "属性值");
3.5、JavaScript 修改元素样式
1.className
使用 className 直接设置 class 类,为元素设置一个新的 class 名字,注意写法是 className。
// 基本语法如下:
div.className = "cls1";
2.style
使用 style 设置单个属性,为元素设置一个新的样式,注意属性名要使用小驼峰命名法则。
// 基本语法如下:
div.style.backgroundColor = "red";
3.style.cssText
style.cssText 为元素同时修改多个样式。使用 style 或 style.cssText 可以设置多个样式属性。
// 基本语法如下:
div.style = "background-color: red; color: yellow;";
div.style.cssText = "background-color: red; color: yellow;"; // 推荐使用
3.6、获取层次节点
文档中所有节点相互之间都有关系,包括父子关系、同胞关系。例如,每个节点都有 childNodes 属性,保存着一个 NodeList 对象。NodeList 是一种类数组的对象,可以使用 childNode[0],childNode.item(1) 来访问,同时拥有 length 属性,但并不是 Array 实例。
1.childNodes / children
childNodes:获取元素的所有子节点,包括按 Enter 键换行等文本节点,结果为数组。
children:获取元素的所有元素节点,结果为数组。
2.firstChild / firstElementChild
firstChild:获取元素的第一个子节点,包括按 Enter 键换行等文本节点;如果存在子元素,则返回第一个子元素,否则返回 null。
firstElementChild:获取元素的第一个元素子节点,不包括按 Enter 键换行等文本节点;如果没有元素子节点,则返回 null。
3.lastChild / lastElementChild
lastChild:获取元素的最后一个子节点,包括按 Enter 键换行等文本节点。
lastElementChild:获取元素的最后一个元素子节点,不包括按 Enter 键换行等文本节点。
4.parentNode
parentNode:获取当前节点的父节点。
5.previousSibling / previousElementSibling
previousSibling:获取当前节点的前一个兄弟节点,包括按 Enter 键换行等文本节点。
previousElementSibling:获取当前节点的前一个兄弟节点,不包括按 Enter 键换行等文本节点。
6.nextSibling / nextElementSibling
nextSibling:获取当前节点的后一个兄弟节点,包括按 Enter 键换行等文本节点。
nextElementSibling:获取当前节点的后一个兄弟节点,不包括按 Enter 键换行等文本节点。
7.attributes
attributes:获取当前元素节点的所有属性节点。
3.7、创建新节点
在进行 DOM 操作时,创建新节点(元素)是必不可少的步骤,因为操作 DOM 的基础就是先获得标签节点。
1.createElement("标签名")
创建一个新的节点,需要配合 setAttribute() 方法给新节点设置相关属性。
// 基本语法如下
var img = document.createElement("img"); // 创建一个 img 节点
img.setAttribute("src", "picture.jpg"); // 给 img 节点设置属性值
2.appendChild("节点名")
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点,即在某元素的最后追加一个新节点。
// 基本语法如下
document.body.appendChild(img); //将设置好的 img 节点追加到 body 最后
3.insertBefore(新节点名, 目标节点名)
将新节点插入到目标节点之前。
// 基本语法如下
document.body.insertBefore(img, div1); // 将 img 节点插到 div1 之前
4.cloneNode(true/false)
cloneNode 的作用是复制节点,需要复制哪个节点,就用哪个节点去调用被复制对象;传递参数为 true 或 false,true 表示复制当前节点及所有子节点,false 表示只复制当前节点,不复制子节点(默认)。
3.8、删除/替换节点
1.removeChild(需删除节点)
removeChild() 方法指定元素的某个指定的子节点,并从父容器中删除指定节点;以 Node 对象返回被删除的节点,如果节点不存在则返回 null。
// 基本语法如下
document.body.removeChild(ul); // 从ul的父容器body中删除ul节点
2.replaceChild(新节点, 被替换节点)
用新节点替换指定节点。如果新节点是页面中已有节点,则会将此节点删除后,替换到指定节点。
// 基本语法如下
document.body.replaceChild(newDiv, oldDiv); // 使用newDiv替换掉oldDiv
4、HTML DOM
HTML DOM 的特性和方法是专门针对 HTML 的,HTML 中每个节点都是一个对象,通过对象访问属性和方法的方式,让一些 DOM 操作更加简便。在 HTML DOM 中有专门用来处理表格及其元素的属性和方法。
在 HTML DOM 中,Table 对象代表一个 HTML 表格,TableROW 对象代表 HTML 表格的行,TableCell 对象代表 HTML 表格的单元格。在 HTML 文档中可通过动态创建 Table 对象、TableROW 对象和 TableCell 对象来创建 HTML 表格。
4.1、HTML DOM 操作表格对象
1. rows 属性
返回表格中的所有行,返回的是一个数组格式。返回包含表格中所有行(TableROW 对象)的一个数组。
// 基本语法如下
table.rows[]; // 返回表格的所有行 tr
获得第一行对象: table.rows[0]
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<table id="table" style="border: 1px solid black;">
<tr style="border: 1px solid black;">
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
</tr>
<tr>
<td>第4行第1列</td>
<td>第4行第2列</td>
</tr>
</table>
<script type="text/javascript">
var table = document.getElementById("table");
console.log(table.rows);
</script>
</body>
</html>
控制台打印效果如下:
2.insertRow(index) 方法
在表格的第 index 行,插入一个新行,index 表示插入的位置,0 <= index <= 表格的行数。
// 基本语法如下
table.insertRow(index); // index 表示插入的位置,0 <= index <= 表格的行数
table.insertRow(table.rows.length); // 在表格最后插入一新行
3.deleteRow(index) 方法
删除表格的第 index 行,index 表示删除的位置,0 <= index <= 表格的行数。
// 基本语法如下
table.deleteRow(index); // 0 <= index <= 表格的行数
table.deleteRow(table.rows.length - 1); // 删除表格最后一行
4.2、HTML DOM 操作行对象
使用表格对象的 rows 属性获得当前表格的所有行,可以通过 rows[i] 取到表格的每一行,那么每一行的 rows[i] 就是行对象。
1.cells 属性
返回当前行中的所有单元格的一个数组,即返回包含行中所有单元格的一个数组。
// 基本语法如下
table.rows[0].cells; // 返回表格的第一行的所有单元格
获得第一行第一个单元格对象: table.rows[0].cells[0]
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<table id="table" style="border: 1px solid black;">
<tr style="border: 1px solid black;">
<td>第1行第1列</td>
<td>第1行第2列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
</tr>
<tr>
<td>第4行第1列</td>
<td>第4行第2列</td>
</tr>
</table>
<script type="text/javascript">
var table = document.getElementById("table");
console.log(table.rows[0].cells[0]);
</script>
</body>
</html>
控制台打印结果如下:
2.rowIndex 属性
返回当前行在表格中的索引顺序,索引从 0 开始,即返回该行在表中的位置。
// 基本语法如下
table.rows[].rowIndex; // 返回该行在表格中的索引值
3.insertCell(index) 方法
在当前行的第 index 处插入一个<td>,index 表示插入的位置,0 <= index <= 表格的行数。
// 基本语法如下
tableRow.insertCell(index); // index 表示插入的位置,0 <= index <= 表格的行数
tableRow.insertCell(table.rows.cells.length); // 在行最后插入一新单元格
4.deleteCell(index) 方法
删除当前行的第 index 个<td>,index 表示删除的位置,0 <= index <= 表格的行数。
// 基本语法如下
tableRow.deleteCell(index); // index 表示删除的位置,0 <= index <= 表格的行数
tableRow.deleteCell(table.rows.cells.length - 1); // 删除该行最后一个单元格
4.3、HTML DOM 操作单元格对象
行对象由单元格组成,同样使用行对象的 cells 属性可以返回当前行的所有单元格。而 cells[i] 所取到的每一个单元格就是单元格对象。由于需要先选中表格,所以操作单元格就需要使用 table.rows[i].cells[i] 才能取到。
1.cellIndex 属性
返回单元格在该行的索引顺序,从 0 开始,即返回该单元格在某行单元格集合中的位置。
// 基本语法如下
table.rows[0].cells[0].cellIndex; // 返回该单元格在某行中的索引值0
2.innerHTML 属性
返回或设置当前单元格中的 HTML,即设置或返回单元格的开始标签和结束标签之间的 HTML。
// 基本语法如下
table.rows[].cells[].innerHTML; // 返回该当前单元格中的HTML
3.align 属性
设置或返回单元格内部数据的水平排列方式,即设置当前单元格的水平对齐方式。
// 基本语法如下
table.rows[].cells[].align; // 返回该单元格内部数据的水平排列方式
代码示例如下:
var table = document.getElementById("table");
table.rows[0].cells[0].align = "center";
console.log(table.rows[0].cells[0].align);
实例效果:控制台打印的结果为“center”。
4.className 属性
设置或返回元素的 class 属性,即设置或获取单元格的 class 名称。
// 基本语法如下
table.rows[].cells[].className; // 返回该行在表格中的索引值
代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<table id="table" border="1">
<tr>
<th class="head">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</table>
<script type="text/javascript">
console.log(table.rows[0].cells[0].className);
</script>
</body>
</html>
控制台打印结果如下: