Document对象详解

前言

在前端开发中,DOM(文档对象模型)扮演着重要的角色。它允许我们使用JavaScript来与网页文档进行交互,实现动态的网页效果。DOM的核心部分之一就是Document对象,它代表了整个HTML文档。在本篇博客中,我们将深入探讨Document对象,包括它的属性、方法以及如何使用它来操纵网页内容。

文章目录

  • 前言
  • 什么是Document对象
    • document 对象的属性
    • document 对象方法
  • 使用Document对象
    • 获取元素
    • 创建新元素
    • 写入文本
    • DOM事件

什么是Document对象

DOM 可以认为是 BOM 的一个子集,DOM 中文档操作相关对象,如:NodeDocumentElement 等 DOM 节点类型对象,都是做为window对象的子属性出现的。

document window 对象的子属性,它是一个 Document 对象实例,表示当前窗口中文档对象。通过该对象,可以对文档和文档中元素、节点等进行操作。

思维导图
在这里插入图片描述

document 对象的属性

document对象主要有如下属性:

属性说明
document.title设置文档标题等价于HTML的<.title>标签
document.bgColor设置页面背景色
document.linkColor未点击过的链接颜色
document.alinkColor激活链接(焦点在此链接上)的颜色
document.fgColor设置前景色(文本颜色)
document.vlinkColor已点击过的链接颜色
document.URL设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate文件建立日期,只读属性
document.fileModifiedDate文件修改日期,只读属性
document.fileSize文件大小,只读属性
document.cookie设置和读出cookie
document.charset设置字符集 简体中文:gb2312

document 对象方法

方法说明
document.write()动态向页面写入内容
document.createElement(Tag)创建一个html标签对象
document.getElementById(ID)获得指定ID值的对象
document.getElementsByTagName(tagname)获得指定标签名的对象
document.getElementsByName(Name)获得指定Name值的对象
document.getElementsByClassName(classname)获得指定类名的对象(html5 API)

getElementById(id)方法返回一个对象,该对象对应着文档里一个特定的元素节点。
getElementsByTagName()方法将返回一个对象数组,他们分别对应着文档里一个特定的元素节点
write()writeln()方法:区别在于后者在传送到文档中的字符串末时附加一个回车符。
querySelector方法的参数使用CSS选择器语法,getElementById方法的参数是HTML标签元素的id属性。

document.querySelector('li')
document.getElementById('last')

如果有多个节点满足querySelector方法的条件,则返回第一个匹配的节点。
document.createElement()是在对象中创建一个对象,要与appendChild()insertBefore()方法联合使用。
其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

使用Document对象

获取元素

通过Document对象,我们可以使用不同的方法获取HTML文档中的元素。这些方法基于元素的id标签名类名CSS选择器等,以下是一些常见的获取元素的方法:

通过id获取元素

使用getElementById方法可以通过元素的id属性获取元素。这是一种常见的操作,通常用于获取具体的DOM元素并进行操作。

代码演示:

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><div id="myDiv">通过id获取元素</div><script>// 获取id为"myDiv"的元素var divElement = document.getElementById("myDiv");divElement.innerHTML = "这是getElementById方法通过id获取元素";</script>
</body>
</html>

在上述示例中,我们首先在HTML中创建一个<div>元素,并为其设置了id属性为"myDiv"。然后,通过JavaScriptgetElementById方法,我们获取了这个元素,并使用innerHTML属性来更新其内容。

通过标签名获取元素

使用getElementsByTagName方法可以获取特定标签名的元素集合。这对于获取文档中所有相同标签名的元素非常有用。

代码演示:

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><script>// 获取第一个<li>元素var listItems = document.getElementsByTagName("li")[0];listItems.style.color="red";</script>
</body>
</html>

在上述示例中,我们使用getElementsByTagName方法获取了第一个<li>元素,并通过style.color方法使得第一个<li>元素字体变为红色。

