JavaScript快速入门（六）——DOM

阳光穿透心脏的1/2处 2022-08-07 00:29 147阅读 0赞

允许转载，但请注明出处：http://blog.csdn.net/sysuzjz/article/details/43774129

# 概念扫盲 #

## DOM ##

DOM是 Document Object Model（文档对象模型）的缩写，是W3C（万维网联盟）的标准。  
DOM 定义了访问 HTML 和 XML 文档的标准：  
“W3C 文档对象模型 （DOM） 是 **中立于平台和语言的接口**，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”  
W3C DOM 标准被分为 3 个不同的部分：

*  核心 DOM - 针对任何结构化文档的标准模型
 *  XML DOM - 针对 XML 文档的标准模型
 *  HTML DOM - 针对 HTML 文档的标准模型

这篇文章主要讲HTML DOM

## HTML DOM ##

HTML DOM 是：

*  HTML 的标准对象模型
 *  HTML 的标准编程接口
 *  W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。  
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

## JavaScript DOM ##

前面讲过，DOM定义了访问HTML和XML文档的标准：“W3C 文档对象模型 （DOM） 是 **中立于平台和语言的接口**，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

注意粗体字部分，DOM是中立于平台和语言的接口，也就是任意平台、任意语言中，都有相应的DOM接口。但在我们这篇文章中，我们主要的还是采用浏览器平台、JavaScript语言中的DOM接口来做阐述，这也是目前使用最频繁的接口了。

只是想提醒大家，不要以偏概全，认为只有JavaScript中的DOM才是真正的DOM。下文中，我们说的DOM接口也全部是JavaScript DOM和HTML DOM中的内容。

学习这部分需要大家对HTML、CSS、JS有基础的认识和了解。

# DOM树 #

## 简单的DOM树 ##

我们之前说过一句话，也希望大家记住这句话：“有嵌套的地方就有父子关系。”

HTML中允许嵌套，并且允许多重嵌套，多种父子关系就形成了一棵树，我们叫它DOM树。

我们先来看一份简单的HTML代码：

它的DOM树是这样的：

![HTML DOM Node Tree][]

## 节点关系 ##

基本的节点关系有父子、同胞，衍生出来的有祖先—后代。父节点我们用parent表示，子节点用child，同胞用sibling。

*  在节点树中，顶端节点被称为根（root）
 *  每个节点都有父节点、除了根（它没有父节点）
 *  一个节点可拥有任意数量的子
 *  同胞是拥有相同父节点的节点

我们将刚才的DOM树截取掉一部分，

![DOM 节点关系][DOM]

这样就比较清楚了。

## 节点类型 ##

文档的不同组成部分有不同的节点类型，共有12种，具体如下：

<table style="border-style:solid; border-color:rgb(170,170,170); margin:10px 0px 0px; padding:0px; border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 6px; vertical-align:baseline; background-color:rgb(213,213,213)"> 节点类型值</th> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 6px; vertical-align:baseline; background-color:rgb(213,213,213)"> 节点类型</th> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 6px; vertical-align:baseline; background-color:rgb(213,213,213)"> 描述</th> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 6px; vertical-align:baseline; background-color:rgb(213,213,213)"> 子节点</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239); width:16px"> 1</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239); width:155px"> Element</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239); width:226px"> 代表元素</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 2</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Attr</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表属性</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Text, EntityReference</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 3</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Text</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表元素或属性中的文本内容。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> None</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 4</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> CDATASection</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表文档中的 CDATA 部分（不会由解析器解析的文本）。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> None</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> EntityReference</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表实体引用。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 6</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Entity</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表实体。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 7</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> ProcessingInstruction</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表处理指令。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> None</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 8</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Comment</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表注释。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> None</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 9</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Document</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表整个文档（DOM 树的根节点）。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Element, ProcessingInstruction, Comment, DocumentType</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 10</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> DocumentType</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 向为文档定义的实体提供接口</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> None</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 11</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> DocumentFragment</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表轻量级的 Document 对象，能够容纳文档的某个部分</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 12</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Notation</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 代表 DTD 中声明的符号。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> None</td> 
  </tr> 
 </tbody> 
</table>

其中，常用的是类型有Element，Attr，Text，Document等几种。节点类型可以通过以下语句来获得：

node.nodeType

获取到的将是对应的节点类型值，注意这个值以字符串形式返回。

不同的节点类型的nodeName 和nodeValue返回值如下：

