js中document节点获取页面元素的六种方式

不甜呐

于 2021-05-16 12:30:46 发布

阅读量9.8k

点赞数 5

分类专栏： JavaScript 文章标签：前端 javascript js

@不甜呐

本文链接：https://blog.csdn.net/weixin_55992854/article/details/116887603

版权

JavaScript 专栏收录该内容

24 篇文章 5 订阅

订阅专栏

1.querySelector()方法

描述：本方法用于根据给定的选择器选中页面元素

如果有多个元素满足条件，则返回第一个满足条件的元素节点

语法：document.querySelector('选择器名');

注意：如果查找失败，返回null

2.querySelectorAll()方法

描述：本方法用于根据给定的选择器选中页面元素

如果有多个元素满足条件，则返回这些元素构成的集合

语法：document.querySelectorAll('选择器名');

注意：

(1)返回的结果是一个节点列表，不是数组，但能够像使用数组一样使用列表

(2)如果查找失败，返回一个空的节点列表(.length==0)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document节点获取页面元素</title>
	</head>
	<body>
		<div id="div">我是第一个div</div>
		<div class="div">我是第二个div</div>
		<div>我是第三个div</div>
		<p>我是p标签</p>
		<h2>我是h2标签</h2>
		<button name="aaa">我是button</button>
	</body>
	<script type="text/javascript">
		var div = document.querySelector('#div');
		console.log(div); //<div class="div">我是第二个div</div>
		
		var div = document.querySelector('div');
		console.log(div); //<div id="div">我是第一个div</div>
		
		var divList = document.querySelectorAll('div');
		console.log(divList); //NodeList(3) [div#div, div.div, div]
		console.log(divList[1]); //<div class="div">我是第二个div</div>
		console.log(divList.length); //3	
	</script>
</html>

3.getElementById()方法

描述：根据指定的id名选中页面元素

如果存在多个指定满足条件元素，则返回第一个元素节点

语法：document.getElementById('id名');

注意：如果查找失败，返回null

4.getElementsByClassName()方法

描述：根据指定的类名选中页面中所有满足条件的元素

语法：document.getElementsByClassName('类名');

注意：返回结果是一个有顺序的节点列表，可以通过索引来访问列表中的元素(索引从0开始)

5.getElementsByTagName()方法

描述：根据指定的标签名选中页面中所有满足条件的元素

语法：document.getElementsByTagName('标签名');

注意：如果参数值为'*',则返回文档中的所有元素

6.getElementsByName()方法

描述：根据指定的name值选中页面中所有满足条件的元素

语法：document.getElementsByName('name属性');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document节点获取页面元素</title>
	</head>
	<body>
		<div id="div">我是第一个div</div>
		<div class="div">我是第二个div</div>
		<div>我是第三个div</div>
		<p>我是p标签</p>
		<h2>我是h2标签</h2>
		<button name="aaa">我是button</button>
	</body>
	<script type="text/javascript">
		var a = document.getElementById('div');
		console.log(a); //<div id="div">我是第一个div</div>
		
		var b = document.getElementsByClassName('div');
		console.log(b); //HTMLCollection [div.div]
		
		var c = document.getElementsByTagName('p');
		console.log(c); //HTMLCollection [p]
		
		var d = document.getElementsByName('aaa');
		console.log(d); //NodeList [button]		
	</script>
</html>

不甜呐

关注

5
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
js中document节点获取页面元素的六种方式

1.querySelector()方法描述：本方法用于根据给定的选择器选中页面元素如果有多个元素满足条件，则返回第一个满足条件的元素节点语法：document.querySelector('选择器名');注意：如果查找失败，返回null2.querySelectAll()方法描述：本方法用于根据给定的选择器选中页面元素如果有多个元素满足条件，则返回这些元素构成的集合语法：document.querySelectAll('选择器名')...
复制链接

扫一扫