通过类名获取元素

使用getElementsByClassName方法可以获取特定类名名的元素集合。这对于获取文档中所有相同类名的元素非常有用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div class="DivElement">通过类名获取元素</div>
<script>// 获取类名为DivElement的元素var divElements= document.getElementsByClassName("DivElement")[0];divElements.style.color="#00ffd0";
</script>
</body>
</html>

在上述示例中,我们使用getElementsByClassName方法获取了第一个类名为DivElement的元素,并通过style.color方法使得第一个类名为DivElement的元素字体变为红色。

创建新元素

通过Document对象,您可以创建新的HTML元素,然后将它们添加到文档中。使用createElement方法可以创建一个新的元素。

代码演示:

<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body><div id="container"><!-- 新元素将会被添加到这里 --></div><script>// 创建一个新的<p>元素var newParagraph = document.createElement("p");newParagraph.innerHTML = "这是一个新的元素";// 获取容器元素并将新元素添加进去var container = document.getElementById("container");container.appendChild(newParagraph);</script>
</body>
</html>

在上述示例中,我们首先在HTML中创建了一个空的<div>元素,并为其设置了id属性为"container",表示新元素将会被添加到这个容器中。接着,通过JavaScript的createElement方法,我们创建了一个新的<p>元素,并使用innerHTML属性来设置它的内容。最后,我们通过appendChild方法将新元素添加到容器中。

写入文本

Document对象还提供了一个方便的方法write,用于将文本写入文档。这对于动态生成内容或调试JavaScript非常有用。

代码演示:

<!DOCTYPE html>
<html>
<head><title>Write Text Example</title>
</head>
<body><script>// 写入文本document.write("Hello, World!");</script>
</body>
</html>

需要注意的是,document.write方法会替换整个文档内容,因此要慎用,以免破坏页面的结构。

DOM事件

Document对象也可以用于处理DOM事件。事件是与HTML元素相关的用户行为,例如单击鼠标悬停键盘输入等。JavaScript允许您捕获这些事件并执行相应的操作。以下是一些常见的DOM事件:

事件说明
click:当元素被单击时触发。
mouseover:鼠标悬停在元素上时触发。
keydown:键盘按键被按下时触发。
submit:表单被提交时触发。
load:页面和所有资源加载完毕时触发。

代码演示:

<!DOCTYPE html>
<html>
<head><title>DOM Event Example</title>
</head>
<body><button id="myButton">Click Me</button><script>// 获取按钮元素var button = document.getElementById("myButton");// 添加点击事件处理程序button.addEventListener("click", function() {alert("Button clicked!");});</script>
</body>
</html>

在上述示例中,我们首先获取了一个按钮元素,其id"myButton"。然后,我们使用addEventListener方法来添加一个点击事件处理程序,当按钮被点击时,将触发alert弹窗

这样的事件处理程序允许您在用户与网页进行交互时执行特定的JavaScript代码,从而实现各种互动和反馈。

总结:

Document对象是DOM的核心,代表整个HTML文档。通过Document对象,您可以获取元素创建新元素写入文本处理事件以及修改元素的样式。这些功能使JavaScript能够与网页内容互动,实现动态和交互性的网页。无论是更改文本内容、更新样式、添加交互事件,还是创建新的元素,Document对象都是前端开发不可或缺的工具之一。

⭐最后⭐

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/593939.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华媒舍:6个使你的媒体发稿推广更简单的方法!

做为新闻报道媒体从业人员&#xff0c;在宣传发稿上要行走在最前沿&#xff0c;保持竞争力。下面我们就向您介绍六个又简单又实用的方法&#xff0c;帮助你提升新闻报道媒体营销推广发稿效果。 方法一&#xff1a;明确目标群体我们应该明确定义我们自己的目标群体。掌握观众的特…

爬虫如何获取免费代理IP(一)

