摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用Css選擇器來(lái)選擇元素</title> </head> <body> <ul id="ul">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用Css選擇器來(lái)選擇元素</title>
</head>
<body>
<ul id="ul">
<li class="red">列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li class="green">列表項(xiàng)3</li>
<li class="green">列表項(xiàng)4</li>
<li class="coral large">列表項(xiàng)5</li>
</ul>
<script type="text/javascript">
// 選擇頁(yè)面元素最簡(jiǎn)單的方式就是用css選擇器:.red ->>class='red';
// 標(biāo)簽選擇器
let lists = document.querySelectorAll('li');
// console.log(lists)
lists[0].style.background = 'coral';
lists.item(1).style.background = 'skyblue';
// 該方法也可以在元素上調(diào)用
let ul = document.querySelector('#ul');// 返回滿足條件的第一個(gè)
// console.log(ul)
// 獲取當(dāng)前ul下的class為green的元素
let li = ul.querySelectorAll('.green');
// console.log(li)
for(let i=0;i<li.length;i++){
li[i].style.background = 'green'
}
// 獲取DOM元素的方法有以下集種
// 1、 通過(guò)ID 選擇 document.getElementById('id');// 獲取唯一id的元素
// 2、 通過(guò)標(biāo)簽選擇 document.getElementsByTagName('ul')[0];// 標(biāo)簽選擇器 返回集合
// 3、 通過(guò)name屬性獲取 docuemnt.getElementsByName('name')[0];// 返回集合
// 4、 通過(guò)Class選擇 document.getElementsByClassName('name')[0];// 返回集合
// 5、 通過(guò)css選擇器獲取 document.querySelectorAll('li');// 獲取所有l(wèi)i的元素 返回集合
// 獲取單個(gè): document.querySelector();// 返回單個(gè)元數(shù)據(jù)，等價(jià)于 document.querySelectorAll('li')[0];
// 其中操作屬性可以使用數(shù)組方式：
// li[0].style.background = 'red';
// li.item(0).style.background = 'red';
// li.red.style.background = 'green';
// li['red'].style.backgrond = 'skyblue'
</script>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-03-28 09:49:09
老師總結(jié)：獲取元素的方式很多, 有的返回的是一個(gè)類(lèi)數(shù)組, 有的返回的是一個(gè)集合, 要注意