文档对象代表您的网页。

如果您希望访问 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. LinkedList集合 实现栈和队列

    LinkedList集合的底层是链表结构实现的,所以可以模拟栈(先进后出)和队列(先进先出). 方法: addFirst() //添加元素到列表的起始位置 addLast() //添加元素到列表的结束 ...

  2. 安装office2019

    win10系统安装office2019 安装文件下载 https://pan.baidu.com/s/1VnqJ-hNwysPKBhdzE3FSww#list/path=%2F&parentP ...

  3. Odoo Documentation : Recordsets

    Other recordset operations Recordsets are iterable(可迭代的) so the usual Python tools are available for ...

  4. JavaSE_01_Exception类

    1.1 异常概念 指的是程序在执行过程中,出现的非正常的情况,最终会导致JVM的非正常停止. 在Java等面向对象的编程语言中,异常本身是一个类,产生异常就是创建异常对象并抛出了一个异常对象.Java ...

  5. jeecms v9.3 has a stroed xss vulnerability

    转载:https://blog.csdn.net/libieme/article/details/83588929 jeecms v9.3 has a stroed xss vulnerability ...

  6. 一个班六个人，学号语文、数学、英语，接收成绩（不接受学号），输出学号成绩，总分、平均分，按总分排序（原生JS）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. PAT甲级——A1017 Queueing at Bank

    Suppose a bank has K windows open for service. There is a yellow line in front of the windows which ...

  8. VMWare下载安装以及创建虚拟机教程

    参考博客https://blog.csdn.net/qq_39135287/article/details/83993574 下载 1.打开官网https://www.vmware.com/cn.ht ...

  9. java代码乱序问题

    java两个线程互相访问的时候并不能按照你的思路运行,因为执行语句可能有前后快慢之分,比如a=1和flag=true.下面线程B访问的时候 这两个赋值语句不一定按顺序执行 产生这种原因是因为指令重排序 ...

  10. Jquery 页面打印

    <script src="~/Scripts/js/dist/jquery.jqprint-0.3.js"></script> <script typ ...