JavaScript之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 |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
文章来源:www.sysoft.net.cn,加v:15844800162深度交流
JavaScript之HTML DOM Document 对象的更多相关文章
- JavaScript -- 时光流逝（十一）：DOM -- Document 对象
JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype ...
- HTML DOM Document 对象
HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...
- 浏览器端-W3School-JavaScript-HTML DOM：HTML DOM Document 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...
- HTML DOM Document对象 元素对象 属性对象 事件对象
DOM Document对象 DOM 元素 对象 DOM 属性 对象 DOM 事件 菜鸟教程上 总结挺全的,就不多废话,链接点进去即可.. 后期对经常用到的会在此更新一些总结..... 开学了...自 ...
- javascript DOM document对象
document对象代表整个html文档 用来访问页面所有元素最复杂的一个dom对象 也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...
- javascript中window与document对象、setInterval与setTimeout定时器的用法与区别
一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...
- HTML DOM 知识点整理（一）—— Document对象
一.DOM对象 DOM对象整体包括: HTML DOM Document对象 HTML DOM 元素对象 HTML DOM 属性对象 HTML DOM 事件对象 HTML DOM Console 对象 ...
- DOM Document
1.DOM Document对象 定义:每个载入浏览器的 HTML 文档都会成为 Document 对象.Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. Docume ...
- org.w3c.dom document 和xml 字符串 互转
转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.F ...
随机推荐
- ftp文件上传下载命令
介绍:从本地以用户wasqry登录的机器1*.1**.21.67上通过ftp远程登录到ftp服务器上,登录用户名是lte****,以下为使用该连接做的实验. 查看远程ftp服务器上用户lte**** ...
- HZOI2019 砍树 整除分块
题目链接:https://www.cnblogs.com/Juve/articles/11207540.html(密码你懂的)——————————>> 这题... 一开始想的二分,但此题不 ...
- 一个班六个人，学号语文、数学、英语，接收成绩（不接受学号），输出学号成绩，总分、平均分，按总分排序（原生JS）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Eclipse使用过程的常见问题：
3-1 "Failed to load the JNI shared library" -jdk 与eclipse位数不一致出现的问题 解决方法: ...
- [转]C#截获本机数据包方法实例
本文向大家介绍Windows Sockets的一些关于用C#实现的原始套接字(Raw Socket)的编程,以及在此基础上实现的网络封包监视技术.同Winsock1相比,Winsock2最明显的就是支 ...
- python-web-webbrower-beautifuSoup
webbrowser:是 Python 自带的,打开浏览器获取指定页面. requests:从因特网上下载文件和网页. Beautiful Soup:解析 HTML,即网页编写的格式. seleniu ...
- 移植别人的vcpkg包到自己的项目
修改该目录下的文件即可: 或者修改你的项目文件下的所有不对的路径,类似于这种:
- TZOJ 4292 Count the Trees(树hash)
描述 A binary tree is a tree data structure in which each node has at most two child nodes, usually di ...
- LA3695 Distant Galaxy
Distant Galaxy https://vjudge.net/problem/UVALive-3695 You are observing a distant galaxy using a te ...
- Leetcode150. Evaluate Reverse Polish Notation逆波兰表达式求值
根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除法只保留整数部分. 给定逆波兰表达式总是有效的.换句话说 ...