如何获取HTML元素对应JavaScript对象

最新推荐文章于 2024-04-16 18:09:03 发布

QBjie

最新推荐文章于 2024-04-16 18:09:03 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/QBjie/article/details/107410981

版权

四种方法：

1.通过id获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="ch">
			<span>长城</span><b>故宫</b>
		</div>
		<p class="zh">黄河</p>
		<p class="zh">黄河</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("ch");/*获取id为"ch"的元素对应的JavaScript对象*/
			console.log(element);
		</script>
	</body>
</html>

2.通过class名获取：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="ch">
			<span>长城</span><b>故宫</b>
		</div>
		<p class="zh">黄河</p>
		<p class="zh">黄河</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("zh");
			for (var i in elements) {
				console.log(elements[i]);/*由于class名可以有多个，则可以用数组遍历，（加强for循环）*/
			}
		</script>
	</body>
</html>

3.通过标签名获取：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="ch">
			<span>长城</span><b>故宫</b>
		</div>
		<p class="zh">黄河</p>
		<p class="zh">黄河</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 in elements) {
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

4.通过name值获取：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="ch">
			<span>长城</span><b>故宫</b>
		</div>
		<p class="zh">黄河</p>
		<p class="zh">黄河</p>
		
		<input type = "checkbox" name="hobby"/><input type = "checkbox" name="hobby"/><input type = "checkbox" name="hobby"/><input type = "checkbox" name="hobby"/>
		<script>
			elements = document.getElementsByName("hobby");
			for (var i in elements) {
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

QBjie

关注

0
点赞
踩
0

收藏

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

四种方法：1.通过id获取<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="ch"> <span>长城</span><b>故宫</b> </div> <p cl
复制链接

扫一扫