HTML DOM（学习笔记二）

嗯，在HTML DOM（学习笔记一）中简单描述了一下HTML DOM 是什么，这一篇将记录下来有关HTML DOM的内容！

1：DOM节点

首先，再来看一下HTML DOM的树状结构，如下图所示：

这就是我们要处理的HTML DOM 也就是一种HTML文档的另一种表现的形式，更加接近我们的HTML文档的表现形式的样式是这样的，如下图所示：

在HTML DOM中，所有的事物都是节点。HTML DOM就是被视为节点树的HTML。根据W3C的HTML DOM标准，HTML文档中所有内容都是节点，如上图所示，整个文档是一个文档节点；每一个HTML元素是一个元素节点；HTML元素的文本是文本节点；每一个HTML元素的属性是属性节点；而注释是注释节点。通过HTML DOM，树中的所有节点均能通过JAVASCRIPT进行访问。所有的HTML节点都可以被修改、也可以被创建和删除。

如果学习过数据结构中的树，那么对于理解树形数据结构的特点来说是非常容易的，不过即使没有学习过，通过看下面的图也是非常容易理解的。

了解树形数据结构的特点，对于理解通过HTML节点的属性来找其他的HTML节点是非常有帮助的！

 

2：DOM方法

如果想操作HTML节点，必须先获得对应的节点才可以，而获得HTML节点的常用方式有两种，一是：通过HTML节点的方法（主要用来控制我们能够执行的动作）；二是：通过HTML节点的属性（主要用来控制我们能够获取或者设置的值，以及根据树形结构的特点获取与其相关联的其他HTML节点）

下面是一些我们在实际的开发工作中常使用到的方法：

1）getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用，如果有多个HTML节点的ID属性是一样的则返回第一个，这个方法非常常用。

2）getElementsByName() 方法可返回带有指定名称的对象的集合，注意是集合。

3）getElementsByTagName()方法可返回带有指定标签名的所有元素，注意是集合。

3）write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。

4）appendChild() 方法向节点添加最后一个子节点。

5）removeChild() 方法指定元素的某个指定的子节点。

6）setAttribute() 方法添加指定的属性，并为其赋指定的值。

7）getAttribute() 方法返回指定属性名的属性值。

当然，还有许多的方法，这些是最常用的一些而已，最后总结的时候我会将所有的方法都列出来一下，这个工作W3C已经做的很好了！使用任何方法在联网的情况下也是非常简单的，当然，如果想了解的深入和熟练最好自己多加的练习！

3：DOM属性

属性通常控制着HTML节点的状态特性，我们可以通过HTML节点的属性来获取或者设置对应的HTML节点的状态值。

在实际的开发工作中常用的属性如下：

1）innerHTML属性，用于获取HTML节点的内容，此属性对于获取或者替换HTML节点的内容是非常有用的。

2）parentNode属性，用于获取HTML节点的父节点，注意是单个。

3）childNodes属性，用于获取HTML节点的子节点们，注意很可能是多个。

4）attributes属性，用于获取HTML节点的属性集。

注意：对于不同的HTML节点类型而言其对应的nodeName属性、nodeValue属性、nodeType属性的值是不一样的，归类如下：

nodeName属性用于规定HTML节点的名称：

1）nodeName是只读的。

2）元素节点的nodeName与对应的HTML标签名相同。

3）属性节点的nodeName与对应的HTML属性名相同。

4）文本节点的nodeName始终是#text。

5）文档节点的nodeName始终是#document。

nodeValue属性用于规定HTML节点的值：

1）元素节点的nodeValue是undefined或者null。

2）文本节点的nodeValue是文本本身。

3）属性节点的nodeValue是属性值。

nodeType属性用于规定HTML节点的类型，也是只读的：

下面是比较重要的几种HTML节点的类型

1）元素节点——1

2）属性节点——2

3）文版节点——3

4）注释节点——8

5）文档节点——9

 

嗯，我觉得以上内容就是HTML DOM的最为核心的知识点了：

1）换一种视角来看待HTML文档，将HTML文档看作是一棵DOM树，文档的所有内容都可以映射为DOM树的节点

2）使用DOM方法来控制HTML DOM的行为或者说来展现它的行为，当然最为关键的就是查找对应的HTML节点的方法了。

3）使用DOM属性来控制HTML DOM的状态，获取它的状态值或者重新的设置他的状态值。

不过这样只是了解个大概的情况，并不能在客户端或者服务器端通过脚本来灵活的控制或者构建复杂多变、灵活实用、丰富多彩的HTML页面，如果想达到这个地步就需要继续深入、全面、系统的学习了，让自己的知识像一棵茁壮繁茂的DOM树一样。自己熟知树上的每一个节点，并且可以很快的定位到自己想定位的任何一个节点，熟知每一个节点的属性可以根据自己的需要做出自己想要的调整！

推荐看看下面的文档并且动手实验实验：

HTML DOM实例。

HTML DOM参考。

感谢W3C！感谢互联网！