根据css获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul id="ul">
			<li class="red">列表项01</li>
			<li>列表项02</li>
			<li class="green">列表项03</li>
			<li class="green">列表项04</li>
			<li class="yellow">列表项05</li>
		</ul>
	</body>
	
	<script>
		var lists = document.querySelectorAll('li');   //返回所有选择器匹配的元素，是一个数组
//		console.log(lists)
		lists[0].style.background = 'pink'
		lists.item(1).style.background = 'yellow'
		
		//querySelector(All)方法也可以在元素上调用
		var ul = document.querySelector('#ul')   //querySelector  返回匹配的以第一个元素
//		console.log(ul)

		var li = ul.querySelectorAll('.green')
//		console.log(li)
		for(var i=0;i<li.length;i++){
			li[i].style.background = 'green'
		}
		
		
	</script>
</html>
相关文章
