首页 > 编程语言 > 详细

JavaScript之HTML DOM Document 对象

时间:2019-12-25 09:36:08      阅读:68      评论:0      收藏:0      [点我收藏+]

文档对象代表您的网页。

如果您希望访问 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(attributevalue) 改变 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
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

文章来源:www.sysoft.net.cn,加v:15844800162深度交流

JavaScript之HTML DOM Document 对象

原文:https://www.cnblogs.com/sysoft/p/12094773.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!