dom通过css选择器案例

Original 2018-11-28 17:02:25 292
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通过css选择器获取元素</title> </head> <body> <ul id="ul"> &l
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过css选择器获取元素</title>
</head>
<body>
<ul id="ul">
<li>列表项1</li>
<li class="">列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li class=" coral large">列表项5</li>
</ul>
<script type="text/javascript">
let lists =document.querySelectorAll('li');//返回满足条件的所有
console.log(lists);
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor ='lightgreen';

let ul = document.querySelector('#ul');//返回满足条件的第一个
console.log(ul);

let li =ul.querySelectorAll('.green');
console.log(li);
for(let i =0;i<li.length;i++){
li[i].style.backgroundColor = 'green';
}
</script>
</body>
</html>

document.querySelectorAll()返回所有,document.querySelector()返回第一一个

Correcting teacher:天蓬老师Correction time:2018-11-28 17:39:47
Teacher's summary:querySelector() 以及 querySelectorAll(), 这是jQuery获取元素的最主要的方式, 现代的js引擎,都会实现这二个功能

Release Notes

Popular Entries