轻松上手,快乐学习!

JS 教程

JS 首页JS 教程JS 简介JS 如何使用JS 输出JS 语句JS 语法JS 注释JS 变量JS 运算符JS 算法JS 赋值JS 数据类型JS 函数JS 对象JS 事件JS 字符串JS 字符串方法JS 数值JS 数值方法JS 数组JS 数组方法JS 数组排序JS 数组迭代JS 日期JS 日期格式JS 日期获取方法JS 日期设置方法JS 数学运算JS 随机数JS 布尔运算符JS 比较运算符JS 条件语句JS Switch 语句JS For 循环JS While 循环JS BreakJS 类型转换JS 位运算符JS 正则表达式JS 错误处理JS 作用域JS HoistingJS 严格模式JS this 关键词JS Let 关键词JS Const 关键词JS 箭头函数JS 类JS 调试JS 样式指南JS 最佳实践JS 常见错误JS 性能优化JS 保留关键词JS 版本JS ES5JS ES6JS JSONJS FormsForms APIObject 对象定义Object 对象属性Object 对象方法Object DisplayObject 对象访问器Object 对象构造器Object 对象原型Object ECMAScript 5JS 函数定义JS 函数参数JS 函数调用JS Call 函数JS Apply 函数JS 函数闭包Class 类简介Class 类继承Class StaticJS 回调JS 异步JS PromisesJS Async/AwaitDOM 简介DOM 方法DOM 文档DOM 元素DOM HTMLDOM CSSDOM 动画DOM 事件DOM 事件监听DOM 导航DOM 节点DOM 集合DOM 节点列表JS WindowJS ScreenJS LocationJS HistoryJS NavigatorJS 弹出框JS TimingJS CookiesAJAX 简介AJAX XMLHttpAJAX 请求AJAX 响应AJAX XML 文件AJAX PHPAJAX ASPAJAX 数据库AJAX 应用程序AJAX 实例JSON 简介JSON 语法JSON vs XMLJSON 数据类型JSON 解析JSON 字符串化JSON 对象JSON 数组JSON PHPJSON HTMLJSON JSONPWeb API 简介Web History APIWeb Storage APIWeb Geolocation APIjQuery 选择器jQuery HTMLjQuery CSSjQuery DOMJS 实例JS HTML DOMJS HTML 输入JS HTML 对象JS HTML 事件JS BrowserJS 编辑器JS 练习JS 测验

JS 参考手册

JS 参考手册(类别排序)JS 参考手册(字母排序)


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