1.html和css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 450px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="变色" id="btn"/>
<div id="dv">
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<p>这是p</p>
<span>这是span</span>
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
2.js代码部分,让p标签的隔行变色
<script>
document.getElementById("dv").onclick=function(){
//获取标签对象
var a = document.getElementById("dv");
//获取标签对象中的所有子节点
var nodes = a.childNodes;
//for循环遍历所有节点
for(var i=0;i<nodes.length;i++){
//判断这个节点是不是p标签
if(nodes[i].nodeType==1&&nodes[i].nodeName=="p"){
nodes[i].style.backgroundColor = "red";
}
}
}
</script>