当前位置： 首页 > news >正文

【Web APIs】DOM 文档对象模型 ⑤ ( 获取特殊元素 | 获取 html 元素 | 获取 body 元素 )

news 2025/12/31 5:14:41

文章目录

  • 一、获取特殊元素
    • 1、获取 html 元素
    • 2、获取 body 元素
    • 3、完整代码示例


本博客相关参考文档 :

  • WebAPIs 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API
  • getElementById 函数参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById
  • Element 对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Element
  • getElementsByTagName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByTagName
  • HTMLCollection 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection
  • getElementsByClassName 文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementsByClassName
  • querySelector 函数文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
  • 【CSS】CSS 总结 ① ( CSS 引入方式 | CSS 选择器 | 基础选择器 | 复合选择器 ) ★
  • querySelectorAll 函数 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll
  • NodeList 对象 : https://developer.mozilla.org/zh-CN/docs/Web/API/NodeList





一、获取特殊元素


HTML 网页的基本结构如下 :

<!DOCTYPE html>
<html lang="en"><head>
</head><body>
</body></html>

在 HTML 标签结构中 ,

  • html 标签是最顶层的标签 , 所有的元素都在 html 标签内部 ,
  • body 标签是显示部分内容的 顶层标签 ;

通过 JavaScript 和 DOM 操作 可以获取上述两个 html 和 body 特殊标签 元素 ;


1、获取 html 元素


通过 document.documentElement 属性 , 可以获取文档中的 html 元素 , 该元素是 HTML 网页文档的最顶层元素 ;

代码示例 :

const htmlElement = document.documentElement;
console.log(htmlElement); // 输出整个 <html> 元素的 DOM 对象

2、获取 body 元素


使用 document.body 属性 , 可以获取 body 元素 ;

代码示例 :

const bodyElement = document.body;
console.log(bodyElement); // 输出整个 <body> 元素的 DOM 对象

3、完整代码示例


在下面的代码中 , 通过 document.body 获取 body 元素 , 将背景颜色设置为黄色 ;

通过 document.documentElement 获取 html 元素 , 将该标签下的所有字体大小设置为 30 像素 ;


代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JavaScript</title><style></style>
</head><body><div class='box'>Hello</div><div class='box'>Hello</div><div>Hello</div><div>Hello2</div><div id="nav"><div>Hello2</div><div class='box'>Hello2</div><div class='box'>Hello2</div></div><script>// 注意 : HTML 文档加载顺序是从上到下加载 // 这里要先加载标签 , 然后加载 JavaScript 脚本// 设置 <body> 元素的背景颜色document.body.style.backgroundColor = 'yellow';// 设置 <html> 元素的字体大小document.documentElement.style.fontSize = '30px';// 获取 <body> 元素的子节点数量const bodyChildrenCount = document.body.children.length;console.log(`Body 元素的子节点数量: ${bodyChildrenCount}`);</script>
</body></html>

执行结果 :

在这里插入图片描述

相关文章：

【Web APIs】DOM 文档对象模型 ⑤ ( 获取特殊元素 | 获取 html 元素 | 获取 body 元素 )

文章目录 一、获取特殊元素1、获取 html 元素2、获取 body 元素3、完整代码示例 本博客相关参考文档 : WebAPIs 参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/APIgetElementById 函数参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getE…...

编程日记 2024/6/24 8:27:04

Android11 以Window的视角来看FallbackHome的启动

在WMS中&#xff0c;使用WindowState代表着一个Window并维护着一个Window的"层级树"&#xff0c;每个Window需要按照"层级"的规则进行排列。对于FallbackHome&#xff0c;其Window是挂载在home task上&#xff0c;而home task挂载在DefaultTaskDisplayArea…...

编程日记 2024/6/24 8:26:02

9 RestClient客户端操作文档