<table style="border-style:solid; border-color:rgb(170,170,170); margin:10px 0px 0px; padding:0px; border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th colspan="2" style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 6px; vertical-align:baseline; background-color:rgb(213,213,213)"> 节点类型</th> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 6px; vertical-align:baseline; background-color:rgb(213,213,213)"> nodeName 返回</th> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 6px; vertical-align:baseline; background-color:rgb(213,213,213)"> nodeValue 返回</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239); width:16px"> 1</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239); width:155px"> Element</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239); width:226px"> 元素名</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> null</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 2</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Attr</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 属性名称</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 属性值</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 3</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Text</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> #text</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 节点的内容</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 4</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> CDATASection</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> #cdata-section</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 节点的内容</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> EntityReference</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 实体引用名称</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> null</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 6</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Entity</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 实体名称</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> null</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 7</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> ProcessingInstruction</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> target</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 节点的内容</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 8</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Comment</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> #comment</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 注释文本</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 9</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Document</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> #document</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> null</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 10</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> DocumentType</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 文档类型名称</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> null</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 11</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> DocumentFragment</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> #document 片段</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> null</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 12</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> Notation</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> 符号名称</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:6px 15px 6px 6px; vertical-align:text-top; background-color:rgb(239,239,239)"> null</td> 
  </tr> 
 </tbody> 
</table>

# JavaScript DOM接口 #

## 获取DOM node ##

### 传统方法 ###

获取DOM节点的传统方法有三种，分别是getElementById, getElementsByTagName, getElementsByName。

getElementById属于document对象的方法，传入参数为节点的id值，返回该id对应的节点。由于id是独一无二的，所以返回值只有一个节点。如果文档中有多个同名id，不同浏览器处理结果可能不同，例如谷歌浏览器是以最后一个为准。例如：

<html>
        <head>
            <title>文档标题</title>
        </head>
        <body>
            <form action="get" id="target-form">
                <input type="text" name="target-input" value="123" />      
            </form>
        </body>
        <script type="text/javascript">
            var a = document.getElementById("target-form"); // form对应的节点
        </script>
    </html>

切记不要丢了前面的document，否则会报错。

getElementsByName和getElementById很相似，都是document对象里的方法，不同的是传入的参数为节点的name。由于文档中允许存在同个name值的节点，例如<input type="radio" />，又例如多个表单中的同名表单项。所以返回对象是一个nodelist，你也可以把它当成一个数组。

我们还是用上面的例子，把js部分修改一下：

var a = document.getElementsByName("target-input")[0]; // input对应的节点

getElementsByTagName和前面两个分别有相同之处，又有不同之处。它不仅仅是document对象的方法，还是所有元素节点的方法。它传入的参数是标签名，返回的是nodelist，因为明显同个文档中可以有多个相同标签。

<html>
        <head>
            <title>文档标题</title>
        </head>
        <body>
            <form action="get" id="target-form">
                <input type="text" name="target-input" value="123" />      
            </form>
        </body>
        <script type="text/javascript">
            var a = document.getElementById("target-form").getElementsByTagName("input")[0]; // input对应的节点
        </script>
    </html>

可能有些人会问，我还看到了getElementsByClassName方法啊。其实，这方法只是部分浏览器产商定下的方法，很实用，但并非W3C标准里的方法，至少IE8及以下是不能用的。

### 新的方法 ###

HTML5中，新支持了两个节点获取方法，那就是querySelector和querySelectorAll方法，两者都是document或元素节点的方法。它们的参数一样，都是字符串，且以CSS选择器的形式体现，不同的是，querySelector返回首次匹配的节点，而querySelectorAll返回nodeList，查找原则为深度优先和先序遍历。

<html>
        <head>
            <title>文档标题</title>
        </head>
        <body>
            <form action="get" id="target-form">
                <input type="text" name="target-input" value="123" />
                <input type="text" name="target-input2" value="123" />
            </form>
        </body>
        <script type="text/javascript">
            var a = document.querySelector("#target-form").querySelectorAll("input"); // 包含两个input的数组
        </script>
    </html>

## 获取及操纵属性值 ##

我们终究是要利用这些接口来做点什么的，例如，我们想获取上文那例子里面输入框的值。我们可以这么写：

var a = document.getElementById("target-form").getElementsByTagName("input")[0].value;

如果我们要设定输入框的值，也类似：

document.getElementById("target-form").getElementsByTagName("input")[0].value = “12345”;

但这样好像没什么用，我们换种用法，更使用一点。我们经常看到有一种效果，点击按钮，某个东西消失了，再点击，又出现了。我们来模拟一下：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>文档标题</title>
        </head>
        <body>
            <p>点击按钮此句消失</p>
            <button id="btn">消失</button>
        </body>
        <script type="text/javascript">
            var btn = document.getElementById("btn"),
                p = document.getElementsByTagName("p")[0];
            btn.onclick = function() {
                if(p.style.display == "none") {
                    p.style.display = "";
                    this.innerText = "消失";
                } else {
                    p.style.display = "none";
                    this.innerText = "显示";
                }
            }
        </script>
    </html>

在这里，我们操作的是元素节点p里面的属性节点style，修改其display属性，从而达到修改CSS的目的。

# DOM 事件 #

在上例中我们看到了一个点击事件，这就是事件中的一种。关于DOM事件我们在另一篇文章中有详细讲到，详情请点击观看 [JavaScript事件][JavaScript]。

[HTML DOM Node Tree]: /images/20220805/277fcd1ef627481192c115cf8bec00af.png
[DOM]: /images/20220805/4aebf2ecfa7349d8ba57374bc68a4b81.png
[JavaScript]: http://blog.csdn.net/sysuzjz/article/details/42262589