JavaScript (三)之 操作DOM 文档

21 篇文章 0 订阅
5 篇文章 0 订阅

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 中仍然有效。

属性描述DOM
document.anchors返回拥有 name 属性的所有 <a> 元素。1
document.applets返回所有 <applet> 元素(HTML5 不建议使用)1
document.baseURI返回文档的绝对基准 URI3
document.body返回 <body> 元素1
document.cookie返回文档的 cookie1
document.doctype返回文档的 doctype3
document.documentElement返回 <html> 元素3
document.documentMode返回浏览器使用的模式3
document.documentURI返回文档的 URI3
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> 和 元素1
document.readyState返回文档的(加载)状态3
document.referrer返回引用的 URI(链接文档)1
document.scripts返回所有 <script> 元素3
document.strictErrorChecking返回是否强制执行错误检查3
document.title返回 元素1
document.URL返回文档的完整 URL1
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值