DOM

DOM 简介

上网浏览网页时,输入的网址(http://www.whlearn.com)在通过 DNS 解析后得到服务器地址(123.57.42.158),浏览器向服务器发起 http 请求,经过 TCP/IP 三次握手确认链接后,服务器将需要的代码(HTML 文件)发回给浏览器,浏览器接收 HTML 文件。

.html 文件:

						
<!DOCTYPE html>
<html>
  <head>
    <title>MyWeb</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1 style="color: red;">一级标题</h1>
    <p class="example-p">段落。</p>
    <div class="box-container">
      <div class="box-1">
        内容。
      </div>
      <div class="box-2">
        内容。
      </div>
    </div>
  </body>
</html>
						
					

.css 文件:

						
h1 {
  color: black;
  font-size: 5em;
}
p {
  text-indent: 2em;
}
.box-container {
  background-color: green;
  border: 1px solid black;
}
.box-1 {
  background-color: gray;
  width: 200px;
  height: 100px;
}
.box-2 {
  background-color: yellow;
  width: 300px;
  height: 200px;
}
						
					

浏览器接收到代码(HTML 文件)后进行解析,经过三个步骤:

  • 构造 DOM(Document Object Model,文档对象模型)
  • 页面布局
  • 页面绘制

构造 DOM

浏览器首先将收到的 HTML 代码,通过 HTML 解析器解析构建为 DOM,树结构,称为 DOM 树。

DOM 为树结构,这样的结构就决定了节点之间有一定的关联,它们可能是父子、兄弟、后代等。

DOM 树中每个节点都拥有包含着关于节点信息的属性:

  • nodeName 节点名称
  • nodeType 节点类型
    • 1:元素(ELEMENT_NODE)
    • 2:属性(ATTRIBUTE_NODE)
    • 3:文本(TEXT_NODE)
    • 8:注释(COMMENT_NODE)
    • 9:文档(DOCUMENT_NODE)
  • nodeValue 节点值
    • 元素节点 nodeValue: null
    • 属性节点 nodeValue: 属性值
    • 文本节点 nodeValue: 文本内容

将接收到的 CSS 代码,通过 CSS 解析器构建出样式表规则。将这些 CSS 规则分别放到对应的 DOM 树节点上,得到一颗带有样式属性的 DOM 树。

页面布局

浏览器按从上到下,从左到右的顺序,读取 DOM 树的节点,顺序存放到一条虚拟的传送带上。

传送带上的盒子就是节点,而这条流动的传送带就是文档流。

最终成为用户看到的内容丰富、色彩绚丽的网页。

DOM 构造

DOM 是 W3C 制定的标准接口规范,是一种处理 HTML 和 XML 文件的标准 API。DOM 提供了对整个 HTML 或 XML 文件的访问模型,将文件作为一个树形结构,树的每个节点表示了一个 HTML 标签或标签内的文本。DOM 树结构精确地描述了 HTML 文件中标签间的相互关联性。将 HTML 或 XML 文件转化为 DOM 树的过程称为解析(parse)。HTML 文档被解析后,转化为 DOM 树,因此对 HTML 文件的处理可以通过对 DOM 树的操作实现。DOM 不仅描述了文档的结构,还定义了节点对象的行为,利用对象的方法和属性,可以方便地访问、修改、添加和删除 DOM 树的节点和内容。

文档对象模型 (DOM) 是 HTML 和 XML 文件的编程接口。它提供了对文件的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文件的结构,样式和内容。DOM 将文件解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将 Web 页面和脚本或程序语言连接起来。

一个 Web 页面是一个 HTML 文件。这个文件可以在浏览器窗口或作为 HTML 源码显示出来。但上述两个情况中都是同一份文件。文档对象模型(DOM)提供了对同一份文件的另一种表现,存储和操作的方式。 DOM 是 Web 页面的完全的面向对象表述,它能够使用如 JavaScript 等脚本语言进行修改。

所有操作和创建 Web 页面的属性,方法和事件都会被组织成对象的形式,例如,document 对象表示文档本身,table 对象实现了特定的 HTMLTableElement DOM 接口来访问 HTML 表格等。

在使用 DOM 时,不需要做任何其他特殊的操作。不同的浏览器都有对 DOM 不同的实现,这些实现对当前的 DOM 标准而言,都会呈现出不同程度的一致性,每个 Web 浏览器都会使用一些文档对象模型,从而使页面可以被脚本语言(JavaScript)访问。

API (Web 或 XML 页面) = DOM + JS (脚本语言)

DOM Button 对象

Button 对象表示 HTML 文档中的一个按钮。每出现一次 <button>,一个对应的 button 对象就会被创建。

button 元素允许添加内容,如文本或图片,这是与 input 按钮(button)类型的不同之处。

Button 对象属性
标签说明
disabled设置或返回是否禁用按钮。
form返回对包含按钮的表单的引用。
name设置或返回按钮的名称。
type返回按钮的表单类型。
value设置或返回显示在按钮上的文本。

DOM Form 对象

Form 对象表示 HTML 文档中的一个表单。每出现一次 <form> 标签,一个对应的 form 对象就会被创建。

form 表单通常用于收集用户数据,即向服务端发送用户数据。

Form 对象收集
集合说明
elements[]包含表单中所有元素的数组。
Form 对象属性
属性说明
acceptCharset服务器可接受的字符集。
action设置或返回表单的 action 属性。
enctypeencode type,设置或返回表单用来编码内容的 MIME 类型。
length返回表单中的元素数目。
method设置或返回将数据发送到服务器的 HTTP 方法。
name设置或返回表单的名称。
target设置或返回表单提交结果的 Frame 或 Window 名。
Form 对象方法
方法说明
reset()重置表单。
submit()提交表单。
Form 对象事件
事件说明
onreset在重置表单元素之前调用。
onsubmit在提交表单之前调用。

DOM Anchor 对象

Anchor 对象表示 HTML 超链接。每出现一次 <a> 标签,一个对应的 anchor 对象就会被创建。

锚可用于创建指向另一个文档的链接(通过 href 属性),或者创建文档内的书签(通过 name 属性)。

通过搜索 Document 对象中的 anchors[] 数组来访问锚,或者使用 document.getElementById()。

anchor 对象的属性
属性说明
charset设置或返回被链接资源的字符集。
href设置或返回被链接资源的 URL。
hreflang设置或返回被链接资源的语言代码。
name设置或返回链接的名称。
rel设置或返回当前文档与目标 URL 之间的关系。
rev设置或返回目标 URL 与当前文档之间的关系。
target设置或返回在何处打开链接。
type设置或返回被链接资源的 MIME 类型。

DOM Image 对象

Image 对象表示嵌入的图像。每出现一次 <img> 标签,一个对应的 image 对象就会被创建。

image 对象的属性
属性说明
align设置或返回与内联内容的对齐方式。
alt设置或返回无法显示图像时的替代文本。
border设置或返回图像周围的边框。
complete返回浏览器是否已完成对图像的加载。
width设置或返回图像的宽度。
height设置或返回图像的高度。
hspace设置或返回图像左侧和右侧的空白。
vspace设置或返回图像的顶部和底部的空白。
id设置或返回图像的 id。
isMap返回图像是否是服务器端的图像映射。
longDesc设置或返回指向包含图像描述的文档的 URL。
lowsrc设置或返回指向图像的低分辨率版本的 URL。
name设置或返回图像的名称。
src设置或返回图像的 URL。
useMap设置或返回客户端图像映射的 usemap 属性的值。
标准属性
属性说明
className设置或返回元素的 class 属性。
title设置或返回元素的 title。
image 对象的事件句柄
事件句柄说明
onabort当用户放弃图像的装载时调用的事件句柄。
onerror在装载图像的过程中发生错误时调用的事件句柄。
onload当图像装载完毕时调用的事件句柄。

src 属性

src 属性可设置或返回图像的 URL。该属性可在任意时间被更改。不过新图像会继承原始图像的 height 和 width 属性。

该属性的初始值由标记 <img> 的 src 属性来设置。当把该属性设置为新图像的 URL 时,浏览器就会把那幅新图像装载并显示出来。这对于更新网页的图像外观以响应用户的动作非常有用。

						
	imageObject.src = URL
						
					

加载相同图片名,不同图片的方法

相同 src ,但图片不同,第一次读图片,能够显示。当后一张图片覆盖前一张图片后,再次读取图片,会显示不全或图片不显示。

第一次读取图片时,能够正常显示。但是当服务器图片改变,再次调用该方法读取图片时,会发现显示的还是之前的,这是因为读取图片的路径和图片名未发生变化,读取的图片是浏览器缓存中的。

  • 1.修改图片名。
  • 2.使用 iframe,iframe 中只有一个 img 标签,然后对这个 iframe 进行刷新。
  • 3.保持原图片名,对后面设置参数(随机数)。
						
	var imgURL = "test.png?tempid=" + Math.random();
	imageObject.src = imgURL;
						
					

DOM Area 对象

Area 对象表示图像映射的一个区域(图像映射指的是带有可点击区域的图像)。每出现一次 <area> 标签,一个对应的 area 对象就会被创建。

Area 对象属性
属性说明
alt设置或返回当浏览器无法显示某个区域时的替换文字。
coords设置或返回图像映射中可点击区域的坐标。
hash设置或返回某个区域中 URL 的锚部分。
host设置或返回某个区域中 URL 的主机名和端口。
hostname设置或返回 href 属性值的主机部分。
href设置或返回某个区域中 href 属性值。
noHref设置或返回某个区域中 noHref 属性值。
pathname设置或返回某个区域 href 属性值的路径名部分。
port设置或返回某个区域 href 属性值的端口部分。
protocol设置或返回某个区域 href 属性值的协议部分。
search设置或返回某个区域 href 属性值的查询字符串部分。
shape设置或返回某个区域 shape 属性值。
target设置或返回某个区域 target 属性值。