随着网络爬虫技术的日益发展&#xff0c;获取和使用免费代理IP已成为许多爬虫工作者关注的焦点。免费代理IP不仅能够帮助爬虫隐藏真实身份&#xff0c;还能提高数据抓取的效率。然而&#xff0c;在实际应用中&#xff0c;免费代理IP也带来了一系列挑战。接下来我提供三个篇文章…

小H靶场笔记:DC-3

DC-3 January 3, 2024 4:11 PM Tags&#xff1a;Joomla owner&#xff1a;只惠摸鱼 信息收集 探测靶机ip&#xff1a; 192.168.199.133 nmap 扫描端口、 系统版本 漏洞 发现只有80端口开发&#xff0c; 且有cve-2017-8917漏洞存在是Joomla的SQL注入漏洞 Joomla版本为3.7.0…

Docker安装Superset

文章目录 拉取镜像安装创建目录运行Superset容器设置用户名密码初始化数据库服务初始化启动superset服务访问服务 拉取镜像 docker pull amancevice/superset查看拉取的镜像ID [rootbigdata ~]# docker images REPOSITORY TAG IMAGE…

SpringBoot-SpringSecurity

Spring Security 中文文档&#xff1a;https://springdoc.cn/spring-security/ Thymeleaf&#xff1a;https://www.thymeleaf.org/ 依赖 <!--security-thymeleaf 前端验证--> <!--<dependency><groupId>org.thymeleaf.extras</groupId><artifac…

相关性与P值

相关性与P值 0 FQA&#xff1a;1 相关性与显著性的关系2 相关性分析3 使用medcalc进行相关性分析&#xff1a;参考文章&#xff1a; 0 FQA&#xff1a; 主要描述相关性和p值分别代表什么意义&#xff1f; 以及如何使用medcalc计算相关性和p值。 Q1&#xff1a;p值代表什么意义…

01.PostgreSQL基本SELECT语句

1. SQL简介 SQL 是用于访问和处理数据库的标准的计算机语言。 SQL有两个标准:分别是SQL92和SQL99,他们分别代表了92年和99年颁布的SQL标准,我们今天使用的SQL语言依然遵循这些标准。 注意:除了 SQL 标准之外,大部分 SQL 数据库程序都拥有它们自己的私有扩展! 2. SQL分…

软件设计 - 大数据 - 性能优化篇2

前言 偶然之间想到&#xff0c;在数据库中我们存储的数据放置在了某个列中&#xff0c;但这个数据的体积很大。且已明确知晓这个数据不会用于查询操作。只会在业务需要的时候从数据库中拿出来使用即可。 举例 - 新闻稿件编辑 根据场景我们知道&#xff0c;当新闻内容比较多时…

【每日一题】466. 统计重复个数-2024.1.2

题目&#xff1a; 466. 统计重复个数 定义 str [s, n] 表示 str 由 n 个字符串 s 连接构成。 例如&#xff0c;str ["abc", 3] "abcabcabc" 。 如果可以从 s2 中删除某些字符使其变为 s1&#xff0c;则称字符串 s1 可以从字符串 s2 获得。 例如&…

主流桌面浏览器Chrome,FireFox和Edge等如何禁用弹出式窗口阻止程序,这里有详细步骤

为什么你想知道如何禁用浏览器中的弹出式窗口阻止程序?毕竟,弹出式窗口是网络的祸害:显示烦人的广告、虚假的安全消息和其他刺激,会分散你的浏览注意力,甚至可能包含恶意代码。 所有主要的桌面浏览器现在都默认阻止弹出式窗口,那么你到底为什么要取消阻止这些害虫呢?事…

【力扣100】39.组合总和

添加链接描述 class Solution:def combinationSum(self, candidates: List[int], target: int) -> List[List[int]]:def backtrack(path,target,res,index):if target0:res.append(path[:])returnif target<0:return for i in range(index,len(candidates)):if target&g…

