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

javaScript：如何获取html中的元素对象

news 2025/9/24 14:32:16

前言：

方法

1.通过id获取元素

2.通过标签名获取元素

3.通过类名class获取元素

获取body的方法

1.document.getElementsByTagName('body')[0]

2.document.body

前言：

通过获取HTML中的元素对象，JavaScript可以对网页进行动态交互、更新、响应用户操作、处理表单数据、动态加载和操作页面元素等，为网页提供交互性、动态性和实时性等特性，让用户获得更好的体验和更强的互动性。

方法

1.通过id获取元素

let ul = document.getElementById('list')
ul.style.border = '1px #f00 solid';

2.通过标签名获取元素

document.getElementsByTagName('标签名');

特点：

1.调用对象可以是 document之外的对象

如果通过 document 对象获取的标签，则是获取页面上所有的标签对象

如果通过其他对象获取的标签，则是获取该对象下所有的标签对象

2.获取的元素对象不仅仅是一个，可以有多个

3.获取的标签对象存放在数组中，也就是该方法的返回值是一个数组

数组，在数组中可以存放任意类型的数据

let arr =['电影'，'作业','美食'，'游戏'，122，232，true];

数组的下标从0 开始计算，因此如果需要从数组中获取内容则：

arr[内容对应的下标]

let li = document.getElementsByTagName('li');console.log(li);li[7].style.border='2px pink solid'let li1 = ul.getElementsByTagName('li');console.log(li1);li1[9].style.background = 'pink'let arr =['电影','作业','美食','游戏',122,232,true];console.log(arr[2]);

3.通过类名class获取元素

document.getElementsByClassName('class名');

返回值是一个数组，数组中包含了所有具有该class名的元素对象

特点和document.getElementsByTagName 一致

let liBox = document.getElementsByClassName('wp');console.log(liBox);liBox[3].style.background='pink';

获取body的方法

1.document.getElementsByTagName('body')[0]

 let body1 = document.getElementsByTagName('body')[0];

2.document.body

document.body.style.background='pink';

