DOM是Document Object Model的缩写，翻译为文档对象模型，但我觉得这个听起来很生疏，还是直接叫DOM，所以本节的标题就定为了DOM简述。由于Chrome扩展应用使用HTML渲染界面，所以不可避免地要接触DOM。考虑到并非所有读者都编写过HTML，我决定单独拿出一小节来讲解DOM，帮助这些读者快速入门。当然，用短短的一节是无法讲透的——毕竟DOM的内容足以写另外一本书了——这里只是要给大家引出一个方向，浅浅地打下一点基础，深入的学习还需要阅读更加详细的资料。 DOM分为3个不同的部分，分别是核心DOM、XML DOM和HTML DOM，我们主要关心的是HTML DOM，所以我也只讲解HTML DOM。图1-7给出了HTML DOM的树状结构图，可以看到HTML文档都有一个<html>根元素。 图1-7 HTML DOM树（图片来源于www.w3school.com.cn） <html>根元素又有两个子元素，分别是<head>和<body>，所以最简单而完整的HTML文档如下所示： <html> <head></head> <body></body> </html> 这个文档没有任何内容，但拥有HTML完整的结构。在DOM中，每个元素通常是以<tag_name>的形式开始，并以</tag_name>的形式结束。在HTML中，有一些特定的tag_name，如div、p、a、form等。 这些元素可以包含一些属性，还可以包含子节点，子节点可以是元素也可以是文本。如： <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有3个属性，分别是type、id和value，type="text"表明这个输入框的类型是文本输入框，id="stu_name"表明给这个元素分配了一个名为stu_name的id，这样可以更加方便地被JavaScript和CSS选择器定位到，value="Billy"表明将这个输入框的默认值设定为Billy。 不同的元素往往拥有不同的属性名，比如对于img元素，通常会包含src属性以指定所显示图片的地址，而input元素往往会包含type属性来描述输入框的类型。 在JavaScript中有多种获取DOM元素的方法，常见的有getElementById、getElementsByName、getElementsByTagName、getElementsByClassName，分别是通过id、name、标签名和类名获取元素。 请注意，上面提到的4种方法中，第一个方法名中是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的选择器基本分为3种，分别是tagName、.className和#id。如下面的例子： p { width: 200px; } .postlist { width: 150px; } #footer { width: 100px; } 分别定义了p标签元素宽度为200像素，类名为postlist的元素宽度为150像素，id为footer的元素宽度为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/。