前端架构师之10_JavaScript_DOM

1 DOM 对象简介

1.1 什么是 DOM

DOM：Document Object Model，文档对象模型。

作用：是一套规范文档内容的通用型标准。

1998年10月，DOM正式成为W3C的推荐标准。

第1级DOM（DOM Level 1，或DOM1）。为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。结合了Netscape及微软公司开发的DHTML（动态HTML）思想。

2000年11月，发布了第2级DOM（DOM Level 2，或DOM2）。在DOM1的基础上增加了样式表对象模型。

第3级DOM（DOM Level 3，或DOM3）。在DOM2基础上增加了内容模型、文档验证以及键盘鼠标事件等功能。

直到目前为止，DOM几乎被所有浏览器所支持。

1.2 DOM HTML 节点树

DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。

文档（Document）表示HTML文件。
文档中的标签称为元素（Element）。
文档中的所有内容称为节点（Node）。

因此，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
    </head>
    <body>
        <a href="#">链接</a>
        <p>段落...</p>
    </body>
</html>

HTML文档根据节点作用，分为标签节点、文本节点、属性节点和注释节点。
各节点之间的关系，又可分为以下几个方面：
- 根节点：<html> 标签是整个文档的根节点，有且仅由一个。
- 子节点：指的是某一个节点的下级节点。
- 父节点：指的是某一个节点的上级节点。
- 兄弟节点：两个节点同属于一个父节点。

1.3 DOM 对象的继承关系

在JavaScript中要对网页中的元素进行操作，可以利用document对象的getElementById()方法实现，但是此方法的返回值类型是什么？

<div id="test"></div>
<script>
    var test = document.getElementById('test');
    console.log(test);            // 输出结果：<div id="test"></div>
    console.log(test.__proto__);  // 输出结果：HTMLDivElement { …… }
</script>

document和Element是两种不同类型的节点（Node）对象。
它们不仅能够使用Node对象的一系列属性和方法完成节点操作。
也可以使用特有的属性和方法完成不同类型节点的操作。

<div id="test"></div>
<script>
  var test = document.getElementById('test');
  console.log(test.nodeName);      // 通过节点方式获取节点名，输出结果：DIV
  console.log(test.tagName);       // 通过元素方式获取标签名，输出结果：DIV
  console.log(document.nodeName);  // document属于节点，输出结果：#document
  console.log(document.tagName);   // document不属于元素，输出结果：undefined
</script>

除了document和Element对象，还有其他几种类型的节点对象也继承Node对象，如文本（Text）、注释（Comment）等。

Node.属性名	值	相应的对象	说明
ELEMEN_NODE	1	Element	元素节点
ATTRIBUTE_NODE	2	Attr	属性节点
TEXT_NODE	3	Text	文本节点
COMMENT_NODE	8	Comment	注释节点
DOCUMENT_NODE	9	Document	文档节点

2 HTML 元素操作

2.1 获取操作的元素

document对象的方法和属性
Element对象的方法和属性

document对象的方法和属性

document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。

方法	说明
document.getElementById()	返回对拥有指定id的第一个对象的引用
document.getElementsByName()	返回带有指定名称的对象集合
document.getElementsByTagName()	返回带有指定标签名的对象集合
document.getElementsByClassName()	返回带有指定类名的对象集合（不支持IE6~8）

注意：除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。若要获取其中一个对象，可以通过下标的方式获取，默认从0开始。

document对象提供一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等。

属性	说明
document.body	返回文档的body元素
document.documentElement	返回文档的html元素
document.forms	返回对文档中所有Form对象引用
document.images	返回对文档中所有Image对象引用

document对象的body属性用于返回body元素。
document对象的documentElement属性用于返回HTML文档的根节点html元素。

通过document对象的方法与document对象的属性获取的操作元素表示的都是同一对象。

如document.getElementsByTagName(‘body’)[0]与document.body全等。

HTML5新增的document对象方法

HTML5中为更方便获取操作的元素，为document对象新增了两个方法，分别为querySelector()和querySelectorAll()。

querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。
querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。

// 这两个方法的使用方式相同
console.log(document.querySelector('div'));        // 获取匹配到的第1个div
console.log(document.querySelector('#box'));       // 获取id为box的第1个div
console.log(document.querySelector('.bar'));       // 获取class为bar的第1个div
console.log(document.querySelector('div[name]'));  // 获取含有name属性的第1个div
console.log(document.querySelector('div.bar'));    // 获取文档中class为bar的第1个div
console.log(document.querySelector('div#box'));    // 获取文档中id为box的第1个div

Element对象的方法和属性

在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的两个方法分别为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。

<ul id="ul">
    <li>PHP</li>
    <li>JavaScript</li>
    <ul>
        <li>jQuery</li>
    </ul>
