HTML中详述获取元素对应JavaScript对象的四种方法

最新推荐文章于 2023-06-14 21:38:19 发布

zzu957

最新推荐文章于 2023-06-14 21:38:19 发布

阅读量184

点赞数

分类专栏： HTML学习文章标签： javascript js

本文链接：https://blog.csdn.net/zzu957/article/details/107410995

版权

HTML学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

元素与标签：

标签：指用一对<>括起来的标签的总称。
元素：指从开始标签到结束标签的所有代码，元素包含内容多于标签。

方法：

getElementById（）方法
作用：获取id为指定内容的所有元素。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="a" class="b">
			<span>郑州大学</span><p>河南大学</p>
		</div>
		
		<script>
			var element = document.getElementById("a");
			console.log(element);
		</script>
	</body>
</html>

结果显示：
在这里插入图片描述
getElementsByClassName（）方法
作用：获取类名为指定内容的所有元素。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="a" class="b">
			<span>郑州大学</span><p>河南大学</p>
		</div>
		
		<span class="b">醉后不知天在水</span>
		<span class="b">满船清梦压星河</span>

		<script>
			var elements = document.getElementsByClassName("b");
			for (var i=0;i<elements.length;i++) {
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

结果展示：
在这里插入图片描述
getElementsByTagName（）方法
作用：获取标签为指定内容的所有元素。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="a" class="b">
			<span>郑州大学</span><p>河南大学</p>
		</div>
		
		<span class="b">醉后不知天在水</span>
		<span class="b">满船清梦压星河</span>
		
		<script>
			<!---->
			var elements = document.getElementsByTagName("span");
			for (var i=0;i<elements.length;i++) {
				console.log(elements[i]);
			}
		</script>
	</body>
</html>

结果展示：
在这里插入图片描述
getElementsByName（）方法
作用：获取name属性为指定内容的所有元素。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="a" class="b">
			<span>郑州大学</span><p>河南大学</p>
		</div>
		
		<span class="b">醉后不知天在水</span>
		<span class="b">满船清梦压星河</span>
		
		<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>

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

zzu957

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中详述获取元素对应JavaScript对象的四种方法

元素与标签：标签：指用一对<>括起来的标签的总称。元素：指从开始标签到结束标签的所有代码，元素包含内容多于标签。方法：getElementById（）方法作用：获取id为指定内容的所有元素。代码示例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> &l
复制链接

扫一扫