c盘扩容时,d盘无法删除卷问题

C盘扩容时&#xff0c;磁盘管理中D盘右键无法删除卷的原因 首先&#xff0c;D盘下文件夹为空&#xff0c;但是显示可用空间不是100%&#xff0c;经过排查&#xff0c;发现是虚拟内存设置在了D盘导致无法删除卷&#xff0c;这里只需要将虚拟内存放到其他盘&#xff0c;如E盘即可…

【MyBatis】配置 SQL 提示(IDEA 代码自动补全)和解决未能解析数据库 Unable to resolve table ‘employee‘ 问题

默认在 MyBatis 中编写 SQL 语句是不识别的。 需要做如下配置&#xff1a; 然后 SQL 语句可以出现提示&#xff0c;但是自己的数据库会报错&#xff1a; 原因是 IDEA 没有和 数据库 建立连接&#xff0c;需要连接数据库&#xff08;注意&#xff1a;需要具体到某个 Schema&…

07、Docker 安装 MinIO

Docker 安装 MinIO 中文官网 拉取镜像 docker pull minio/minio数据文件映射 mkdir -p /docker/minio/data 运行容器 docker run -d \-p 9000:9000 \-p 9090:9090 \--name minio \-v /docker/minio/data:/data \ -e "MINIO_ROOT_USERadmin" \ -e "MINIO_R…

springCloud之Stream

1、简介 Spring Cloud Stream是一个用来为微服务应用构建 消息驱动 能力的框架。通过使用 Spring Cloud Strea m &#xff0c;可以有效简化开发人员对消息中间件的使用复杂度&#xff0c;降低代码与消息中间件间的耦合度&#xff0c;屏蔽消息中间件 之 间的差异性&#xff0c;…

stm32学习总结:5、Proteus8+STM32CubeMX+MDK仿真串口并使用串口打印日志(注意重定向printf到串口打印的问题)

stm32学习总结&#xff1a;5、Proteus8STM32CubeMXMDK仿真串口并使用串口打印日志&#xff08;注意重定向printf到串口打印的问题&#xff09; 文章目录 stm32学习总结&#xff1a;5、Proteus8STM32CubeMXMDK仿真串口并使用串口打印日志&#xff08;注意重定向printf到串口打印…

前端的JWT怎么进行用户认证?

实现用户认证和权限控制是Web应用开发中的重要部分&#xff0c;关系到用户的隐私和数据安全。在Go语言的后端开发中&#xff0c;一般会使用JSON Web Tokens&#xff08;JWT&#xff09;搭配存储中间件&#xff08;如Redis&#xff09;来处理用户认证和权限控制。JWT是一个开放标…

软碟通UltraISO制作U盘安装Ubuntu

清华大学开源软件镜像站https://mirrors.tuna.tsinghua.edu.cn/ 从里面下载ubuntu-22.04-desktop-amd64.iso UltraISO是一款非常不错的U盘启动盘制作工具&#xff0c;一直被许多网友们所喜欢&#xff0c;使用简单、方便。 UltraISO官方下载地址&#xff1a;https://cn.ultrais…

魔改版小市值策略

策略思路 最近几年&#xff0c;小市值策略一直都收益不错&#xff08;当然&#xff0c;不包含17年和18年&#xff09;。小市值因子对收益的影响是很大的。特别是行情不好的时候&#xff0c;大家都忙着炒作热点&#xff0c;那么这时候符合题材的小市值更加符合炒作标准了。 为…

安装tensorrt环境在linux上

在linux上输入命令 bash cat /etc/os-release 命令查看系统版本 nvidia-smi命令后有内容弹出而没有报错,表明系统中安装了NVIDIA显卡驱动&#xff0c;并且该命令成功地显示了有关NVIDIA GPU的信息。 输入nvcc -V并且看到输出时,这表明您的系统中已经安装了NVIDIA的CUDA工具…