如何获取HTML元素所对应的javascript对象？

最新推荐文章于 2022-07-01 17:01:16 发布

没羽毛的小鸟

最新推荐文章于 2022-07-01 17:01:16 发布

阅读量397

点赞数

分类专栏： javascript 文章标签： javascript对象

本文链接：https://blog.csdn.net/kjw888/article/details/98176443

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1.通过id获取（getElementById()）
2.通过那么获取（getElementsByName()）
3.通过标签名获取（getElementsByTagName()）
4.通过class标签属性获取（getElementsByClassName()）

1.通过id获取（getElementById()）

返回对拥有指定 id 的第一个对象的引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
	</head>
	<body>
		<input id="do" value="do"/>
		<input id="on" value="on"/>
		<script>
			var element = document.getElementById("do");//该语句不能写在id为do的语句的前面，否则先执行该语句此时还没有id为do的语句，输出为null
			console.log(element);//将id为do的语句内包含的内容全部输出
		</script>
	</body>
</html>

由于id是唯一的，故此时只能获取到一个element对象
在这里插入图片描述

2.通过那么获取（getElementsByName()）

返回带有指定名称的对象集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
	</head>
	<body>
		<input type="radio" name="sex" value="0"/>男
		<input type="radio" name="sex" value="1"/>女
		<script>
			var elements = document.getElementsByName("sex");//获取标签属性name为sex的所有标签及标签内的内容
			for(i=0;i<elements.length;i++){//由于name相同的可以有很多个，故获取到的是一个集合，用for循环遍历
				console.log(elements[i]);//i下标表示第几个元素
			}
		</script>
	</body>
</html>

由于name相同的可以有很多个，故获取到的是一个集合
在这里插入图片描述

3.通过标签名获取（getElementsByTagName()）

返回带有指定标签名的对象集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="radio" name="sex" value="0"/>男
		<input type="radio" name="sex" value="1"/>女
		<input type="button" value="按钮" />
		<script>
			var elements = document.getElementsByTagName("input");//获取标签名为input的所有标签及标签内的内容
			for(i=0;i<elements.length;i++){//由于标签名相同的可以有很多个，故获取到的是一个集合，用for循环遍历
				console.log(elements[i]);//i下标表示第几个元素
			}
		</script>
	</body>
</html>

由于标签名相同的可以有很多个，故获取到的是一个集合
在这里插入图片描述

4.通过class标签属性获取（getElementsByClassName()）

返回带有指定class标签属性的对象集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input class="a" type="radio" name="sex" value="0"/>男
		<input type="radio" name="sex" value="1"/>女
		<div class="a"></div>
		<script>
			var elements = document.getElementsByClassName("a");//获取class属性为a的所有标签及标签内的内容
			for(i=0;i<elements.length;i++){//由于Class标签属性值相同的可以有很多个，故获取到的是一个集合，用for循环遍历
				console.log(elements[i]);//i下标表示第几个元素
			}
		</script>
	</body>
</html>

在这里插入图片描述

没羽毛的小鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何获取HTML元素所对应的javascript对象？

文章目录一、获得DOM对象（doucument对象）1.通过id获取（getElementById()）2.通过那么获取（getElementsByName()）3.通过标签名获取（getElementsByTagName()）一、获得DOM对象（doucument对象）1.通过id获取（getElementById()）返回对拥有指定 id 的第一个对象的引用<!DOCTYPE h...
复制链接

扫一扫

专栏目录