ocument
对象使我们可以用JavaScript对 HTML 页面中的所有元素进行访问。要访问 HTML 页面中元素,除可以用Document
对象中的方法外,还可以通过Document
对象的属性。Document
对象的属性和方法中有的可返回单个Element
元素对象,有的会返回一个HTMLCollection
元素集合对象,其中保存了对锚、表单、链接以及其他元素的引用。
在1998年定义的HTML DOM 1级规范中,共定义了11个HTML对象、对象集合、属性,这些在现在的HTML5中仍然适用。在其后的HTML DOM 3
级规范中,更多的对象、集合和属性被添加。
1. Document
对象属性
通过Document
对象属性其返回值都是一单独对象,或HTML Element
元素对象。具体属性如下:
属性名 | 说名 | DOM级别 |
---|---|---|
document.body | 返回<body>元素 | 1 |
document.cookie | 返回或设置与当前文档相关的cookie | 1 |
document.domain | 返回当前文档的服务器域名 | 1 |
document.referrer | 返回连接至当前文档的文档连接 | 1 |
document.title | 返回当前文档的<title>元素 | 1 |
document.URL | 返回当前文档的完整URL | 1 |
2. Document
对象集合属性
Document
对象中还有一些属性,这些属性与使用getElementsByTagName
等方法的返回值类似,都是HTMLCollection
元素集合。这些属性如下:
属性名 | 说名 | DOM级别 |
---|---|---|
document.anchors | 返回文档中name特性的<a>元素对象的集合 | 1 |
document.applets | 返回文档中<applet>元素对象的集合(在HTML5中已弃用) | 1 |
document.forms | 返回文档中<form>元素对象的集合 | 1 |
document.images | 返回文档中<image>元素对象的集合 | 1 |
document.links | 返回文档中具有href特性的,<area>和<a>元素对象的集合 | 1 |
3. HTML DOM 3
中新增的Document
对象属性
在HTML DOM 3
级规范中扩展了更多的Document
对象属性,这些属性值如下:
属性名 | 说名 | DOM级别 |
---|---|---|
document.baseURI | 返回文档基础URL | 3 |
document.doctype | 返回文档的类型声明(DTD) | 3 |
document.documentElement | 返回文档的根节点,在HTML中是<form>元素 | 3 |
document.documentMode | 返回浏览器渲染文档的模式 | 3 |
document.documentURI | 返回文档的URI | 3 |
document.domConfig | 返回normalizeDocument()被调用时所使用的配置 | 3 |
document.embeds | 返回文档中<embed>元素对象的集合 | 3 |
document.head | 返回文档中<head>元素对象 | 3 |
document.head | 返回文档中<head>元素对象 | 3 |
document.implementation | 返回处理该文档的 DOMImplementation 对象 | 3 |
document.inputEncoding | 返回文档的编码方式 | 3 |
document.lastModified | 返回文档最后更新的日期和时间 | 3 |
document.readyState | 返回文档的加载状态 | 3 |
document.scripts | 返回文档中<script>元素对象 | 3 |
document.strictErrorChecking | 返回文档是否强制错误检查 | 3 |
注意:在 W3C DOM核心(Core DOM
)中,Document
文档对象继承Node节点对象所有的属性和方法。虽然Node
对象中的所有的属性和方法都同时存在Document
对象中,但很多属性和方法在文档对象中是没有意义的,如:attributes
(文档对象没有属性)、nextSibling
(文档对象没有下一个节点),在使用时应该避免这些方法和属性。
在浏览器,每个载入浏览器的 HTML 文档都会成为Document
对象。JavaScript用Document
类型表示文档,document
是HTML Document
对象的一个实例,HTML Document
是对DOM Document
的一个扩展,定义 HTML 专用的属性和方法,本文主要介绍HTML Document
。因为Document
是Window
对象的一个属性window.document
,所以它是一个全局对象。通过Document
对象,我们可以对 HTML 页面中的所有元素进行访问。
1. HTML DOMDocument
对象
Document
是DOM 节点类型之一。
Document
对象是对你HTML页面的一个引用。当你访问HTML页面中的元素时,你总是会首先访问Document
对象
Document
对象中包含一些方法,通过这些方法你可以实现对页面元素的查找、添加、删除和修改。
Document
对象中属性一可以分为两类,一类用于访问HTML页面元素,如:document.body
会返回对body
元素的引用、document.title
会返回对title
元素的引用。另一类属性,其返回值是HTMLCollection
对象集合,如:document.forms
会返回页面中所有form
元素的集合,document.images
会返回页面中所有image
元素的集合。
2. HTML DOMDocument
对象中的方法
HTML DOMDocument
对象中的方法分别用于查找元素和操作元素,在对元素进行添加、修改、删除等操作前,首先需要查找到目标元素。
2.1 查找DOM元素的方法
方法 | 说明 |
---|---|
document.getElementById(id) | 通过元素id查找元素 |
document.getElementsByName(name) | 通过元素名查找元素 |
document.getElementsByTagName(name) | 通过元素标签名查找元素 |
document.getElementsByClassName(name) | 通过元素样式名查找元素 |
上面是几个按不同方式在HTML文档中查找元素的方法,除document.getElementById(id)
方法外,其它都会返回一个HTML元素的集合,详细请参考:JavaScript 获取DOM文档元素。
2.2 DOM节点操作的方法
方法 | 描述 |
---|---|
document.createElement(element) | 创建一个HTML元素 |
document.removeChild(element) | 移除一个HTML元素 |
document.appendChild(element) | 添加HTML元素 |
document.replaceChild(element) | 替换HTML元素 |
document.write(text) | 写入到HTML的输出流 |
以上方法是针对HTML元素的添加、修改、删除操作。具体请参考:Node节点操作、创建DOM节点.