</ul>
<script>
    var lis = document.getElementById('ul').getElementsByTagName('li');
    console.log(lis);// 输出结果：(3) [li, li, li]
</script>

除此之外，元素对象还提供了children属性用来获取指定元素的子元素。例如，获取上述示例中ul的子元素。

var lis = document.getElementById('ul').children;
console.log(lis);		// 输出结果：(3) [li, li, ul]

元素对象的children属性返回的也是对象集合，若要获取其中一个对象，也需通过下标的方式获取，默认从0开始。
另外，document对象中也有children属性，它的第一个子元素通常是html元素。

HTMLCollection对象

HTMLCollection对象：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。
NodeList对象：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象，IE11返回的是HTMLCollection对象。

HTMLCollection与NodeList对象的区别：

HTMLCollection对象用于元素操作。
NodeList对象用于节点操作。

对于getElementsByClassName()方法、getElementsByTagName()方法和children属性返回的集合中可以将id和name自动转换为一个属性。

<li id="test" name="test">test</li>
<script>
    var lis1 = document.getElementsByTagName('li');  // 获取标签名为li的对象集合
    var test = document.getElementById('test');      // 获取id为test的li元素对象
    lis1.test === test;                              // 比较结果：true
    var lis2 = document.getElementsByName('test');   // 获取name名为test的对象集合
    lis1.test === lis2[0];                           // 比较结果：true
</script>

2.2 元素内容

JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。

分类	名称	说明
属性	innerHTML	设置或返回元素开始和结束标签之间的HTML
属性	innerText	设置或返回元素中去除所有标签的内容
属性	textContent	设置或者返回指定节点的文本内容
方法	document.write()	向文档写入指定的内容
方法	document.writeln()	向文档写入指定的内容后并换行

属性属于Element对象，方法属于document对象。
innerHTML在使用时会保持编写的格式以及标签样式。
innerText则是去掉所有格式以及标签的纯文本内容。
textContent属性在去掉标签后会保留文本格式。

innerText属性在使用时可能会出现浏览器兼容的问题。因此，推荐在开发时尽可能的使用innerHTML获取或设置元素的文本内容。

同时，innerHTML属性和document.write()方法在设置内容时有一定的区别，前者作用于指定的元素，后者则是重构整个HTML文档页面。因此，读者在开发中要根据实际的需要选择合适的实现方式

2.3 练习作业

改变盒子大小
- 编写HTML，设置div的大小。
- 根据用户的点击次数完成盒子大小的改变。
- 单击的次数为奇数时，盒子都变大，单击次数为偶数时，盒子都变小。

2.4 元素属性

在DOM中，为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性，提供了操作的属性和方法。

分类	名称	说明
属性	attributes	返回一个元素的属性集合
方法	setAttribute(name, value)	设置或者改变指定属性的值
方法	getAttribute(name)	返回指定元素的属性值
方法	removeAttribute(name)	从元素中删除指定的属性

利用attributes属性可以获取一个HTML元素的所有属性，以及所有属性的个数length。

2.5 元素样式

通过元素属性的操作修改样式。

元素样式语法：style.属性名称。

需要去掉CSS样式名里的中横线“-”，并将第二个英文首字母大写。
设置背景颜色的background-color，在style属性操作中，需要修改为backgroundColor。

名称	说明
background	设置或返回元素的背景属性
backgroundColor	设置或返回元素的背景色
display	设置或返回元素的显示类型
height	设置或返回元素的高度
left	设置或返回定位元素的左部位置
listStyleType	设置或返回列表项标记的类型
overflow	设置或返回如何处理呈现在元素框外面的内容
textAlign	设置或返回文本的水平对齐方式
textDecoration	设置或返回文本的修饰
textIndent	设置或返回文本第一行的缩进
transform	向元素应用2D或3D转换

<div id="box"></div>
<script>
    var ele = document.getElementById('box');  // 获取元素对象
    ele.style.width = '100px';
    ele.style.height = '100px';
    ele.style.backgroundColor = 'red';
    ele.style.transform = 'rotate(7deg)';
</script>

CSS中的float样式与JavaScript的保留字冲突，在解决方案上不同的浏览器存在分歧。IE9_{11、Chrome、FireFox可以使用“float”和“cssFloat”，Safari浏览器使用“float”，IE6}8则使用“styleFloat”。

一个元素的类选择器可以有多个，在开发中如何对选择器列表进行操作？

原来的解决方案：利用元素对象的className属性获取，获取的结果是字符型，然后再根据实际情况对字符串进行处理。
HTML5提供的办法：新增的classList（只读）元素的类选择器列表。

若一个div元素的class值为“box header navlist title”，如何删除header？

HTML5解决方案：div元素对象.classList.toggle(“header”);

