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

最新推荐文章于 2023-08-09 20:15:20 发布

one day one day

最新推荐文章于 2023-08-09 20:15:20 发布

阅读量877

点赞数

分类专栏： JavaScript 前端

本文链接：https://blog.csdn.net/weixin_42867975/article/details/98048553

版权

前端同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

获取HTML元素所对应的javascript对象

一、getElementById()：返回对拥有指定 id 的第一个对象的引用，id是唯一的，因此返回是单个的

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div>
		<div id="footer"><input class="a"  type="button" value="按钮" onclick="test();"></div>
		<input class="a"  type="checkbox" name="hobby" value="0" /> 足球
		<input type="checkbox" name="hobby" value="1" /> 乒乓球
		<input type="checkbox" name="hobby" value="2" /> 篮球
		<script>
			var element = document.getElementById("header");//获得id=header的标签的HTML元素
			console.log(element);
		</script>
	</body>
</html>

运行结果：确实得到了id=header的标签的HTML元素

二、getElementsByTagName():返回带有指定标签名的对象集合

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div>
		<div id="footer"><input class="a"  type="button" value="按钮" onclick="test();"></div>
		<input class="a"  type="checkbox" name="hobby" value="0" /> 足球
		<input type="checkbox" name="hobby" value="1" /> 乒乓球
		<input type="checkbox" name="hobby" value="2" /> 篮球
		<script>
			var elements = document.getElementsByTagName("div")//通过标签名获取HTML元素，是多个，因此elements是返回带有指定标签名的对象集合
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
			
		</script>
	</body>
</html>

运行结果：确实得到了标签名为div的HTML元素

三、getElementByName():返回带有指定名称的对象集合，可以用来获取单选框和复选框HTML元素

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div>
		<div id="footer"><input class="a"  type="button" value="按钮" onclick="test();"></div>
		<input class="a"  type="checkbox" name="hobby" value="0" /> 足球
		<input type="checkbox" name="hobby" value="1" /> 乒乓球
		<input type="checkbox" name="hobby" value="2" /> 篮球
		<script>
			var elements = document.getElementsByName("hobby")
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
			
		</script>
	</body>
</html>

运行结果：得到了所有name=hobby的元素

四、getElementByClassName():返回带有指定class的对象集合

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="a" id="header"><input type="button" value="按钮" onclick="test();"></div>
		<div id="footer"><input class="a"  type="button" value="按钮" onclick="test();"></div>
		<input class="a"  type="checkbox" name="hobby" value="0" /> 足球
		<input type="checkbox" name="hobby" value="1" /> 乒乓球
		<input type="checkbox" name="hobby" value="2" /> 篮球
		<script>
			var elements = document.getElementsByClassName("a")
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
			
		</script>
	</body>
</html>

运行结果

one day one day

关注

0
点赞
踩
0

收藏

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

获取HTML元素所对应的javascript对象一、getElementById()：返回对拥有指定 id 的第一个对象的引用，id是唯一的，因此返回是单个的实例<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &...
复制链接

扫一扫