赛捷软件论坛's Archiver

vicky.yu 发表于 2023-1-9 15:19

JavaScript HTML DOM 文档

HTML DOM 文档对象是您的网页中所有其他对象的拥有者。

HTML DOM Document 对象
文档对象代表您的网页。

如果您希望访问 HTML 页面中的任何元素,那么您总是从访问 document 对象开始。

下面是一些如何使用 document 对象来访问和操作 HTML 的实例。

查找 HTML 元素
方法        描述
document.getElementById(id)        通过元素 id 来查找元素
document.getElementsByTagName(name)        通过标签名来查找元素
document.getElementsByClassName(name)        通过类名来查找元素
改变 HTML 元素
方法        描述
element.innerHTML = new html content        改变元素的 inner HTML
element.attribute = new value        改变 HTML 元素的属性值
element.setAttribute(attribute, value)        改变 HTML 元素的属性值
element.style.property = new style        改变 HTML 元素的样式
添加和删除元素
方法        描述
document.createElement(element)        创建 HTML 元素
document.removeChild(element)        删除 HTML 元素
document.appendChild(element)        添加 HTML 元素
document.replaceChild(element)        替换 HTML 元素
document.write(text)        写入 HTML 输出流
添加事件处理程序
方法        描述
document.getElementById(id).onclick = function(){code}        向 onclick 事件添加事件处理程序
查找 HTML 对象
首个 HTML DOM Level 1 (1998),定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。

后来,在 HTML DOM Level 3,加入了更多对象、集合和属性。

属性        描述        DOM
document.anchors        返回拥有 name 属性的所有 <a> 元素。        1
document.applets        返回所有 <applet> 元素(HTML5 不建议使用)        1
document.baseURI        返回文档的绝对基准 URI        3
document.body        返回 <body> 元素        1
document.cookie        返回文档的 cookie        1
document.doctype        返回文档的 doctype        3
document.documentElement        返回 <html> 元素        3
document.documentMode        返回浏览器使用的模式        3
document.documentURI        返回文档的 URI        3
document.domain        返回文档服务器的域名        1
document.domConfig        废弃。返回 DOM 配置        3
document.embeds        返回所有 <embed> 元素        3
document.forms        返回所有 <form> 元素        1
document.head        返回 <head> 元素        3
document.images        返回所有 <img> 元素        1
document.implementation        返回 DOM 实现        3
document.inputEncoding        返回文档的编码(字符集)        3
document.lastModified        返回文档更新的日期和时间        3
document.links        返回拥有 href 属性的所有 <area> 和 <a> 元素        1
document.readyState        返回文档的(加载)状态        3
document.referrer        返回引用的 URI(链接文档)        1
document.scripts        返回所有 <script> 元素        3
document.strictErrorChecking        返回是否强制执行错误检查        3
document.title        返回 <title> 元素        1
document.URL        返回文档的完整 URL        1

页: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.