1.4 DOM简述

DOM是Document Object Model的缩写,翻译过来叫文档对象模型,但我觉得这个听起来很生疏,不如还是直接叫DOM,所以本节的标题就定为了DOM简述。由于Chrome扩展应用使用HTML渲染界面,所以不可避免地要接触DOM。考虑到并非所有读者都编写过HTML,我决定单独拿出一小节来讲解DOM,帮助这些读者快速入门。当然,用短短的一节是无法讲透的——毕竟DOM可以写另外一本书了——这里只是要给大家引出一个方向,浅浅地打下一点基础,深入的学习还需要读者去阅读更加详细的资料。

enter image description here
HTML DOM 树,图片来源于www.w3school.com.cn

DOM分为3个不同的部分,分别是核心 DOM、XML DOM和HTML DOM,我们主要关心的是HTML DOM,所以我也只讲解HTML DOM。

上图给出了HTML DOM的树状结构图,可以看到HTML文档都有一个<html>根元素。<html>根元素又有两个子元素,分别是<head><body>,所以已经最简单而完整的HTML文档如下所示:

<html>
    <head></head>
    <body></body>
</html>

这个文档没有任何内容,但拥有HTML完整的结构。在DOM中,每个元素通常是以<tag_name>的形式开始,并以</tag_name>的形式结束。在HTML中,有一些特定的tag_name,如divpaform等等。

这些元素可以包含一些属性,还可以包含子节点,子节点可以是元素也可以是文本。如:

<img src="images/dog.png" />
<div>Hello World!</div>

上面的例子中img元素不是以成对的标签形式出现的,而是在标签内部末尾使用“/”闭合标签,这样的元素在HTML文档中没有子节点,所以称为自闭标签。类似的元素还有input

除了自闭标签,其他的标签必须成对出现,并且嵌套规则必须明确,这有点像我们小学时学习数学所使用的括号“()”和中括号“[]”。比如下面的嵌套方式是正确的:

<div><p>Hello World!</p></div>

但下面的例子是错误的:

<div><p></div></p>
<div><p></div>

第一个是嵌套错误,第二个是p标签没有成对出现,标签没有闭合。

有时元素还会拥有属性,比如下面的例子:

<input type="text" id="stu_name" value="Billy" />

上面这个input有三个属性,分别是typeidvaluetype="text"表明这个输入框的类型是文本输入框,id="stu_name"表明给这个元素分配了一个名为stu_nameid,这样可以更加方便地被JavaScript和CSS选择器定位到,value="Billy"表明将这个输入框的默认值设定为Billy

不同的元素往往拥有不同的属性名,比如对于img元素,通常会包含src属性以指定所显示图片的地址,而input元素往往会包含type属性来描述输入框的类型。

在JavaScript中有多种获取DOM元素的方法,常见的有getElementByIdgetElementsByNamegetElementsByTagNamegetElementsByClassName,分别是通过idname、标签名和类名获取元素。

请注意,上面提到的四种方法中,第一个方法名中是Element,而后面的都是Elements。这是因为HTML中元素的id必须是唯一的,但是不同的元素可以拥有同样的name、标签名和类名,所以通过第一种方式获取的是一个元素,而后几种方法获取的是一个包含多个元素的数组。值得强调的是,即使HTML中只有一个元素的name为"my_element",那么通过getElementsByName('my_element')获取到的也是数组型的数据——虽然这个数组只包含一个元素。

JavaScript可以通过getAttribute方法读取元素的属性,通过setAttribute方法添加或更改元素的属性,通过removeAttribute方法删除元素的属性。对于非自定义的属性,JavaScript可以直接像读取对象属性那样读取或更改它们,比如:

var imgurl = document.getElementById('my_image').src;
document.getElementById('my_another_image').src = imgurl;
// var imgurl = document.getElementById('my_image').getAttribute('src');
// document.getElementById('my_another_image').setAttribute('src', imgurl);

CSS的选择器基本分为三种,分别是tagName.className#id。如下面的例子:

p {
    width: 200px;
}

.postlist {
    width: 150px;
}

#footer {
   width: 100px;
}

分别定义了p标签元素宽度为200像素,类名为postlist的元素宽度为150像素,idfooter的元素宽度为100像素。这个样式表分别作用于以下元素:

<p></p>
<div class="postlist"></div>
<div id="footer"></div>

CSS选择器还可以通过元素属性进行定位,比如下面的例子可以作用于所有文本输入框:

input[type="text"] {
    font-size: 16px;
}

更多关于DOM的知识可以参阅http://www.w3school.com.cn/htmldom/