1.document:文档,DOM中的"D":当创建了一个网页并把它加载到Web浏览器中时,DOM就已经生成了,它把你编写的网页文档转换为一个文档对象.
2.Object:对象,DOM中的"O":在程序设计语言里,“对象”这个词含义很明确,对象是一种自给自足的数据集合,与对象相关联的变量被称为属性,与对象相关联的且只能由该对象去调用的函数被称为这个对象的方法.JavaScript里最基础的对象是window对象,对应着浏览器本身,这个对象的属性和方法通常被称为BOM(浏览器对象模型),但叫做窗口对象模型似乎更加贴切.
3.Model:模型,DOM中的"M":也可以称为Map,指的是某种事物的表现形式,DOM代表着加载到浏览器窗口的当前网页,浏览器提供了网页的模型(地图),我们可以通过JavaScript去读取这张地图.
DOM把一份文档表示为一棵树,指的是数学上的"树",这是理解这一模型的关键.
看下面这张网页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你的星座</title>
</head>
<body>
<h1>水象星座</h1>
<p title="水">下面三个是水象星座</p>
<ul id="content">
<li>双鱼座</li>
<li class="cancer">巨蟹座</li>
<li class="scorpio">天蝎座</li>
</ul>
</body>
</html>
这份文档可以用树来表示:
html
--head
--meta
---title
--body
--h1
--p
--ul
--li
--li
--li
其中,html是根标签,代表整个文档,然后是两个分支<head>,<body>,它们互不包含,所以是兄弟关系,<head>有两个子元素<meta>,<title>,<body>有三个子元素<h1><p><ul>,<ul>也有三个子元素,都是<li>.
4.节点:node,网络术语,表示网络中的一个连接点.网络就是由一些节点构成的集合.DOM主要有三种节点,元素节点,文本节点,属性节点.
(1)元素节点(element node):在刚才那份文档里,<body>,<p>,<ul>就是元素节点.
(2)文本节点(text node):<p>元素包含着文本"下面三个是水象星座",它就是一个文本节点.
(3)属性节点(attribute node):用来对元素做更具体的描述,例如在<p>元素中的title="水",就是一个属性节点,ul的id,li的class都是属性节点.