1.4 DOM简述

优质

小牛编辑

129浏览

2023-12-01

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，如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有三个属性，分别是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、标签名和类名获取元素。

请注意，上面提到的四种方法中，第一个方法名中是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像素，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/。