js 根据id获取标签内某个标签,js获取id对应的组件

阳阳2013哈哈

于 2023-12-07 19:28:30 发布

阅读量465

点赞数

文章标签：前端 javascript html 人工智能

本文链接：https://blog.csdn.net/mynote/article/details/134863081

版权

大家好，给大家分享一下js 根据id获取标签内某个标签，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！

在使用Java的过程中我们经常都需要获取元素，接下来就给大家介绍一下我知道的在js中获取元素的五种方法。

1.根据选择器查找元素

1.1 document.querySelector();

返回文档中匹配指定的选择器组的第一个元素

1.2 document.querySelectorAll();

返回文档中匹配指定的选择器组的所有元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c1"></div>
	</body>
	< type="text/java">
		var div=document.querySelector(".c1");
		var div1=document.querySelectorAll(".c1");
		console.log(div);
		console.log(div1);
	</>
</html>

运行效果如下

这个方法功能强大，简单又好用Python中的所有运算符号。

2.document.getElementById();

通过id获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1"></div>
	</body>
	< type="text/java">
		var div=document.getElementById("d1");
		var div1=document.getElementById("d2");
		console.log(div);
		console.log(div1);
	</>
</html>

获取到元素则返回该元素，如果页面上没有你所获取的id（例如上面代码中的div1），则返回null，以上代码运行效果如下

3.document.getElementsByTagName（）

通过标签名获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div name="d1"></div>
		<div name="d2"></div>
	</body>
	< type="text/java">
		var div=document.getElementsByTagName("div");
		var div1=document.getElementsByTagName("p");
		console.log(div);
		console.log(div1);
	</>
</html>

运行效果如下

因为通过getElementByTagName获取到的是一个伪数组，所以页面上没有对应标签的时候返回0

4.document.getElementsByName()

通过name属性获取元素

这个方法不推荐使用，因为在IE和欧朋浏览器中，通过这个方式会获取到相同的id的元素

5.document.getElementsByClassName()

通过class属性获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c1"></div>
		<div class="c2"></div>
	</body>
	< type="text/java">
		var div=document.getElementsByClassName("c1");
		var div1=document.getElementsByClassName("c2");
		console.log(div);
		console.log(div1);
	</>
</html>

运行效果如下