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

最新推荐文章于 2024-09-26 01:42:12 发布

宇宙奇怪理论

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量101

点赞数

文章标签： javascript js html5

本文链接：https://blog.csdn.net/weixin_45946269/article/details/107410993

版权

1、通过id获取：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="ttt" class="z">
			<span>金</span><b>银</b>
		</div>
		<script>
			var element = document.getElementById("ttt");
			console.log(element);
		</script>
	</body>

</html>

2、通过class标签属性获取：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="ttt" class="z">
			<span>金</span><b>银</b>
		</div>
		<p class="z">铜</p>
		<p class="z">铜</p>
		<script>
			var elements = document.getElementsByClassName("z");
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
		</script>
	</body>

</html>

3、通过标签名获取：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="ttt" class="z">
			<span>金</span><b>银</b>
		</div>
		<p class="z">铜</p>
		<p class="z">铜</p>
		<script>
			var elements = document.getElementsByTagName("p");
			for(var i=0;i<elements.length;i++){
				console.log(elements[i]);
			}
		</script>
	</body>

</html>

4、通过name属性获取：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="ttt" class="z">
			<span>金</span><b>银</b>
		</div>
		<p class="z">铜</p>
		<p class="z">铜</p>
		<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>