#DOM 本节 JavaScript 的 DOM 操作，内容主要包括：通过 ID、名字、标签名选取元素；通过 getAttribute 和 setAttribute 获取和设置元素属性；通过 parentNode 获取父元素、createElement 动态地创建节点、appendChild 和removeChild 动态地添加或者删除节点。 ##一、收获 ###**1 基本概念** 1.1 什么是 DOM DOM 是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的，所以，**DOM 可以理解成文档（HTML 文档、XML 文档）的编程接口。** 严格地说，DOM 不属于 JavaScript，但是操作 DOM 是 JavaScript 最常见的任务，而 JavaScript 也是最常用于 DOM 操作的语言，本章介绍的就是 JavaScript 对 DOM 标准的实现和用法。 1.2 节点 DOM 的最小组成单位叫做节点（node），一个文档的树形结构（DOM 树），就是由各种不同类型的节点组成。对于 HTML 文档，节点主要有以下六种类型：　节点　　　　　　　　名称　　　　　　　含义 Document　　　文档节点　　　　整个文档（window.document） DocumentType　文档类型节点　　文档的类型 Element 　　　元素节点　　　HTML 元素（比如、等） Attribute　　　属性节点　　　　　HTML 元素的属性（比如 class="right"） Text 　　　　　文本节点　　　　　HTML 文档中出现的文本 DocumentFragment文档碎片节点　　　文档的片段＃＃＃**2 选取文档元素** 2.1 通过 ID 选取元素我们可以使用方法 getElementById() 通过元素的 ID 而选取元素，并对其做操作，比如： ```

``` 通过 getElementByID() 设置了 ID 为 my_div 的一个 div 标签的高度（100px）和颜色（red），效果： https://dn-anything-about-doc.qbox.me/JS_2015/0601.png 2.2 通过名字（Name）或标签名（TagName）选取元素除了通过 ID 选择元素，我们还可以使用 getElementsByName() 方法或者 getElementsByTagName() 方法找到元素，不过如果有多个同类型标签，那我们需要以下标来确认： ``` ``` 效果如图： https://dn-anything-about-doc.qbox.me/JS_2015/0602.png ###**3 节点、属性操作和文档遍历** 3.1 查询和设置元素的属性 **可以通过 getAttribute() 和 setAttribute() 查询和设置元素的属性：** ```

before:
after: ``` 代码可见，一开始 div_1 的属性为 class_1，我们通过getAttribute() 方法可以查看到该结果；然后我们使用 setAttribute() 方法将 div_1 的属性设置为 class_2 ，然后再次使用 getAttribute() 方法查询，可见属性已经变为 class_2 ，结果如图： https://dn-anything-about-doc.qbox.me/JS_2015/0603.png 2.3.2 父节点 **通过 parentNode() 方法可以查看并操作一个节点的父节点**，示例：找到 id 为 demo 的元素的父节点，并输出其 class 的名称： ```

``` 2.3.3 创建和插入节点在了解 JavaScript 之前，可能会以为一个 HTML 页面被写出来是什么样，那它就固定了是什么样子。但是 JavaScript 可以动态地在页面中创建并插入节点，这便**需要用到 createElement()、appendChild() 方法，它们的作用分别是创建节点和插入节点。** 比如：创建一个 div 并为其设置高度（100px）和背景色（red），并追加到 body 后面： ```

``` 2.3.4 删除节点除了创建，我们还可以删除一个节点，通过 removeChild() 方法： ```

``` **点击按钮 “remove red div” 便可以删去页面上红色的部分：** https://dn-anything-about-doc.qbox.me/JS_2015/0604.png

“Javascript基础（新版）”实验报告