使用css选择器来获取元素

abstract：<!DOCTYPE html> <html> <head> <title>使用css选择器来获取元素</title> </head> <body> <ul id="ul"> <li class="red">选项01&l

<!DOCTYPE html>
<html>
<head>
	<title>使用css选择器来获取元素</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="coral large">选项05</li>
</ul>
</body>
</html>
<script type="text/javascript">
	// 选择页面元素最简单的方式就是用css选择器: .red --> class="red"
	let lists = document.querySelectorAll('li'); // 根据标签选择器:li 来获取
	console.log(lists); // 返回一个节点数组 可以用键值选择[1] .item(1)
	lists[0].style.background = 'coral';
	lists.item(1).style.background = 'blue';

	// 该方法也可以子元素上调用
	let ul = document.querySelector('#ul'); // 返回满足条件的第一个 返回元素
	console.log(ul);
	// 等效语句
	// let ul1 = document.querySelectorAll('#ul')[0];
	// console.log(ul1);
	let li = ul.querySelectorAll('.green'); // 返回节点数组
	console.log(li);
	for(let i=0;i<li.length;i++){
		li[i].style.background = 'green';
	}
</script>

Correcting teacher：天蓬老师Correction time：2019-03-02 15:42:20
Teacher's summary：class是样式中, 用得最多的一个属性, 它的用途远比id要大得多, 能用class, 就尽可能不用id

使用css选择器来获取元素

Popular Entries