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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/36594.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学生成绩管理系统V1.0

某班有最多不超过30人&#xff08;具体人数由键盘输入&#xff09;参加某门课程的考试&#xff0c;用一维数组作函数参数编程实现如下学生成绩管理&#xff1a; &#xff08;1&#xff09;录入每个学生的学号和考试成绩&#xff1b; &#xff08;2&#xff09;计算课程的总分…

Vue [Day7]

文章目录 自定义创建项目ESlint 代码规范vuex 概述创建仓库向仓库提供数据使用仓库中的数据通过store直接访问通过辅助函数 mapState&#xff08;简化&#xff09;mutations传参语法(同步实时输入&#xff0c;实时更新辅助函数 mapMutationsaction &#xff08;异步辅助函数map…

IntelliJ IDEA 2021/2022关闭双击shift全局搜索

我这里演示的是修改&#xff0c;删除是右键的时候选择Remove就好了 IDEA左上角 File-->Settings 找到Navigate -->Search Everywhere &#xff0c;右键添加快捷键。 OK --> Apply应用

C语言学习之const关键字的使用

const修饰变量&#xff1a;const关键字修饰变量时&#xff0c;该变量表示是一个只读变量&#xff0c;不能通过变量名修改变量的值&#xff1b;案例&#xff1a; const int m 20; int const n 30; m 30;//不可以赋值&#xff0c;因为m是只读变量 n 20;//不可以赋值&#xf…

初始多线程

目录 认识线程 线程是什么&#xff1a; 线程与进程的区别 Java中的线程和操作系统线程的关系 创建线程 继承Thread类 实现Runnable接口 其他变形 Thread类及其常见方法 Thread的常见构造方法 Thread类的几个常见属性 Thread类常用的方法 启动一个线程-start() 中断…

前端食堂技术周刊第 93 期:7 月登陆 Web 平台的新功能、Node.js 工具箱、Nuxt3 开发技巧、MF 重构方案

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;橙橙冰萃美式 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 大家好&#xff0c;我是童欧巴。欢迎来到前端食堂技术周刊&#xff0c;我们先来…

Android多屏幕支持-Android12

Android多屏幕支持-Android12 1、概览及相关文章2、屏幕窗口配置2.1 配置xml文件2.2 DisplayInfo#uniqueId 屏幕标识2.3 adb查看信息 3、配置文件解析3.1 xml字段读取3.2 简要时序图 4、每屏幕焦点 android12-release 1、概览及相关文章 AOSP > 文档 > 心主题 > 多屏…

如何利用DeepBook自动做市商(AMM),发挥应用的最大价值

尽管Sui宣布DeepBook作为其首个本地流动性层&#xff0c;即中央限价单簿&#xff08;Central Limit Order Book&#xff0c;CLOB&#xff09;&#xff0c;但自动做市商&#xff08;Automated Market Maker&#xff0c;AMM&#xff09;平台也可以在Sui上发挥作用。事实上&#x…

理解jvm之对象已死怎么判断?

目录 引用计数算法 什么是引用 可达性分析算法&#xff08;用的最多的&#xff09; 引用计数算法 定义&#xff1a;在对象中添加一个引用计数器&#xff0c;每当有一个地方引用它时&#xff0c;计数器值就加一&#xff1b;当引用失效时&#xff0c;计数器值就减一&#xff1…

文件批量改名高手:轻松删除文件名,仅保留编号!

您是否经常需要对大量文件进行命名调整&#xff1f;是否为繁琐的手动操作而感到厌烦&#xff1f;现在&#xff0c;我们的智能批量文件改名工具为您提供了一种简单而高效的解决方案&#xff01;只需几步操作&#xff0c;您就能轻松删除原有的文件名&#xff0c;仅保留编号&#…

YOLO相关原理(文件结构、视频检测等)

超参数进化(hyperparameter evolution) 超参数进化是一种使用了genetic algorithm&#xff08;GA&#xff09;遗传算法进行超参数优化的一种方法。 YOLOv5的文件结构 images文件夹内的文件和labels中的文件存在一一对应关系 激活函数&#xff1a;非线性处理单元 activation f…

c#学习路线

文章目录 .net coreN层架构大项目实战高性能互联网项目架构c#高级编程各种主流框架分布式通信SSO单点登录+权限管理系统实战N层架构WEB安全ASP.NET MVCNoSQLORM框架c#6和c#7新语法VS插件分享项目管理三层项目实战三层架构ASP.NET基础数据库和ASP.NETADO.NET计算机基础计算机硬件…

C# 11 中的新增功能

本文内容 泛型属性泛型数学支持数值 IntPtr 和 UIntPtr字符串内插中的换行符 显示另外 11 个 C# 11 中增加了以下功能&#xff1a; 原始字符串字面量泛型数学支持泛型属性UTF-8 字符串字面量字符串内插表达式中的换行符列表模式文件本地类型必需的成员自动默认结构常量 str…

【设计模式】MVC 模式

MVC 模式代表 Model-View-Controller&#xff08;模型-视图-控制器&#xff09; 模式。这种模式用于应用程序的分层开发。 Model&#xff08;模型&#xff09; - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑&#xff0c;在数据变化时更新控制器。View&#xff…

Linux6.37 Kubernetes 集群调度

文章目录 计算机系统5G云计算第三章 LINUX Kubernetes 集群调度一、调度约束1.调度过程2.指定调度节点3.亲和性1&#xff09;节点亲和性2&#xff09;Pod 亲和性3&#xff09;键值运算关系 4.污点(Taint) 和 容忍(Tolerations)1&#xff09;污点(Taint)2&#xff09;容忍(Toler…

centos搭建k8s

centos搭建k8s环境_centos k8s_进击的Coders的博客-CSDN博客

VSCODE[配置ssh免密远程登录]

配置ssh免密远程登录 本文摘录于&#xff1a;https://blog.csdn.net/qq_44571245/article/details/123031276只是做学习备份之用&#xff0c;绝无抄袭之意&#xff0c;有疑惑请联系本人&#xff01; 这里要注意如下几个地方: 1.要进入.ssh目录创建文件: 2.是拷贝带"ssh-…

微服务系列文章之 Springboot+Vue实现登录注册

一、springBoot 创建springBoot项目 分为三个包&#xff0c;分别为controller&#xff0c;service&#xff0c; dao以及resource目录下的xml文件。 UserController.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 …

如何利用 EMC 模型解决能源服务提供商的瓶颈

01. 什么是合同能源管理&#xff1f; 合同能源管理(EMC-Energy Management Contract) 是一种新型的市场化节能机制,其实质就是以减少的能源费用来支付节能项目全部成本的节能投资方式。&#xff1a;节能服务公司与用能单位以契约形式约定节能项目的节能目标&#xff0c;节能服…

(二)Node.js 基础模块

&#xff08;二&#xff09;Node.js 基础模块 1. fs文件系统模块1.1 什么是fs文件系统模块1.2 读取指定文件中的内容1. fs.readFile()的语法格式2. fs.readFile()的示例代码 1.3 向指定的文件中写入内容1. fs.writeFile()的语法格式2. fs.writeFile()的实例代码 1.4 __dirname …