这是我参与「第五届青训营」伴学笔记创作活动的第 16 天。今天我们开始谈谈DOM相关知识，请大家多多指教！
【DOM概要】
- DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构
- W3C中将DOM标准分为3个不同的部分：
- 核心DOM：针对任何结构化的标准模型
- XML DOM：针对HML文档的标准模型
- HTML DOM：针对HTML文档的标准模型
本篇主要介绍HTML DOM模型
【HTML DOM模型】
- HTML DOM模型被构造为对象的树，该树的根节点是文档对象，该对象有一个documentElement的属性引用，表示文档根元素的Element对象
- HTML文档中表示文档根元素的Element对象是
<html>元素，<head>和<body>元素可以看作是树的枝干
一个文档中所有的节点关系分为3种，具体如下
- 直接位于一个节点之下的节点被称为为该节点的子节点
- 直接位于一个节点之上的节点被称为为该节点的父节点
- 具有相同父节点的两个节点称为兄弟节点
【获取元素的两种方式】
在开发中，要想操作页面上的某个部分，需要先获取到该部分对应的元素，再对其进行操作，下面介绍两种获取元素的方式
节点的访问
在DOM中，HTML文档的各个节点被视为各种类型的Node对象，通过某个节点的子节点可以找到该元素，其语法如下：
父节点对象=子节点的对象.parentNode
获取文档中指定的元素
通过遍历节点可以找到文档中指定的元素，但此方法比较麻烦，document对象提供了直接搜索文档中指定元素的方法，具体如下：
- 通过元素的id值获取元素 Document的getElementById()方法可以通过元素的id属性获取元素，例如，获取id属性值为userId节点的代码如下：
document.getElementById("userId");
- 通过元素的name属性获取元素 Document的getElementByName()方法可以通过元素的name属性获取元素。因为多个元素可能有相同的name值，所以该方法返回值为一个数组而不是一个元素，如果想获得具体的元素，可以通过数组索引实现。例如，获取name属性值为userName节点的代码如下：
document.getElementByName("userName")[0];
【小结】
今天总结了DOM相关知识，收获多多！
