1. 程式人生 > >原生JS獲取含有自定義屬性的元素節點

原生JS獲取含有自定義屬性的元素節點

jQuery有data()方法可以獲取到自定義的元素節點,而原生JS獲取則要用到querySelector以及querySelectorAll這兩個方法。

用程式碼寫一下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>js獲取自定義屬性的元素</title>
	</head>
	<body>
		<div data-id='123'>123</div>
		<div data-id='123'>456</div>
		<div data-id='123'>789</div>
		<div data-id='123'>1000</div>
	</body>
</html>
<script type="text/javascript">
	
	//querySelector只能獲取到第一個匹配的元素
	let ele=document.querySelector('[data-id="123"]');
	console.log(ele.length);
	console.log(ele.innerHTML);
	
	//querySelectorAll可以獲取到多個匹配的值,如果只有一個,可以通過下標[0]來取值
	let elelist = document.querySelectorAll('[data-id="123"]');
	console.log(elelist.length);
	console.log(elelist[0].innerHTML);
	console.log(elelist[1].innerHTML);
	console.log(elelist[2].innerHTML);
	console.log(elelist[3].innerHTML);
	
</script>