HTML DOM Document 对象

HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。

Document 对象

当浏览器载入 HTML 文档, 它就会成为 document 对象。

document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

浏览器支持

所有主要浏览器都支持 Document 对象。

Document 对象属性和方法

HTML文档中可以使用以上属性和方法:

属性 / 方法	描述
document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.applets	返回对文档中所有 Applet 对象的引用。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.domConfig	返回normalizeDocument()被调用时所使用的配置
document.embeds	返回文档中所有嵌入的内容（embed）集合
document.forms	返回对文档中所有 Form 对象引用。
document. getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

警告 !!!

在 W3C DOM核心，文档对象继承节点对象的所有属性和方法。

很多属性和方法在文档中是没有意义的。

HTML 文档对象可以避免使用这些节点对象和属性：

属性 / 方法	避免的原因
document.attributes	文档没有该属性
document.hasAttributes()	文档没有该属性
document.nextSibling	文档没有下一节点
document.nodeName	这个通常是 #document
document.nodeType	这个通常是 9(DOCUMENT_NODE)
document.nodeValue	文档没有一个节点值
document.ownerDocument	文档没有主文档
document.ownerElement	文档没有自己的节点
document.parentNode	文档没有父节点
document.previousSibling	文档没有兄弟节点
document.textContent	文档没有文本节点

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

用JavaScript访问和操作的HTML DOM对象的例子。

Document 对象

使用 document.write() 输出文本
使用 document.write() 输出 HTML
返回文档中锚的数目
返回文档中第一个锚的 innerHTML
返回文档中表单的数目
返回文档中第一个表单的名字
返回文档中的图像数
返回文档中第一个图像的ID
返回文档中的链接数
返回文档中的第一个链接的ID
返回文档中的所有cookies的名称/值对
返回加载的文档的服务器域名
返回文档的最后一次修改时间
返回加载的当前文档的URL
返回文档的标题
返回文档的完整的URL
打开输出流，向流中输入文本
write() 和 writeln()的不同
用指定的ID弹出一个元素的innerHTML
用指定的Name弹出元素的数量
用指定的tagname弹出元素的数量

Anchor 对象

返回和设置链接的charset属性
返回和设置链接的href属性
返回和设置链接的hreflang属性
返回一个锚的名字
返回当前的文件和链接的文档之间的关系
改变链接的target属性
返回一个链接的type属性的值

Area 对象

返回图像映射某个区域的替代文字
返回图像映射某个区域的坐标
返回一个区域的href属性的锚部分
返回的主机名：图像映射的某个区域的端口
返回图像映射的某个区域的hostname
返回图像映射的某个区域的port
返回图像映射的某个区域的href
返回图像映射的某个区域的pathname
返回图像映射的某个区域的protocol
返回一个区域的href属性的querystring部分
返回图像映射的某个区域的shape
返回图像映射的某个区域的target的值

Base 对象

返回页面上所有相对URL的基URL
返回页面上所有相对链接的基链接

Button 对象

当点击完button不可用
返回一个button的name
返回一个button的type
返回一个button的value
返回一个button所属表的ID

Form 对象

返回一个表单中所有元素的value
返回一个表单acceptCharset属性的值
返回一个表单action属性的值
返回表单中的enctype属性的值
返回一个表单中元素的数量
返回发送表单数据的方法
返回一个表单的name
返回一个表单target属性的值
重置表单
提交表单

Frame/IFrame 对象

对iframe排版
改变一个包含在iframe中的文档的背景颜色
返回一个iframe中的frameborder属性的值
删除iframe的frameborder
改变iframe的高度和宽度
返回一个iframe中的longdesc属性的值
返回一个iframe中的marginheight属性的值
返回一个iframe中的marginwidth属性的值
返回一个iframe中的name属性的值
返回和设置一个iframe中的scrolling属性的值
改变一个iframe的src

Image 对象

对image排版
返回image的替代文本
给image加上border
改变image的高度和宽度
设置image的hspace和vspace属性
返回image的longdesc属性的值
创建一个链接指向一个低分辨率的image
返回image的name
改变image的src
返回一个客户端图像映射的usemap的值

Event 对象

哪个鼠标键被点击了？
被按下的键盘键的keycode？
鼠标的坐标？
鼠标相对于屏幕的坐标？
shift键被按下了吗？
哪个元素被按下了？
哪个事件发生了？

Option 和 Select 对象

禁用和启用下拉列表
获得有下拉列表的表单的ID
获得下拉列表的选项数量
将下拉列表变成多行列表
在下拉列表中选择多个选项
弹出下拉列表中所有选项
弹出下拉列表中被选中的选项的索引
改变下拉列表中被选中的选项的文本
删除下拉列表中的选项

Table, TableHeader, TableRow, TableData 对象

改变表格边框的宽度
改变表格的cellpadding和cellspacing
指定表格的frame
为表格指定规则
一个行的innerHTML
一个单元格的innerHTML
为表格创建一个标题
删除表格中的行
添加表格中的行
添加表格行中的单元格
单元格内容水平对齐
单元格内容垂直对齐
对单个单元格的内容水平对齐
对单个单元格的内容垂直对齐
改变单元格的内容
改变单元格横跨的列数(colspan属性)

TML DOM（文档对象模型）是一种基于文档的编程接口，它是 HTML 和 XML 文档的编程接口。它可以让开发人员通过 JavaScript 或其他脚本语言来访问和操作 HTML 和 XML 文档的内容、结构和样式。

HTML DOM 将整个 HTML 或 XML 文档表示为一个树状结构，其中每个元素（如标签、文本、属性）都是一个节点。通过 HTML DOM，开发人员可以通过节点名称、节点类型、节点属性等方式来访问和操作 HTML 或 XML 文档中的节点。例如，开发人员可以使用 HTML DOM 来修改或删除元素、添加或删除属性、创建新的节点、获取或设置元素的样式等。

HTML DOM 还提供了许多事件（如单击、双击、鼠标移动等）和方法（如 getElementById、getElementsByTagName 等），可以帮助开发人员更加方便地操作和控制 HTML 或 XML 文档。同时，HTML DOM 还提供了跨浏览器的支持，可以在不同的浏览器和操作系统上使用相同的代码。

总的来说，HTML DOM 提供了一种方便、灵活和强大的方式来访问和操作 HTML 或 XML 文档的内容、结构和样式，是 Web 开发中必不可少的一部分。

在线咨询

上一篇：CSS学习指南
下一篇：旋转、缩放、移动：掌握CSS Transform动画的终极指南！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML DOM Document 对象

您的项目需求