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

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

目录

前言:

方法

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中的元素对象

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

面试总结-webpack/git

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

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

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

ChatGPT Plus和ChatGPT对比

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

计算机网络 运输层 TCP连接建立、释放

三报文而不是两报文...

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…...

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

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

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

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

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

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

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

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

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

&#x1f407; &#x1f525;博客主页&#xff1a; 云曦 &#x1f4cb;系列专栏&#xff1a;数据结构 &#x1f4a8;吾生也有涯&#xff0c;而知也无涯 &#x1f49b; 感谢大家&#x1f44d;点赞 &#x1f60b;关注&#x1f4dd;评论 文章目录 前言一、栈&#x1f4d9;1.1 栈…...

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

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

Flutter:简单搞一个内容高亮

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

2023/08/10

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

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

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

Coin Change

一、题目 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链表OJ

&#x1f495;人面只今何处去&#xff0c;桃花依旧笑春风&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;详解链表OJ题 题目一&#xff1a;环形链表&#xff08;判断链表是否带环&#xff09; 题目描述&#xff1a; 画图分析&#xff1a; 代码实现&#x…...

大数据必回之LSM树

LSM树&#xff08;Log-Structured-Merge-Tree&#xff09;并不像B、红黑树一样是一颗严格的树状数据结构&#xff0c;它其实是一种存储结构&#xff0c;像HBase、RocksDB这些NoSQL存储都是采用LSM树。它是一种分层、有序、面向磁盘的数据结构&#xff0c;核心思想是顺序写性能远…...

Vue中的Object.defineProperty详解

Vue中的Object.defineProperty是一个比较重要的方法&#xff0c;它是可以定义对象中属性的一个方法&#xff0c;相比于在对象中直接定义的对象&#xff0c;它更具有灵活性。 直接定义对象中的属性是这样的&#xff1a; let person {name:张三,address:广东,age:12,} 而Object.…...

MySQL高阶知识点(一)一条SQL【更新】语句是如何执行的

一条SQL【更新】语句是如何执行的 首先&#xff0c;可以确定的说&#xff0c;【查询】语句的那一套流程&#xff0c;【更新】语句也是同样会走一遍&#xff0c;与查询流程不一样的是&#xff0c; 更新语句涉及到【事务】&#xff0c;就必须保证事务的四大特性&#xff1a;ACID&…...

如何在Windows、Linux和macOS上快速配置Ryujinx Switch模拟器:5个关键步骤提升游戏体验

如何在Windows、Linux和macOS上快速配置Ryujinx Switch模拟器&#xff1a;5个关键步骤提升游戏体验 【免费下载链接】Ryujinx 用 C# 编写的实验性 Nintendo Switch 模拟器 项目地址: https://gitcode.com/GitHub_Trending/ry/Ryujinx 想要在电脑上畅玩Switch游戏吗&…...

秒杀系统设计:十万QPS下的技术架构演进

在电商大促场景中&#xff0c;秒杀系统是典型的高并发、低库存业务模型&#xff0c;其核心挑战在于瞬时十万级QPS&#xff08;每秒查询率&#xff09;下的系统稳定性与数据一致性。对于软件测试从业者而言&#xff0c;这不仅涉及性能压测的极限挑战&#xff0c;更需关注架构演进…...

打卡信奥刷题(3084)用C++实现信奥题 P7091 数上的树

P7091 数上的树 题目背景 本题自动开启 O2 优化&#xff0c;时间限制 2s。 题目描述 您需要构造一棵二叉树&#xff0c;根节点权值为 nnn&#xff0c;每个节点都有 222 个或 000 个儿子&#xff0c;且满足如下限制&#xff1a; 若该点有两个儿子&#xff0c;该点权值需等于两个…...

使用C#代码在 Excel 中添加或设置批注格式

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...

4个效率倍增技巧:D3KeyHelper让暗黑3操作自动化更精准

4个效率倍增技巧&#xff1a;D3KeyHelper让暗黑3操作自动化更精准 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 在暗黑破坏神3的高难度游戏场景中&…...

GraalVM静态镜像内存成本失控?独家披露头部云厂商内部《GraalVM内存SLA白皮书》核心指标与阈值管控模型(限阅72小时)

第一章&#xff1a;GraalVM静态镜像内存成本失控的真相与行业警讯GraalVM 静态原生镜像&#xff08;Native Image&#xff09;曾被广泛视为 Java 微服务“秒级启动”与“极致资源压缩”的终极方案。然而&#xff0c;大量生产实践揭示了一个被长期低估的反直觉现象&#xff1a;静…...

2026 全新 Java 面试题汇总!!(含答案)

别再拿旧资料瞎准备了&#xff01;看看我们这份联合2025-2026届成功入职头部企业的12位准大厂人&#xff0c;深挖近3个月一线互联网、科技公司的真实面经反馈、核心考察重点&#xff0c;把大厂面试官的提问逻辑、评分标准、高频考点全拆解&#xff0c;耗时打磨出这份「最新大厂…...

AsrTools:免费语音转文字工具的全方位应用指南

AsrTools&#xff1a;免费语音转文字工具的全方位应用指南 【免费下载链接】AsrTools ✨ AsrTools: Smart Voice-to-Text Tool | Efficient Batch Processing | User-Friendly Interface | No GPU Required | Supports SRT/TXT Output | Turn your audio into accurate text in…...

Python爬虫入门零门槛!30分钟爬取软科中国大学排名,生成交互式可视化排名表

做Python入门学习的同学&#xff0c;是不是都想找一个反爬弱、代码清晰、爬下来有用、能快速看到成果的实战项目&#xff1f; 很多入门教程要么爬一些过时的、没用的静态页面&#xff0c;要么代码写得晦涩难懂&#xff0c;要么爬下来的数据只是打印在控制台&#xff0c;完全没有…...

使用Anaconda配置清华镜像源加速PyTorch安装

1. 为什么需要配置清华镜像源&#xff1f; 如果你在国内使用Anaconda安装PyTorch&#xff0c;可能会遇到下载速度慢、安装失败的问题。这主要是因为PyTorch的默认下载源位于国外服务器&#xff0c;网络传输距离远&#xff0c;再加上某些网络限制&#xff0c;导致下载速度很不理…...