JavaScript HTML DOM节点类型之Document类型(Document对象属性和Document对象集合属性)

ocument对象使我们可以用JavaScript对 HTML 页面中的所有元素进行访问。要访问 HTML 页面中元素,除可以用Document对象中的方法外,还可以通过Document对象的属性。Document对象的属性和方法中有的可返回单个Element元素对象,有的会返回一个HTMLCollection元素集合对象,其中保存了对锚、表单、链接以及其他元素的引用。

  1. Document对象属性
  2. Document对象集合属性
  3. HTML DOM 3中新增的Document对象属性


在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类型表示文档,documentHTML Document对象的一个实例,HTML Document是对DOM Document的一个扩展,定义 HTML 专用的属性和方法,本文主要介绍HTML Document。因为DocumentWindow对象的一个属性window.document,所以它是一个全局对象。通过Document对象,我们可以对 HTML 页面中的所有元素进行访问。


1. HTML DOMDocument对象

DocumentDOM 节点类型之一。

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节点.


猜你喜欢

转载自blog.csdn.net/bfboys/article/details/54350780