相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取html中的元素对象</title><style>*{margin: 0;padding: 0;}ul{list-style-type: none;}ul li {height: 40px;margin-bottom: 20px;background: #04be02;}a.hover{border: 1px #f00 solid;}</style>
</head>
<body><ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li class="wp">5</li><li class="wp">6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul><ul><li>1</li><li>2</li><li>3</li><li>4</li><li class="wp">5</li><li class="wp">6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul>
</body>
</html>
<script>// 1.通过id获取元素let ul = document.getElementById('list')ul.style.border = '1px #f00 solid';// 2.通过标签名获取元素// document.getElementsByTagName('标签名');// 特点：// 1.调用对象可以是 document之外的对象// 如果通过 document 对象获取的标签，则是获取页面上所有的标签对象// 如果通过其他对象获取的标签，则是获取该对象下所有的标签对象// 2.获取的元素对象不仅仅是一个，可以有多个// 3.获取的标签对象存放在数组中，也就是该方法的返回值是一个数组// 数组，在数组中可以存放任意类型的数据//  let arr =['电影'，'作业','美食'，'游戏'，122，232，true];// 数组的下标从0 开始计算，因此如果需要从数组中获取内容则：// arr[内容对应的下标]let li = document.getElementsByTagName('li');console.log(li);li[7].style.border='2px pink solid'let li1 = ul.getElementsByTagName('li');console.log(li1);li1[9].style.background = 'pink'let arr =['电影','作业','美食','游戏',122,232,true];console.log(arr[2]);/*3.通过类名class获取元素document.getElementsByClassName('class名');返回值是 一个数组，数组中包含了所有具有该class名的元素对象特点和document.getElementsByTagName 一致*/let liBox = document.getElementsByClassName('wp');console.log(liBox);liBox[3].style.background='pink';/*获取body的方法1.document.getElementsByTagName('body')[0]2.document.body*/let body1 = document.getElementsByTagName('body')[0];body1.style.background='#ccc';document.body.style.background='pink';
</script>

javaScript：如何获取html中的元素对象

目录前言： 方法 1.通过id获取元素 2.通过标签名获取元素 3.通过类名class获取元素获取body的方法 1.document.getElementsByTagName(body)[0] 2.document.body 相关代码前言： 通过获取HTML中的元素对象，JavaScript可以对网页进行动…...

编程日记 2023/8/14 23:09:47

面试总结-webpack/git

说说你对webpack的理解 webpack 是一个静态模块打包器，整个打包过程就像是一条生产线，把资源从入口放进去，经过一系列的加工（loader），最终转换成我们想要的结果，整个加工过程还会有监控&#x…...

编程日记 2023/8/14 23:08:46

深入解析美颜SDK：算法、效果与实现

在当今数字化社会中，图像处理和美化技术已经成为了许多应用领域的重要组成部分，尤其在视频直播领域，美颜技术更是无处不在。直播美颜SDK作为一种集成的软件工具包，为开发者和应用提供了强大的美颜功能。一、算法原理磨皮算法…...

编程日记 2023/8/14 23:07:45

ChatGPT Plus和ChatGPT对比

模型规模更大，参数数量超过6万亿，比ChatGPT大很多训练数据更丰富，包括不同语言、领域和类型的数据语言理解和生成能力更强，能够更准确地理解和生成文本可解释性和可控性更好，支持更多的调参和控制参数，生成…...

编程日记 2023/8/14 23:06:43

npm run xxx 的时候发生了什么？（以npm run dev举例说明）

文章目录一、去package.json寻找scripts对应的命令二、去node_modules寻找vue-cli-service三、从package-lock.json获取.bin的软链接1. bin目录下的那些软连接存在于项目最外层的package-lock.json文件中。2.vue-cli-service文件的作用3.npm install 的作用总结一、去packag…...

编程日记 2023/8/14 23:04:41

图解结构体大小和位域例子

struct A {short a; char b; int c : 1; char d : 4; short e : 7; }; 备注：蓝色：表示占一个符号位空间红色：表示补齐其他颜色：实际最大值所占空间 （1）图解例1 st…...

编程日记 2023/8/14 23:03:40

游戏行业实战案例 5 ：玩家在线分布

【面试题】某游戏数据后台设有“登录日志”和“登出日志”两张表。「登录日志」记录各玩家的登录时间和登录时的角色等级。「登出日志」记录各玩家的登出时间和登出时的角色等级。其中，「角色 id 」字段唯一识别玩家。游戏开服前两天（ 2022-08-13 至…...

编程日记 2023/8/14 23:02:39

TypeScript 关于对【泛型】的定义使用解读

目录概念导读泛型函数多个泛型参数泛型约束泛型别名泛型接口泛型类总结： 概念导读泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。使用泛型可以复用类型…...

编程日记 2023/8/14 23:01:36

盛元广通食品药品检验检测实验室LIMS系统

随着食品与制药行业法规标准的日益提高和国家两化融合的不断推进，为保障检验工作的客观、公正及科学性，确保制药企业对于生产、实验室、物流、管理的信息化和智能化需求越来越明确，为确保新品可及时得到科学准确的检测检验结果，盛…...

编程日记 2023/8/14 23:00:36

【数据结构】-- 栈和队列

🐇 🔥博客主页： 云曦 📋系列专栏：数据结构 💨吾生也有涯，而知也无涯 💛 感谢大家👍点赞 😋关注📝评论文章目录前言一、栈📙1.1 栈…...

编程日记 2023/8/14 22:59:35

使用SpringAop切面编程通过Spel表达式实现Controller权限控制

目录参考一、概念SpEL表达式二、开发引入包定义注解定义切面定义用户上下文三、测试新建Service在方法上注解新建Service在类上注解运行参考 SpringBoot：SpEL让复杂权限控制变得很简单一、概念对于在Springboot中，利用自定义注解切面来实现接口…...

编程日记 2023/8/14 22:58:33

Flutter：简单搞一个内容高亮

内容高亮并不陌生，特别是在搜索内容页面，可以说四处可见，就拿掘金这个应用而言，针对某一个关键字，我们搜索之后，与关键字相同的内容，则会高亮展示，如下图所示： 如上的效果…...

编程日记 2023/8/14 22:57:32

2023/08/10

文章目录一、计算属性传参二、小程序、h5跳转其他平台授权三、封装popup弹窗四、实现保存海报五、下载图片和复制分享链接一、计算属性传参计算属性的值往往通过一个回调函数返回，但是这个回调函数是无法传递参数的，要想实现计算属性传参可以通过闭包…...

编程日记 2023/8/14 22:56:31

LeetCode 1289. 下降路径最小和 II：通俗易懂地讲解O(n^2) + O(1)的做法

【LetMeFly】1289.下降路径最小和 II：通俗易懂地讲解O(n^2) O(1)的做法力扣题目链接：https://leetcode.cn/problems/minimum-falling-path-sum-ii/ 给你一个 n x n 整数矩阵 arr ，请你返回非零偏移下降路径数字和的最小值。非零偏移下…...

编程日记 2023/8/14 22:55:30

一、题目 Suppose there are 5 types of coins: 50-cent, 25-cent, 10-cent, 5-cent, and 1-cent. We want to make changes with these coins for a given amount of money. For example, if we have 11 cents, then we can make changes with one 10-cent coin and one 1-c…...

编程日记 2023/8/14 22:54:29

前言：

方法

1.通过id获取元素

2.通过标签名获取元素

3.通过类名class获取元素

获取body的方法

1.document.getElementsByTagName('body')[0]

2.document.body

相关代码

相关文章：