BOM与DOM

1、window 对象

浏览器对象模型（Brower Object Model，BOM）使 JavaScript 有能力与浏览器“对话”。BOM 由多个对象组成，其中代表浏览器窗口的 window 对象是 BOM 的顶层对象，其他对象都是该对象的子对象，如下图所示。

window对象模型

1.1、window 对象的属性

所有浏览器都支持 window 对象，window 对象表示浏览器窗口。所有 JavaScript 全局对象、函数、变量均自动成为 window 对象的成员。

全局变量是 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

location 对象的常用属性

属  性	说  明
href	完整路径
protocol	使用的协议（http、https、ftp、file、mailto）
pathname	文件路径
port	端口号
search	从?开始往后的部分
hostname	主机名（IP地址）
host	主机名和端口号
hash	从#开始的锚点

除了 URL 属性外，location 对象还具有三个常用方法。location 对象的 reload() 方法可以重新装载当前文档；replace() 方法可以装载一个新文档而无须为它创建一个新的历史记录，即在浏览器的历史列表中，新文档将替换当前文档；assign() 方法可以加载新的文档。

location 的常用方法

方  法	说  明
assign()	加载新的文档
replace()	用新的文档替换当前文档
reload()	重新加载当前文档

注意：reload() 传参与不传参情况的区别，当 reload(true) 时，表示从服务器重新加载当前页面；而当 reload() 不传参时，表示在本地刷新当前页面。

2.3、history：历史记录对象

history 对象包含用户（在浏览器窗口中）访问过的 URL。它是 window 对象的一部分，可通过 window.history 属性对其进行访问。

history 对象是浏览器历史记录相关的对象。

history 对象的属性和方法

属性或方法	说  明
length	返回浏览器历史列表中的 URL 数量
back()	加载 history 列表中的前一个 URL，与在浏览器中单击后退按钮相同
forward()	加载 history 列表中的下一个 URL，与在浏览器中单击按钮向前相同
go()	跳转到浏览器历史列表的任意位置。位置标志：当前页为第 0 个，前一个页面第 1 个，后一个页面 -1 个

2.4、navigator：浏览器配置对象

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 系列方法，可以取到元素节点。

DOM 树结构

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>

控制台打印结果如下：