正文
css选择器querySelectorAll
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
* querySelectorAll(css的选择器)
* 通过css的选择器获取到的一组元素
* 获取的也是类数组
*
* 主语
* document 从整个页面去获取一组元素
* 父级 从父级下去获取一组元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
{# #color>li:first-child{#}
{# background: #ff0000;#}
{# }#}
{# #}
{# #color>li:nth-child(4){#}
{# background: yellow;#}
{# }#}
</style>
<script>
window.onload=function(){
var lis=document.querySelectorAll('li'); console.dir(lis); var color=document.getElementById('color');
var lis1=color.querySelectorAll('li');
var lis2=document.querySelectorAll('#color li');
console.dir(lis1);
console.dir(lis2); var lis3=document.querySelectorAll('#color ul li');
console.dir(lis3);
lis3[lis3.length-1].style.background='gold'; var greens=document.querySelectorAll('.green');
console.dir(greens);
greens[0].style.background='green'; var uls=document.querySelectorAll('ul');
console.dir(uls);
uls[2].style.background='blue';
}
</script>
</head>
<body>
<ul id="color">
<li>red</li>
<li class="green">green</li>
<li>blue</li>
<li>yellow</li>
<li>
<ul>
<li>pink</li>
<li>white</li>
<li>black</li>
<li>gold</li>
</ul>
</li>
</ul>
<ul class="color2">
<li>red</li>
<li class="green">green</li>
<li>blue</li>
<li>yellow</li>
<li>pink</li>
</ul>
</body>
</html>
