2021-09-08 笔记30

C1任务-30：DOM节点操作（上）

任务背景
DOM（DocumentObjectModel——文档对象模型）是用来处理HTML和XML的跨平台API。它允许运行在浏览器中的代码访问文档节点并与之交互，了解并掌握DOM操作是Web开发中的必经之路。

任务目标

理解DOM结构以及HTML节点关系
掌握常用的节点获取方法及属性
掌握常用的节点属性获取方式

任务训练

1.DOM结构及节点

2.整个HTML的结构都可以由类似上图的树结构表示，整个树结构由节点组成
document对象指代整个文档节点,它是文档内其他节点的访问入口，提供了操作其他节点的方法节点可以分为元素节点、文本节点和属性节点
节点之间有层级关系，父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点，同级的子节点被称为同胞（兄弟或姐妹）

3.常用节点获取方法和属性要进行DOM操作，首先要获取到需要操作的节点或节点集合，接下来以下面的示例代码为基础，介绍常用的DOM获取方法和属性。

注：复制示例代码到HTML文件中，并在浏览器内打开这个HTML文件。（Chrome浏览器中右键选择“检查”可打开控制台，选择控制台的Console可运行代码，回车查看结果）。

表1：获取元素节点常用方法

上表介绍了获取元素节点方法的基本定义，接下来我们使用具体示例介绍这些方法的具体使用方式（代码示例截图均为Chrome浏览器控制台运行结果）。

1.getElementById()代码示例
获取id为container的节点

2.getElementsByTagName()代码示例
获取所有p元素节点

3.这里获取到的是一个节点集合，节点集合无法直接用于DOM操作。可以使用索引获取节点集合中的某个元素节点（后续的节点集合也可使用这种方法）

4.querySelector()代码示例
获取被选择器”.box.item”匹配的第一个节点

除了函数方法，我们还可以使用属性来获取节点信息，下表介绍了一些获取元素节点信息常用的属性。

表2：获取元素节点信息常用属性

innerHTML代码示例获取第一个类名为item的元素内容

parentNode代码示例
获取input元素节点的父节点

children代码示例
获取类名为box的元素的子节点集合

5.常用的节点属性获取方式

表3：获取元素属性信息的常用方式

getAttribute()代码示例
获取input元素的value属性值

某些元素的属性值可以直接使用属性名获取
获取input元素的value属性值

练习题

1.获取id名为container的div元素，请补全横线处代码

2.获取ul中的第2个li元素，请补全横线处数字