HTMLDOM系列教程之节点（一）

这次将会给大家介绍一下DOM节点的相关内容，根据W3CSchool中的解释，DOM 是这样规定的：整个文档是一个文档节点；每个 HTML 标签是一个元素节点；包含在 HTML 元素中的文本是文本节点；每一个 HTML 属性是一个属性节点；注释属于注释节点。

那么对于这几种节点，我们应该怎么区分呢？它们之间又有没有什么关系呢？

其实它们之间是有一些等级关系的。HTML 文档中的所有节点组成了一个文档树，我们或者是叫做节点树，HTML 文档中的每个元素、属性、文本等都代表着树中的某个节点，树起始于文档节点，并由此继续伸出各种树枝，直至伸到这棵树最低级别的所有文本节点为止。

那么下面我们来看一下文档树的结构图片：

从上图我们可以看到一棵文档树中的所有节点彼此都是有关联的，我们再来看一下HTML文档的基本结构，

从上面的HTML文档结构中我们也可以看到节点间是存在关联的。由此我们可以总结出以下这几条：

1、除文档节点之外的每个节点都有父节点。比如： 和  的父节点是  节点，文本节点 “BeyondWen.cn“ 的父节点是  节点。

2、大部分元素节点都有子节点。比如： 节点有一个子节点： ， 节点也有一个子节点：文本节点 “HTML文档基本结构“。

3、当节点拥有同一个父节点时，它们是同级节点。比如： 和 

是同级，因为它们的父节点都是  节点。

4、节点也可以拥有后代，后代是指某个节点的所有子节点，或者是这些子节点的子节点，以此类推。比如：所有的文本节点都是 节点的后代，而第一个文本节点“HTML文档基本结构”是  节点的后代。

5、节点也可以拥有前辈。前辈是指某个节点的父节点，或者是父节点的父节点，以此类推。比如：所有的文本节点都可以把  节点作为前辈节点。

通过DOM，我们可以访问 HTML 文档中的每个节点。可以用以下几种方法查找节点：

1、getElementById()方法；

2、getElementsByTagName()方法；

3、parentNode属性

4、firstChild属性

5、lastChild属性

下面我们来详细介绍一下上面的几种方法

getElementById()方法：取HTML文档中的id选择器；getElementsByTagName()方法：根据标签名取得相应的元素。这两种方法是会忽略文档的结构的。假如我们希望查找文档中所有的

元素，那么getElementsByTagName()会把它们全部找到，不管

元素处于文档中的哪个层次，而getElementById()方法也会返回相应的元素，不论不论该元素在文档结构中的什么位置。

下面我们来通过详细的例子来熟悉一下他们的用法：

1、getElementById()方法：

2、getElementsByTagName()方法：

3、下面会返回所有

元素的一个节点集，且这些

元素必须是id为”beyondWeb”的元素的后代：

那么我们怎么使用节点集呢？当我们使用节点集时，通常要把此集合保存在一个变量中，比如：

现在，变量 arrP 包含着页面中所有 

 元素的一个列表，并且我们可以通过它们的索引号来访问具体的

元素。

我们可以通过使用length属性来取得arrP集合的长度，如arrP.length，然后用for(){}循环来遍历：

或者通过具体的索引号来访问具体的元素，如访问第5个元素：

对于parentNode、firstChild 以及 lastChild的具体应用，我们会在”HTML DOM系列教程之节点（二）"中详细介绍，请继续关注。