除此之外，classList属性还提供了许多其他相关操作的方法和属性。

分类	名称	说明
属性	length	可以获取元素类名的个数
方法	add()	可以给元素添加类名，一次只能添加一个
方法	remove()	可以将元素的类名删除，一次只能删除一个
方法	toggle()	切换元素的样式，若元素之前没有指定名称的样式则添加，如果有则移除
方法	item()	根据接收的数字索引参数，获取元素的类名
方法	contains()	判断元素是否包含指定名称的样式，若包含则返回true，否则返回false

2.6 练习作业

标签栏切换效果
- 编写HTML，实现标签栏的结构与样式的设计，其中class等于current表示当前显示的标签，默认是第一个标签。
- 获取所有的标签与标签对应的显示内容。
- 遍历并为每个标签添加鼠标滑过事件，在事件的处理函数中，遍历标签对应的所有显示内容，当鼠标滑过标签时，通过classList的add()方法添加current，否则通过remove()方法移出current。

3 DOM 节点操作

3.1 获取节点

由于HTML文档可以看做是一个节点树，因此，可以利用操作节点的方式操作HTML中的元素。

属性	说明
firstChild	访问当前节点的首个子节点
lastChild	访问当前节点的最后一个子节点
nodeName	访问当前节点名称
nodeValue	访问当前节点的值
nextSibiling	返回同一树层级中指定节点之后紧跟的节点
previousSibling	返回同一树层级中指定节点的前一个节点
parentNode	访问当前元素节点的父节点
childNodes	访问当前元素节点的所有子节点的集合

childNodes属性与前面学习过的children属性的区别。

相同点：都可以获取某元素的子元素。
不同点： childNodes属性用于节点操作，返回值中还会包括文本节点等其他类型的节点，是一个NodeList对象的集合。 children属性用于元素操作，返回的是HTMLCollection对象的集合

childNodes属性在IE6~8不会获取文本节点，在IE9及以上版本和主流浏览器中则可以获取文本节点。

此外，由于document对象继承自Node节点对象，因此document对象也可以进行以上的节点操作。

// 访问document节点的第1个子节点
document.firstChild;              // 访问结果：<!DOCTYPE html>
// 访问document节点的第2个子节点
document.firstChild.nextSibling;  // 访问结果：<html>……</html>

3.2 节点追加

在获取元素的节点后，还可以利用DOM提供的方法实现节点的添加，如创建一个li元素节点，为li元素节点创建一个文本节点等。

方法	说明
document.createElement()	创建元素节点
document.createTextNode()	创建文本节点
document.createAttribute()	创建属性节点
appendChild()	在指定元素的子节点列表的末尾添加一个节点
insertBefore()	为当前节点增加一个子节点（插入到指定子节点之前）
getAttributeNode()	返回指定名称的属性节点
setAttributeNode()	设置或者改变指定名称的属性节点

create系列的方法是由document对象提供的，与Node对象无关。

3.3 节点删除

语法：removeChild()和removeAttributeNode()方法实现。

返回值：是被移出的元素节点或属性节点。

3.4 练习作业

列表的增删和移动
- 编写HTML代码，设计列表的结构与显示样式。
- 编写SmartList对象，用于实现列表的生成。
- 编写Find对象，用于获取指定前缀的元素，查找移动列表项的前后元素。
- 编写List对象，用于创建列表对象，处理上移、下移、删除按钮的单击事件。
- 编写add对象，控制添加区域是否显示、添加到列表内的操作或取消添加操作。

4 练习作业

商品购物车
- 编写HTML代码，设计购物车的结构与显示样式。
- 编写ShopCart对象，用于完成购物车的所有功能。
- 编写Find对象，用于获取指定前缀的元素。
- 编写Cart对象，用来创建购物车，实现商品的添加、完成购物车的统计、全选以及商品删除功能。
  构与显示样式。
- 编写SmartList对象，用于实现列表的生成。
- 编写Find对象，用于获取指定前缀的元素，查找移动列表项的前后元素。
- 编写List对象，用于创建列表对象，处理上移、下移、删除按钮的单击事件。
- 编写add对象，控制添加区域是否显示、添加到列表内的操作或取消添加操作。

[外链图片转存中…(img-oilsdVuf-1695797805052)]

[外链图片转存中…(img-ho5MC4TT-1695797805053)]

4 练习作业

商品购物车
- 编写HTML代码，设计购物车的结构与显示样式。
- 编写ShopCart对象，用于完成购物车的所有功能。
- 编写Find对象，用于获取指定前缀的元素。
- 编写Cart对象，用来创建购物车，实现商品的添加、完成购物车的统计、全选以及商品删除功能。
- 编写Item对象，创建购物车中的一件商品及商品的小计，商品的选择、商品数量的修改以及删除操作。