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

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

news 文章来源：https://blog.csdn.net/han1202012/article/details/139896450 2025/5/7 7:09:51

文章目录

一、获取特殊元素
- 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中，使用WindowState代表着一个Window并维护着一个Window的"层级树"，每个Window需要按照"层级"的规则进行排列。对于FallbackHome，其Window是挂载在home task上，而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协议

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

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

酒店预定系统

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

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

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

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

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

基于Spring Boot的智能分析平台

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

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

HTML(13)——显示模式

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

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

【Spring】Spring Boot 快速入门

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

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

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

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

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

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

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

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

4.1 四个子空间的正交性

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

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

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

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

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

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

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

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

mysql学习——SQL中的DQL和DCL

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

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

windows系统上nginx搭建文件共享

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

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

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

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

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

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

我们知道导入配置有两种，一种是Value，一种是ConfigurationProperties，将对应的类标记为Component即可导入。但是被注解标识的类创建Bean有一个前提，只对启动类所在的包路径下的所有带有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

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

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

VS Code安装及环境配置（超详细）

VS Code简介 Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器，以界面简洁、轻量著称。它是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流开发语言的语法高亮、智能代码补全、自定义…...

编程日记 2024/6/24 7:57:28

shell脚本通过解析日志使用串口开关屏知识点整理

#!/bin/bash #logPath 写日志的存放路径 #logPath/home/workspace/tvs/trainborne logPath/home/firefly tmpFile$$ function getLogName() { #echo "$logPath/LCDController_"date "%Y%m%d000000.log" echo "LCDController_20240424000000.log&quo…...

编程日记 2024/6/24 7:56:27

速盾：视频cdn和网站cdn的相同点与不同点

CDN（Content Delivery Network）是一种分布式网络架构，旨在为用户提供高效、高质量的内容传送服务。CDN主要通过将内容分发到全球各地的边缘节点，并根据用户的地理位置选择最近的节点来提供内容，从而加速内容的传输并降…...

编程日记 2024/6/24 7:55:26

37.自定义协议

自定义协议要素 1.魔数：用来第一时间判定是否是无效数据包。 2.版本号：主持协议升级。 3.序列化算法：消息正文到底采用那种序列化方式，可以由此扩展，例如：json,protobuf（google的序列化算法，基于二进制，虽然可读性不好，但是字节数占用更少）,hessian（基于二进制）…...

编程日记 2024/6/24 7:54:24

【React Native】measureInWindow在安卓上无法正确获取View在屏幕上的布局信息

问题描述： 在React Native中，我们可以使用measureInWindow的方式去获取一个View在屏幕中的位置信息： 下面这个Demo中，我们写了一个页面HomePage和一个列表项组件ListItemA，我们期望每过5s监测一次列表中每一项在屏幕中…...

编程日记 2024/6/24 7:53:22

C++ 教程 - 04 类的使用

文章目录类的定义类定义案例构造函数类的定义 C 在 C 语言的基础上增加面向对象编程，类是用于指定对象的形式，是一种用户自定义的数据类型，封装了数据和函数。类可以被看作是一种模板，可以用来创建具有相同属性和行为的多个对象…...

编程日记 2024/6/24 7:51:18

excel按模板文件导出多个文件并压缩为ZIP格式返回前端

思路：先准备好模板文件和与之对应的实体类，数据库数据等，还是之前思路，根据查出的数据，填充模板文件，生成一个临时文件，最后将这些个临时文件打包为zip返回前端，并将多个临时文件删除…...

编程日记 2024/6/24 7:49:16

自动驾驶仿真测试用例表格示例 ACC ELK FCW

自动驾驶仿真测试用例表格示例测试用例概览本测试用例表格涵盖了自动驾驶系统中多个关键功能和场景的测试，旨在确保系统在不同条件下的表现和稳定性。用例编号测试项目测试描述预期结果实际结果通过/失败TC-001ACC功能测试在高速公路上启用ACC，测试车…...

编程日记 2024/6/24 7:48:15

数组 (java)

文章目录一维数组静态初始化动态初始化二维数组静态初始化动态初始化数组参数传递可变参数关于 main 方法的形参 argsArray 工具类sort 中的 comparable 和 comparatorcomparator 比较器排序comparable 自然排序一维数组线性结构静态初始化第一种：int[] a…...

编程日记 2024/6/24 7:46:12

时序预测 | Matlab基于Transformer多变量时间序列多步预测

目录效果一览基本介绍程序设计参考资料效果一览基本介绍 1.Matlab基于Transformer多变量时间序列多步预测； 2.多变量时间序列数据集（负荷数据集），采用前96个时刻预测的特征和负荷数据预测未来96个时刻的负荷数据； 3…...

编程日记 2024/6/24 7:45:11

文章目录

一、获取特殊元素

1、获取 html 元素

2、获取 body 元素

3、完整代码示例

相关文章：