JS获取DOM节点的N种方式

 目录

1 document.getElementById()

2 document.getElementsByClassName();

3 document.getElementsByName();

4 document.getElementsByTagName();

5 document.querySelector();

6 document.querySelectorAll(); 

 

---

 

1 document.getElementById()

通过id来获取DOM节点，返回的是一个HTML的节点信息

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

打印结果

2 document.getElementsByClassName();

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

<!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>

打印结果

 

注：querySelector()和querySelectorAll()的使用很相识，这里有一点需要注意的是

       querySelector()只获取第一个查询到的DOM节点，而querySelectorAll()获取所有

       查询到的DOM节点，并且返回一个Nodelist对象