2.1 理解DOM

发表于 更新于 分类于 ， Waline： 本文字数： 915 阅读时长 ≈ 1 分钟

2.1 理解DOM

jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务。 DOM (Document Object``Model,文档对象模型)充当了JavaScript与网页之间的接口;它以对象网络而非纯文本的形式来表现HTML的源代码。
DOM中的对象网络与家谱有几分类似。当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素、子元素,等等。通过一个简单的例子,可以帮助我们理解文档各元素构成的树形结构:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
    <head>
        <title>the title</title>
    </head>
    <body>
        <div>
            <p>This is a paragraph.</p>
            <p>This is another paragraph.</p>
            <p>This is yet another paragraph.</p>
        </div> 
    </body>
</html>

这里,<html>是其他所有元素的祖先元素,换句话说,其他所有元素都是<html>的后代元素。<head>和<body>元素是<html>的子元素(但并不是它唯一的子元素) 。因此除了作为<head>和<body>的祖先元素之外,<html>也是它们的父元素。 而<p>元素则是<div>的子元素(也是后代元素),是<body>和<html>的后代元素,是其他<p>元素的同辈元素。这些元素之间的关系从下面的图2-1中可以看得更清楚。
为了把DOM结构更形象地表现出来,可以使用很多工具,例如Firefox的Firebug插件、Safari和Chrome中的Web Inspector等。
有了这个元素树,就可以使用jQuery从中取得任何元素了。而我们用来取得元素的工具,就是jQuery选择符和遍历方法。