1. match_all GetMapping("matchAll")public void matchAll() throws IOException {//1. 准备requestSearchRequest request new SearchRequest("hotel");//2. 组织DSL参数request.source().query(QueryBuilders.matchAllQuery());SearchResponse respon…...

编程日记 2024/6/24 8:25:01

『Z-Weekly Feed 08』加密资产观 | FHE应用前景 | OPAL协议

一位机构投资者的加密资产观 作者&#xff1a;Hongbo 01 &#x1f4a1;TL;DR 在加密投资领域如何找到真正的“价值”&#xff1a;Crypto 作为一种新兴资产&#xff0c;应该找到一种区别于传统公司股票资产的估值方法&#xff0c;本文重点阐述了加密货币作为新的资产类型与传统资…...

编程日记 2024/6/24 8:24:00

酒店预定系统

酒店预定系统本身设计过程中会遇到售卖系统两个常见问题&#xff0c;第一个同一个房间同一日期被多个订单预定&#xff0c;或者预定和库存数据不一致&#xff0c;这些都会涉及到金钱&#xff0c;需要在系统涉及是被重点考虑。 问题1:同一个房间同一个日期被多个订单预定 酒店…...

编程日记 2024/6/24 8:19:56

Redis的实战常用一、验证码登录（解决session共享问题）（思路、意识）

一、基于session实现登录功能 第一步&#xff1a;发送验证码&#xff1a; 用户在提交手机号后&#xff0c;会校验手机号是否合法&#xff1a; 如果不合法&#xff0c;则要求用户重新输入手机号如果手机号合法&#xff0c;后台此时生成对应的验证码&#xff0c;同时将验证码进行…...

编程日记 2024/6/24 8:18:55

基于Spring Boot的智能分析平台

项目介绍&#xff1a; 智能分析平台实现了用户导入需要分析的原始数据集后&#xff0c;利用AI自动生成可视化图表和分析结论&#xff0c;改善了传统BI系统需要用户具备相关数据分析技能的问题。该项目使用到的技术是SSMSpring Boot、redis、rabbitMq、mysql等。在项目中&#…...

编程日记 2024/6/24 8:16:53

HTML(13)——显示模式

目录 显示模式 块级元素 行内元素 行内块元素 转换显示模式 显示模式&#xff1a;标签的显示方式 作用&#xff1a;布局网页时&#xff0c;根据标签的显示模式选择合适的标签摆放内容 显示模式 块级元素 独占一行宽度默认为父级的100%添加宽高属性生效 行内元素 …...

编程日记 2024/6/24 8:15:52

【Spring】Spring Boot 快速入门

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…...

编程日记 2024/6/24 8:13:49

Go自定义数据的序列化流程

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…...

编程日记 2024/6/24 8:11:47

贪心算法练习题（2024/6/18）

什么是贪心 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 贪心算法一般分为如下四步&#xff1a; 将问题分解为若干个子问题找出适合的贪心策略求解每一个子问题的最优解将局部最优解堆叠成全局最优解 1分发饼干 假设你是一位很棒的家长&#xff0c…...

编程日记 2024/6/24 8:10:46

4.1 四个子空间的正交性

一、四个子空间的正交性 如果两个向量的点积为零&#xff0c;则两个向量正交&#xff1a; v ⋅ w v T w 0 \boldsymbol v\cdot\boldsymbol w\boldsymbol v^T\boldsymbol w0 v⋅wvTw0。本章着眼于正交子空间、正交基和正交矩阵。两个子空间的中的向量&#xff0c;一组基中的向…...

编程日记 2024/6/24 8:09:45

RabbitMQ实践——使用WebFlux响应式方式实时返回队列中消息

大纲 Pom.xml监听队列实时返回消息测试完整代码工程代码 在之前的案例中&#xff0c;我们在管理后台收发消息都是通过短连接的形式。本文我们将探索对队列中消息的实时读取&#xff0c;并通过流式数据返回给客户端。 webflux是反应式Web框架&#xff0c;客户端可以通过一个长连…...

编程日记 2024/6/24 8:07:42

SpringBoot前后端传递数据时常用的JSON格式数据是什么？【讲解JSON概念、语法、以及Java对象互转】

SpringBoot前后端传递数据时常用的JSON格式数据是什么&#xff1f; JSON概念JSON语法JSON的两种结构&#xff1a;JSON字符串和Java对象互转&#xff1a;objectMapper.writeValueAsString(person);objectMapper.readValue(jsonStr,Person.class); 在SpringMVC框架中&#xff0c;…...

编程日记 2024/6/24 8:05:40

mysql学习——SQL中的DQL和DCL

SQL中的DQL和DCL DQL基本查询条件查询聚合函数分组查询排序查询分页查询 DCL管理用户权限控制 学习黑马MySQL课程&#xff0c;记录笔记&#xff0c;用于复习。 DQL DQL英文全称是Data Query Language(数据查询语言)&#xff0c;数据查询语言&#xff0c;用来查询数据库中表的记…...

编程日记 2024/6/24 8:04:38

windows系统上nginx搭建文件共享

1、下载windows版nginx 下载地址 2、配置nginx 编辑nginx.conf配置文件 在http模块下添加这个参数 underscores_in_headers on;#修改location内容&#xff0c;共享哪个文件夹&#xff0c;就写哪个文件夹&#xff0c;最后一定要跟上/&#xff0c;否则无法访问 location / {…...

编程日记 2024/6/24 8:03:37

星闪指向遥控，做家电交互的破壁人

“面壁者罗辑&#xff0c;我是你的破壁人。” 科幻小说《三体》中&#xff0c;当人类的基础科学被三体人封锁&#xff0c;变得停步不前&#xff0c;人类启动了自救的面壁计划&#xff0c;通过一次又一次破壁&#xff0c;找到战胜三体人的办法。 现实中&#xff0c;有一点已经成…...

编程日记 2024/6/24 8:02:35

SpringBoot使用AutoConfigure实现依赖库自动导入配置

我们知道导入配置有两种&#xff0c;一种是Value&#xff0c;一种是ConfigurationProperties&#xff0c;将对应的类标记为Component即可导入。但是被注解标识的类创建Bean有一个前提&#xff0c;只对启动类所在的包路径下的所有带有Component等注解的类才会创建Bean。如果我们…...

编程日记 2024/6/24 8:01:34

QT中利用动画弄一个侧边栏窗口，以及贴条效果

1、效果 2、关键代码 void Widget::on_sliderBtn_clicked() {m_sliderWidget->show();QPropertyAnimation* animation = new QPropertyAnimation(m...

编程日记 2024/6/24 8:00:32

win10免安装配置MySQL8.4.0

注&#xff1a;此教程基于win10 22H2 版本 1、下载最新版本MySQL压缩包 下载链接&#xff1a;MySQL官网下载地址 点击第二行的 ZIP Archive 后面的Download&#xff08;当前时间2024-06-19最新版本是8.4.0&#xff09; 2、解压并添加配置文件 下载完毕后&#xff0c;解压缩…...

编程日记 2024/6/24 7:58:29

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2025/12/28 0:18:57

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/12/25 4:05:41

day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a;单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a;应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠标…...

编程新知 2025/12/28 6:18:51

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

编程新知 2025/12/26 21:22:49

【安全篇】金刚不坏之身：整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

编程新知 2025/12/7 16:12:52

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

编程新知 2025/12/25 1:15:59

pgsql：还原数据库后出现重复序列导致“more than one owned sequence found“报错问题的解决

问题&#xff1a; pgsql数据库通过备份数据库文件进行还原时&#xff0c;如果表中有自增序列&#xff0c;还原后可能会出现重复的序列&#xff0c;此时若向表中插入新行时会出现“more than one owned sequence found”的报错提示。 点击菜单“其它”-》“序列”&#xff0c;…...

编程新知 2025/12/26 18:29:34

RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上

一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema&#xff0c;不需要复杂的查询&#xff0c;只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 &#xff1a;在几秒钟…...

编程新知 2025/12/25 16:20:01