JavaScript入门之如何获取HTML元素的JavaScript对象

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量95 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45949075/article/details/107410944
版权

通过标签的id获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="school" class="z">
			<span>郑州大学</span><i>郑州工业大学</i>
		</div>
		
		<p class="z">黄河水</p>
		<p class="z">黄河水</p>
		
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		
		<script>
			var element = document.getElementById("school");
			console.log(element);
		</script>
	</body>
</html>

结果：
在这里插入图片描述

通过标签的class属性获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="school" class="z">
			<span>郑州大学</span><i>郑州工业大学</i>
		</div>
		
		<p class="z">黄河水</p>
		<p class="z">黄河水</p>
		
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		
		<script>	
			var elements = document.getElementsByClassName("z")
			for (var i in elements) {//这种方式循环会在最后多输出一些内容
				console.log(elements[i]);
			}
			console.log("######################################")
			for (var i = 0; i < elements.length; i++) {//与上面的循环作对比
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

结果：
在这里插入图片描述

通过标签名来获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="school" class="z">
			<span>郑州大学</span><i>郑州工业大学</i>
		</div>
		
		<p class="z">黄河水</p>
		<p class="z">黄河水</p>
		
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		
		<script>
			elements = document.getElementsByTagName("p");
			for (var i = 0; i < elements.length; i++) {
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

结果：
在这里插入图片描述

通过标签中name属性来获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="school" class="z">
			<span>郑州大学</span><i>郑州工业大学</i>
		</div>
		
		<p class="z">黄河水</p>
		<p class="z">黄河水</p>
		
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		<input type="checkbox" name="hobby" />
		
		<script>
			var elements = document.getElementsByName("hobby");
			for (var i = 0; i < elements.length; i++) {
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

结果：
在这里插入图片描述

这个名字真难起
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
获取HTML元素对应的JavaScript对象
222222的博客
07-17 175
获取HTML元素的四种方式： 依据id 标签属性值：document.getElementById(); 依据class标签属性值：document.getElementsByClassName(); 依据name标签属性：document.getElementsByName(); 依据标签名字：document.getElementsByTagName(); <!DOCTYPE html> <html> <head> <meta charset="utf-8
JavaScript查找HTML元素
weixin_45846862的博客
01-04 229
通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事： 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 html标签和元素的区别 html元素：元素是标签中包含了文本、内容…的一个整体。比如：< p >我是p标签< /p> httml标签：标签不必多说吧，比如< h1...
JavaScript学习之DOM入门（获取元素、document对象）
星河梦~的博客
06-18 942
目录前言什么是DOM？获取文档中的元素根据id获取根据标签名获取根据name获取根据class获取根据选择器获取document对象属性 前言 先来看一下JavaScript的组成部分： 本文针对DOM进行学习了解。 什么是DOM？ DOM(Document Object Model):文档对象模型，是w3c制定的一套针对HTML和XML的标准的编程接口 把HTML文档处理成树形结构(倒立的树)，将一个html文档看作是一棵树，文档中的标签、标签的属性、标签的内容都是这课树的节点。 强调：DOM的最顶端
HTML+CSS+JavaScript入门教程（万字）
lsl5713的博客
11-24 9478
HTML是一门语言，所有的网页都是用HTML这门语言编写出来的HTML（HyperText Markup Language）:超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容标记语言：由标签构成的语言HTML运行在浏览器上，HTML标签由浏览器来解析HTML标签都是预定义好的。例如：使用展示图片W3C标准：网页主要由三部分组成HTMLCSSJavaScipt。
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7260
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
JavaScript入门教程(10) 认识其他对象
10-30
通过理解和熟练运用这些JavaScript对象，开发者能够更精确地控制HTML元素的行为，创建出更富交互性的网页。无论是处理链接、表单提交还是与Java小程序和插件的交互，JavaScript都提供了强大的工具来实现这些功能。在...
javascript入门·对象属性方法大总结
10-30
本篇文章将对JavaScript入门中的对象属性方法进行大总结，帮助初学者巩固基础。 首先，我们来看JavaScript中的数组（Array）。数组是一种有序的元素集合，可以通过索引来访问每个元素。其中，`length`属性可获取...
JavaScript入门
03-04
JavaScript是一种广泛..."JavaScript入门"这个主题覆盖了这些基础，从零开始带你走进JavaScript的世界。在"JavaScript-Beginner-main"这个压缩包文件中，可能包含了相关的教程、练习案例或项目，帮助你巩固这些知识。
HTML+CSS+JavaScript+AJAX+JQuery入门.rar
03-21
CSS（Cascading Style Sheets）用于控制网页的布局和样式，使得HTML元素呈现不同的视觉效果。CSS3引入了更多的选择器、动画、过渡和新的布局模型，如Flexbox和Grid，让页面设计更加灵活和响应式。 JavaScript是一种...
javascript入门之window对象【新手必看】
11-28
1. **document对象**：代表整个HTML文档，提供了操作DOM（文档对象模型）的方法，如获取元素、修改HTML内容等。 2. **frames对象**：如果页面有多个框架，这个对象可以用来访问这些框架。 3. **history对象**：允许...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 166
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 85
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 872
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
前端javascript中的排序算法之插入排序
峰会路转的博客
07-09 179
【代码】前端javascript中的排序算法之插入排序。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 196
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue3 + element-plus 表格行内编辑，如何实现表单校验？
yyXieDaiMa的博客
07-09 373
使用el-form表单自身的校验功能：通过el-from绑定对应表格行的prop， 实现校验。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 84
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 303
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 127
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值