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

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

news 2025/9/18 10:23:16

文章目录

  • 一、获取特殊元素
    • 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

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2025/9/14 12:35:04

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/9/12 14:19:17

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/7/27 0:21:52

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/9/2 18:28:40

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2025/9/14 22:39:28

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/9/9 10:08:24

字符串哈希+KMP

P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...

编程新知 2025/7/25 9:01:52

C#最佳实践：为何优先使用as或is而非强制转换

C#最佳实践&#xff1a;为何优先使用as或is而非强制转换 在 C# 的编程世界里&#xff0c;类型转换是我们经常会遇到的操作。就像在现实生活中&#xff0c;我们可能需要把不同形状的物品重新整理归类一样&#xff0c;在代码里&#xff0c;我们也常常需要将一个数据类型转换为另…...

编程新知 2025/9/17 11:51:32