文档对象代表您的网页。

如果您希望访问 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

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

JavaScript之HTML DOM Document 对象的更多相关文章

  1. JavaScript -- 时光流逝（十一）：DOM -- Document 对象

    JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype ...

  2. HTML DOM Document 对象

    HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...

  3. 浏览器端-W3School-JavaScript-HTML DOM：HTML DOM Document 对象

    ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...

  4. HTML DOM Document对象 元素对象 属性对象 事件对象

    DOM Document对象 DOM 元素 对象 DOM 属性 对象 DOM 事件 菜鸟教程上 总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...

  5. javascript DOM document对象

    document对象代表整个html文档 用来访问页面所有元素最复杂的一个dom对象 也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...

  6. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  7. HTML DOM 知识点整理（一）—— Document对象

    一.DOM对象 DOM对象整体包括: HTML DOM Document对象 HTML DOM 元素对象 HTML DOM 属性对象 HTML DOM 事件对象 HTML DOM Console 对象 ...

  8. DOM Document

    1.DOM Document对象 定义:每个载入浏览器的 HTML 文档都会成为 Document 对象.Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. Docume ...

  9. org.w3c.dom document 和xml 字符串 互转

    转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.F ...

随机推荐

  1. HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客

    原文:HTML给div设置百分比高度无效的解决方式 - 库塔姆斯 - CSDN博客 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/HobHunter ...

  2. VS2005进行WORD文档开发

    折腾了将近一个月的WORD文档开发终于告一段落.这件事已经很多大牛已经做过了.并且很多方法都已经非常详细,提供的资料也非常齐全.不过由于时间的久远并且较为散乱.所以我在学习时间过程中还是走了一些些弯路 ...

  3. sql草稿

    参考:MySQL 内连接.外连接.左连接.右连接.全连接 SELECT count(*) FROM `t_product_base` select m_name from t_medicinal_in ...

  4. springcloud之配置中心用法

    一.配置文件服务器server端 1.构建server端所需jar <dependencies> <dependency> <groupId>org.springf ...

  5. [编织消息框架][netty源码分析]5 EventLoopGroup 实现类NioEventLoopGroup职责与实现

    分析NioEventLoopGroup最主有两个疑问 1.next work如何分配NioEventLoop 2.boss group 与child group 是如何协作运行的 从EventLoop ...

  6. HZOI20190823模拟31题解

    题面:https://www.cnblogs.com/Juve/articles/11425141.html math:仔细看看其实是个水题 #include<iostream> #inc ...

  7. WIN32_FIND_DATA 详细结构（附循环读取文件代码）

    //去除路径最后多余的斜杠和反斜杠 std::string TrimPath(std::string path) { //string test3("内容"); 使用引用字符数组作 ...

  8. TZ_03_mybatis的xml开发

    1.通过Student.xml编写sql来操作数据库 1>insert语句插入后返回主键 加入标签useGeneratedKeys=“true” keyProperty=“oid” 中 keyP ...

  9. JavaSE_09_Map

    1.1 概述 Collection中的集合,元素是孤立存在的,向集合中存储元素采用一个个元素的方式存储. Map中的集合,元素是成对存在的(Key---Value).每个元素由键与值两部分组成,通过键 ...

  10. 写一个网页进度loading

    作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...