博客列表 >HTML DOM querySelector() 方法和 querySelectorAll() 方法

HTML DOM querySelector() 方法和 querySelectorAll() 方法

yestrue的博客
yestrue的博客原创
2017年12月20日 01:29:57676浏览
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom选择器</title>
<style>
ul,ol{
width: 300px;
}
</style>
</head>
<body>
<h3>中学生课程</h3>
<ul>
<li>语文</li>
<li>英语</li>
<li>数学</li>
<li>历史</li>
</ul>
<h3>水果种类</h3>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
<li>橘子</li>
</ol>
<script>
var task = document.querySelector('li');
task.style.backgroundColor = 'skyblue';
var fruit = document.querySelector('ol');
var list = fruit.querySelectorAll('li');
for(var i=0;i<list.length;i++){
list[i].style.backgroundColor = 'pink';
}
</script>
</body>
</html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议