很久没有更新关于JavaScript方面的内容，不是已经遗忘，而是不知道该如何下手写。对于不甚确定的内容总是有些担心写出的内容是否对错，而且对js这块内容还是没有入门，有些概念的认识和把握还难以消化。

讲到JavaScript，不得不提的就是DOM，DOM是“Document Object Model”（文本对象模型）的首字母缩写。document（文档）是整个DOM操作的基础，没有他就无从谈起，我们遇到的每个web页面，在浏览器加载的过程中，DOM也就随之生成。object（对象）是一种独立的数据集合，熟悉其他类程序语言的朋友应该对这个概念很熟悉，用生活中的例子，比如像动物、植物等某种同类数据的集合就构成一个对象。model（模型）是提供页面的一种表现形式，类似于一个国家或者城市的地图。

上面讲到DOM中的模型，可以套用家谱树的形式来解释，很巧妙，却很强大，让人很容易就能理解。下面看一个例子：

提示：你可以先修改部分代码再运行。

简单的页面，清晰的结构，用家谱树表现如下：

DOM家谱树

从上图我们可以看出，html是整个家族的根，称之为根节点，接下来有两个分枝，他们是存在于同一层且互不包含，我们称他们彼此为兄弟，他们有共同的父元素，也有各自不同的子元素，所以他们本身又是其他元素的父元素。所以，所有有联系的元素之间都是通过这种层级关系表现出来的。

上面我们提到了一个名字，节点，那什么是节点呢？这个名词源于网络理论，代表着网络中的一个连接点。引入一个原子的概念，我们知道一切事物都是有原子构成的，而原子就是所代表事物的节点。在DOM中也有类似情况，文档即是由节点构成的集合。

DOM中节点，大致可以分为三类：

元素节点：构成页面框架和结构的各种标签，例如<body>、<p>、<ul>等。一个特殊的节点就是上面我们提到的<html>，因为他是没有被任何标签所包含的，所以叫根节点。

文本节点：包含在元素节点的内容，上例中，元素<p>中包含的“Don’t forget to buy this stuff.”，他就是一个文本节点。需要注意的是，文本节点一定包含在元素节点中，但并不是每一个元素节点都有文本节点。

属性节点：元素节点中起描述作用的属性部分。几乎所有标签中都有title这个属性，可以利用这个属性都该标签进行描述说明。

  1. <p title="a gentle reminder">Don't forget to buy this stuff.</p>

上例中title="a gentle reminder"即是一个属性节点。

节点树

上面都只是介绍了一些关于DOM的基本概念，接下来，我们就学习几种常用的DOM方法。

1、getElementById()方法

这个方法将返回一个与给定Id属性值的元素节点相对应的对象。需要注意：a、JavaScript是区分大小写的，所以一定要注意方法中的大小写区别；b、Id要写在括号()中，且用单引号或双引号括起来；c、方法操作返回的类型是对象，可以通过typeof来判断。

2、getElementsByTagName()方法

该方法将通过指定的元素节点返回一个数组对象，每个对象分别对应着文档中与给定元素节点相同的元素。他虽然和getElementById类似，但有个本质的区别：getElementById返回的是一个对象，而getElementsByTagName返回的是一组对象，这个用Element(Elements)单、复数就很好的进行区别。

3、getAttribute()方法

该方法是一个函数，通过这个函数，可以查找出指定元素节点的各种属性。不过getAttribute()方法不能通过document对象调用，而必须通过一个元素节点来调用。

4、setAttribute()方法

之前我们介绍的方法只能用来检索信息，而setAttribute方法与之本质的区别就是可以将检索出的属性节点的值进行修改。setAttribute方法需要与getAttribute()方法结合使用，二者之间的区别是：getAttribute()方法只有一个参数，用来检索属性节点；而setAttribute方法则需要两个参数，一个是属性节点，一个是该属性节点要修改的值。

介绍了这个多内容，大家应该觉得很枯燥，具体怎样才能使用这些方法呢？下面就来实现一个常见的图片浏览的效果：

提示：你可以先修改部分代码再运行。

很神奇吧！其实只是短短的三句代码，就实现了css难以完成的效果，这大概就是JavaScript的魅力吧！！

不觉又写了很多内容，总结起来，概括为：一个概念、两张图标、三类节点、四种方法。其实这些都是基础中的基础，但对自己来说，整理的过程，也是一种加深的学习，如果对朋友们有帮助当然更让我高兴。欢迎朋友们交流，如果有什么错误还望指正！