JS获取DOM节点的N种方式_根据class获取dom-优快云博客

本文链接：https://blog.youkuaiyun.com/lwqBrell/article/details/100566731

本文详细介绍了JavaScript中获取DOM节点的六种方法：getElementById、getElementsByClassName、getElementsByName、getElementsByTagName、querySelector和querySelectorAll。分别通过ID、类名、名称、标签名来获取节点，特别指出querySelector的多功能性和querySelectorAll返回所有匹配节点的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>getElementsByClassName</title>
	</head>
	<body>
		<div class="sub">
			content1
		</div>
		<div class="sub">
			content2
		</div>
		<script type="text/javascript">
			var byclass = document.getElementsByClassName('sub');
			console.log(byclass);
		</script>
	</body>
</html>

打印结果

3 document.getElementsByName();

通过name来获取DOM节点，返回的是一个NodeList对象

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>getElementsByName</title>
	</head>
	<body>
		<input type="radio" name="book" id="" value="php" />
		<input type="radio" name="book" id="" value="java" />
		<input type="radio" name="book" id="" value="python" />
		<script type="text/javascript">
			var byname = document.getElementsByName('book');
			console.log(byname);
		</script>
	</body>
</html>

打印结果

4 document.getElementsByTagName();

通过tagName（标签名）来获取DOM节点，返回的是一个HTMLCollection对象

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>getElementsByTagName</title>
	</head>
	<body>
		<p>content1</p>
		<p>content2</p>
		<p>content3</p>
		<p>content4</p>
		<script type="text/javascript">
			var byTagName = document.getElementsByTagName('p');
			console.log(byTagName);
		</script>
	</body>
</html>

打印结果

5 document.querySelector();

querySelector()可以通过id来获取DOM节点，也可以通过class来获取DOM节点，还可以通过tagName（标签名）来获取DOM节点，它囊括了前面几种功能，实在是强大。

5.1 通过id获取

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>querySelector</title>
	</head>
	<body>
		<div id="main">
			content
		</div>
		<script type="text/javascript">
			var byQuery = document.querySelector('#main')
			console.log(byQuery);
		</script>
	</body>
</html>

5.2 通过class获取

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>querySelector</title>
	</head>
	<body>
		<div class="main">
			content
		</div>
		<script type="text/javascript">
			var byQuery = document.querySelector('.class')
			console.log(byQuery);
		</script>
	</body>
</html>

5.3 通过标签名获取

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>querySelector</title>
	</head>
	<body>
		<div>
			content
		</div>
		<script type="text/javascript">
			var byQuery = document.querySelector('div')
			console.log(byQuery);
		</script>
	</body>
</html>

6 document.querySelectorAll();

6.1 通过id获取

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>querySelectorAll</title>
	</head>
	<body>
		<div id="main">
			content1
		</div>
		<div id="main">
			content2
		</div>
		<script type="text/javascript">
			var byQuery = document.querySelectorAll('#main')
			console.log(byQuery);
		</script>
	</body>
</html>

打印结果

6.2 通过class获取

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>querySelectorAll</title>
	</head>
	<body>
		<div class="sub">
			content1
		</div>
		<div class="sub">
			content2
		</div>
		<script type="text/javascript">
			var byQuery = document.querySelectorAll('.sub')
			console.log(byQuery);
		</script>
	</body>
</html>

打印结果

6.3 通过标签名来获取

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>querySelectorAll</title>
	</head>
	<body>
		<div>
			content1
		</div>
		<div>
			content2
		</div>
		<script type="text/javascript">
			var byQuery = document.querySelectorAll('div')
			console.log(byQuery);
		</script>
	</body>
</html>

打印结果