三、DOM 操作
3.1 JavaScript DOM 操作
DOM (Document Object Model) 为文档对象模型，是 HTML 和 XML 文档的编程接口
DOM 提供了对整个文档的访问模型，将文档作为一个树形结构
树的每个节点表示了一个 HTML 标签或标签内的文本
3.1.1 DOM 操作分类
使用 JavaScript 操作 DOM 时分为三个方面：DOM core(DOM 核心操作)、HTML-DOM 和 CSS-DOM，开发者可通过这些操作实现动态地增加、删除、修改数据
1、DOM core（DOM 核心操作）
- HTML core 定义了一套标准的针对任何结构化文档的对象
- getElementById()、getElementsByTagName() 等方法都是 DOM core 的组成部分
2、HTML-DOM
- HTML-DOM 提供了一些更简单的标记描述各种 HTML 元素的属性
- 获取 DOM 模型中的某些对象，既可以使用 DOM core 实现，也可以使用 HTML-DOM 实现
- 相对于 DOM Core 获取对象、属性而言，HTML-DOM 的代码通常较为简短
- HTML-DOM的应用范围没有 DOM core 广泛
3、CSS-DOM
- CSS-DOM 是针对 CSS 的操作
- CSS-DOM 技术的主要作用是获取和设置 style 对象的各种属性
3.1.2 节点和节点主键的关系
节点可以理解为 HTML 文档中每个标签或者元素
- 整个文档就是一个文档节点
- 每个 HTML 标签就是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每个 HTML 属性就是一个属性节点
- 注释属于注释节点
一个 HTML 文档是由各个不同的节点组成，下面示例展示了 HTML 文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM 节点</title>
</head>
<body>
<h1>标题</h1>
<p>DOM 应用</p>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</body>
</html>
以上节点的结构层次关系图
- 以上可以清晰的看出一个文档节点被抽象为一个 DOM 树的结果
- 通过 DOM 树可以方便后续对 DOM 树中的节点进行操作
使用 父节点（parent）、子节点（child）、兄弟节点（sibling）等术语来描述节点的层次关系
- 父节点拥有子节点，同级的子节点被称为同胞或兄弟节点
- 在以上 DOM 树中，顶部节点被称为 根（root）、 节点。
- 每个节点都有父节点，除了根节点，如、 的父节点都是 节点
- “DOM 节点” 的父节点是
- 一个节点可以拥有任意数量的子节点，如 节点的子节点有
- 、
和
- 兄弟节点是拥有相同父元素的节点。例如，两个
- 就是兄弟节点，它们的父节点均为
- 节点
3.1.3 节点信息
1、每个节点都拥有包含节点某些信息的属性
- nodeName（节点名称）
- nodeValue（节点值）
- nodeType（节点类型）
2、nodeName 属性含有某个节点的名称
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
3、nodeValue 属性包含文本
- 属性节点的 nodeValue 属性包含属性值
- nodeValue 属性对于文档节点和元素是不可用的
4、nodeType 属性可返回节点的类型
- 重要的节点类型
| 元素类型 | 节点类型 |
|---|---|
| 元素 element | 1 |
| 属性 attr | 2 |
| 文本 text | 3 |
| 注释 comments | 8 |
| 文档 document | 9 |
3.1.4 访问节点
使用 DOM core 访问 HTML 文档的节点主要有两种方式
1、使用 getElement 系列方法访问指定节点
2、根据节点的层次关系访问
1、使用 getElement 系列方法访问指定节点
| 方法名 | 描述 |
|---|---|
| getElementById() | 返回按 id 属性查找的第一个对象的引用 |
| getElementByName() | 返回按带有指定名称 name 查找的对象的集合 一个文档中可能会有多个同名节点，因此返回的是元素数组 |
| getElementByTagName() | 返回带有指定标签名 TagName 查找的对象的集合 |
2、根据层次关系访问节点
- 根据层次关系访问节点，可以遵循文档的结构
- 在文档的局部进行 “短距离地查找元素”
- 节点属性
| 属性名称 | 描述 |
|---|---|
| parentNode | 返回节点的父节点 |
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
- 如果你的标签之间存在空格或换行，那么这些空格和换行也算作一个节点
- 例如，输出下面的 ul 标签内有几个子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断节点</title>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
//获取 ul 节点
var obj=document.getElementsByTagName("ul")[0];
//输出 ul 内有几个子节点
alert(obj.childNodes.length);
</script>
</body>
</html>
- 运行结果
- 从上面的结果可以看出，ul 标签内只有 3 对 li 标签，但是输出结果却是 7 ，这是因为，ul 标签内的空行也被认为是一个节点，所以才会显示 7
- javaScript 内提供一组可兼容不同浏览器的 element 属性，可以消除这种因空行、换行等出现的无法准确访问到节点的情况
- element 属性只会访问到标签元素
- element 属性
| 属性名称 | 描述 |
|---|---|
| firstElementChild | 返回节点的第一个子节点 |
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibling | 下一个节点 |
| previousElementSibling | 上一个节点 |
3.2 操作节点
在网页开发中，如果想动态地改变网页内容，需要对网页中的节点进行操作
主要是对节点属性、节点、节点样式进行操作
3.2.1 操作节点的属性
HTML DOM 操作提供了获取及改变节点属性值的标准方法
- getAttribute( “属性名” ) ：用来获取属性的值
- setAttribute( “属性名”,“属性值” ) ：用来设置属性的值
- 当使用 getAttribute() 方法读取属性值时，如果属性不存在，则返回 null
3.2.2 创建或插入节点
- 使用 JavaScript 操作 DOM 有很多方法可以创建或增加一个新节点，主要方法如下
- 创建节点
| 名称 | 描述 |
|---|---|
| createElement( tagName ) | 创建一个标签名为 tagName 的新元素节点 |
| A.appendChild(B) | 把 B 节点追加到 A 节点的子节点的末尾，将 B 节点作为最后一个子元素添加到A元素 |
| insertBefore(A,B) | 把 A 节点插入到 B 节点之前 |
| cloneNode(deep) | 复制某个指定的节点 |
- insertBefore(A,B) 中有两个参数
- A 是必选项，表示插入的节点
- B 是可选项，表示新节点被插入 B 节点的前面
- cloneNode(deep) 中的参数为布尔值
- 若 deep 值为 true，则复制该节点及该节点的所有子节点
- 若 deep 值为 false，则只复制该节点和其属性
3.2.3 删除和替换节点
删除和替换节点的方法
| 名称 | 描述 |
|---|---|
| removeChild(node) | 删除元素内指定的子元素 node |
| replaceChild(newNode,oldNode) | 用其他的节点替换指定的节点 |
- 方法 replaceChild(newNode,oldNode) 有两个参数
- newNode 是替换的新节点
- oldNode 是要被替换的节点
3.2.4 操作节点样式
通过获取节点，通过改变节点的样式属性，可以实现各种动态效果
有两种方式可以动态地改变样式属性
1、使用样式的 style 属性
2、使用样式的 className 属性
1、style 属性
- style 是一个对象，代表一个单独的样式声明
- 可以通过应用样式的文档或元素访问 style 对象
- 使用 style 属性改变样式的语法 如下
HTML元素.style.样式属性="值";
- 例如：将一个id 为 titles 的 div 字体改变为红色，字体大小改为 13px
document.getElementById("titles").style.color="#FF0000";
document.getElementById("titles").style.fontSize="25px";
- 上面代码中，CSS 中设置字体属性为 font-size，在 JavaScript 中则是 fontSize
- 因为在 JavaScript中 “-” 代表减号，因此，如果 CSS 的属性有 “-”，则要省去，并且 “-” 后的字母要大写
2、className 属性
- className 属性可设置或返回元素的 class 样式
- 语法如下
HTML.元素.className="样式名称";
- 示例
//获取属性值：
HTMLElementObject.className
//设置属性值：
HTMLElementObject.className="classname"
3.2.5 获取元素样式
- JavaScript 中可以使用 style 属性获取样式的属性值，语法如下
HTML元素.style.样式属性
- 但是上面这种方法存在一定的缺陷，它只能获取行内样式的属性值，无法获取内部样式表或外部样式表中的属性值
- 微软为每个元素提供了一个 currentStyle 对象，它包含所有元素的 style 对象的特性和任何违背覆盖的 CSS 规则的 style属性
- currentStyle 对象语法如下
HTML元素.currentStyle.样式属性
- currentStyle 可以获取样式属性的值，但是只局限于 IE 浏览器，其他浏览器无法获取样式的属性值
- DOM 提供了一个 getComputedStyle() 方法，此方法接收两个参数，需要获取样式的属性值
- 语法格式如下
document.defaultView.getComputedStyle(元素,null).属性
- defaultView：获取文档的窗口对象
- getComputedStyle：方法用于获取指定元素的 CSS 样式
象语法如下**
HTML元素.currentStyle.样式属性
- currentStyle 可以获取样式属性的值，但是只局限于 IE 浏览器，其他浏览器无法获取样式的属性值
- DOM 提供了一个 getComputedStyle() 方法，此方法接收两个参数，需要获取样式的属性值
- 语法格式如下
document.defaultView.getComputedStyle(元素,null).属性
- defaultView：获取文档的窗口对象
- getComputedStyle：方法用于获取指定元素的 CSS 样式
![[python][学习]turtle.circle()函数](https://img-blog.csdnimg.cn/img_convert/2d35173b367d43ad86c5dbf40ca91167.png)
