《JavaScript DOM编程艺术》学习回顾3

今天回顾一下第三章。学到了第三章的时候，感觉终于学到了重点的地方，这本书的第三章主要是对DOM的基本解释和一些常用的方法等。

文档对象模型DOM(Document Object Model).

1、文档：DOM中的“D”

DOM中的“D”是document（文档）的意思，如果网页中没有文档，DOM这个词也就没什么意义了。当你打开浏览器时，文档就出现了。对于浏览器打开的网页来说，我们就看成是一个文档。

2、对象：DOM中的“O”

DOM中的“O”是object（对象）的意思，在javascript中用的最多的就是对象，常用的有用户子自定义的对象，内置对象，宿主对象。通过DOM的方式获取到标签后，标签已经变成了对象，就有了属于自己的属性和方法，就可以动态添加删除修改属性，完成动态的交互效果。

3、模型：DOM中的“M”

DOM中的“M”是model（模型）的意思，在DOM的世界里，我们将整个HTML文档看成是一棵树。通过树这个模型，可以很方便的获取到当前元素的父亲和儿子。想获取到那个就获取到那个。比如所html有两个孩子，即head和body，而head下又有title，script，style，meta，link等孩子，body下又有许多孩子，每个孩子下还有孩子。就像是我们人类的家族谱一样。

4、节点（node）

一份html文档是由标签和内容组成的。我们可以将所有组成html文档的部分全都看是一个节点，比如说属性节点，元素节点，文本节点。。。节点这个词是个网络的术语，它表示网络中的一个连接点。一个网络就是由一些节点构成的好、集合。Html文档就是由节点构成的集合，有些是树叶，有些是树枝而已。

1）元素节点

DOM中使用的最多的就是元素节点（Element Node），html文档的标签的名字就是元素节点，有些元素还可以包含其他的元素，那么被包含的子元素就是该元素的子节点。在整个文档中html元素是整个文档的根节点。

2）文本节点

在DOM中，可以将html标记中的文本内容看成是一种文本节点（Text Node）。通过发现可以知道文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含文本。

3）属性节点

在html文档中，每个元素几乎都有属性，通过属性可以对元素做出更具体的描述。我们称标签里的属性为属性节点（Attribute Node）。所有的属性都被包含在元素节点中。

5、CSS

学过网页设计的人都知道CSS的概念，即层叠样式表，主要用来对文档进行外表的显示，通过CSS的设置可以进行很多美观的效果。在CSS中最重要的就是id，class的概念，通过对元素进行添加id、class属性可以随时改变元素的样式。设置这些属性对于JavaScript来获取元素也是很重要。

6、获取元素

在JavaScript中获取元素有三种常用的方式，而这本书也让我知道了还有一些其他的方式获取元素。

1）getElementById()方法

DOM提供了一个名为getElementById的方法，通过这个方法可以根据要获取元素的ID的属性值来得到元素，得到的这个元素是一个DOM的对象，有了一些属于自身的属性和方法。

2）getElementsByTagName()方法

DOM提供了这个方法来根据元素的标签名获取元素，由于存在多个标签名相同的情况，所以获取到的返回的是一个数组，比如我们获取li标签，a标签的时候就可以用到这个方法。我认为DOM提供的这些方法都挺人性化的，我们完全可以通过字面的意思猜测出该方法是什么意思。

3）getElementsByClassName()方法

这个方法是这本书中特意提到的方法，看了书后，也记住了这个方法，根据方法名我们可以猜测出这是根据class属性来获取元素的，书上说这是新增的方法，但是这个方法比较新，我们现在很少看到它的使用，它获取到的也是有一二个数组。

通过在书上看以上的知识点后，我更是深深的记住了这些知识。

7、获取或设置属性

要是设置或是获取元素的属性，是一件简单的事，只要获取到元素的DOM对象后，调用想要设置或获取的元素的属性就行，比如获取到a对象之后，可以直接使用a（获取的DOM对象）.href这样就可以得到元素的href的属性值，如果设置直接复制就行。

但是有时会出现一些问题，如果使用标准的方法应该用setAttribute()方法和getAttribute()方法，它们都是DOM的标准方法。getAttribute()方法只接收一个参数，即要获取的元素的属性名，setAttribute()方法接收两个参数，第一个参数是要设置的元素的属性，第二个是元素的属性值，比如要给a设置href为“www.sohu.com”，可以写：a（DOM对象a）.setAttribute("href","www.sohu.com"),这样的方式来给a元素设置链接值，获取也是一样：a.getAttribute("href")，

我还是常用的那种直接设置的方法，如果出现了什么问题，或是想给文档写的标准点，才会用标准方法。

第三章的学习笔记到这里就结束了，过几天在写第四章的吧！