Javascript之Dom学习 - 码农教程

1.简介:DOM是一套对文档的内容进行抽象和概念化的方法。在现实世界里,人们对"世界对象模型"一定不会陌生,当人们用"房子","汽车"等这一类专用名字来描述生活中的事物时,我们百分之百不会理解错,因为人们对这些名字有相同的认识,比如我说"我的车停在了地下车库里",你肯定不会理解成"手机放在了家里"。(这是从客观存在的事物角度去描述DOM).

我们的"世界对象模型"不仅可以描述客观存在的事物,还可以用来描述抽象概念,例如,假设有个人向我问路,而我给出的答案是"右边第二栋房子",这个答案有没有意义,将取决于听到的那个人,是否理解"右边"和"第二栋"的含义,如果他不会数数或者分不清左右,则不管他是否理解这两个词的含义,我说的将不会对他有任何的帮助。在现实世界里,正是应为大家对抽象的世界模型有着基本的共识,人们才能用非常简单的话,表达出非常复杂的含义,具体到这边的例子,你可以相当有把握的断定,其他人对"第二"和"右边"的理解和我完全一样。

而网页也是根据我们的现实世界模型所研发出来的,早期的JavaScript版本向程序员提供了查询和操控Web文档某些实际内容(主要是图像和表单)的手段,因为JavaScript预先定义了"images"和"forms"等术语,我们才能像相面这样在Javascript脚本里引用"文档的第三个图像"或文档名为details的表单.

document.image[2];
document.forms['details'];

2.DOM中的"D"="文档"

如果没有document(文档),DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。他把你编写的网页转换成一个文档对象。

3.DOM中的"O"="对象"

这个在我前面的随笔中已有介绍：http://www.cnblogs.com/GreenLeaves/p/5685524.html

4.DOM中的"M"="模型"

当创建一个网页并把它加载到浏览器中,DOM生成,然后他把你编写的网页转换成一个文档对象(document),而M就是我们所说的"Model"(模型)————>来自于生成的文档对象,但说他是Map也未尝不可.DOM代表着加载到浏览器窗口到当前网页,浏览器提供了网页的Map(或者说模型)，而我们就可以通过JavaScript去控制它；

事实上,DOM把一份文档表示为一棵树,一个家谱树。并使用parent(父)、child(子)、sibling(兄弟)等记号来表明各个成员之间的关系；

家谱树模型非常适合用一份(X)HTML语言编写；

如下图是一份最基本的网页：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
   <h1>h1</h1>
   <p>i am a p tag</p>
   <ul>
   <li>li_1</li>
   <li>li_2</li>
   <li>li_3</li>
   </ul>
</body>
</html>

这份文档可以用下面的模型图来表示:

根据上面的模型图来看文档从html标签开始,所以根元素是html，不管从那个角度看html代表整个文档。接下来深入一层我们发现有<head>和<body>两个分支,他们是兄弟关系,他又有共同的父元素<html>，但又有各自的子元素，所以他们本身又是其他一些元素的父元素。以此类推,其他元素也是一样。利用这种简单的家谱关系记号,我们可以把各元素之间的关系简明清晰的表达出来。这就是一颗简单的家谱树。

5.但是与使用"家谱树"这个术语相比,把文档称为"节点树"更准确,而且要更专业。

节点这个词是网络术语,他表示网络中的一个连接点。一个网络就是由一些节点构成的集合。在DOM中有许多类型的不同节点。接下来我们先看看其中的三种:元素节点、文本节点、属性节点。

5.1 元素节点

元素节点:html文档里面的html标签，<html></html>本身也是,只是他是根元素。

5.2 文本节点

文本节点:文本节点就是元素节点里面的文本内容,可以说在整个互联网上,内容就是一切.而里面的内容就是文本节点如<P>i am a asp.net developer</P>,<p></p>标签里面的内容i am a asp.net developer就是文本节点；

5.3 属性节点

属性节点: 属性节点是用来对元素做出更具体的描述。例如,几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述,还有id,class都是常见的一些属性节点；