点击操作---节点的方式---案例
案例1：点击按钮,设置p变色---节点的方式做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid hotpink;
}
</style>
</head>
<body>
<input type="button" value="变色" id="btn" />
<div id="dv">
<p>锄禾日当午</p>
<p>汗滴禾下土</p>
<span>谁知盘中餐</span> <br />
<span>粒粒皆辛苦</span> <br />
<a href="#">唐诗宋词</a>
</div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
//先获取div
var dvObj = my$("dv");
//获取里面所有的子节点
var nodes = dvObj.childNodes;
//循环遍历所有的子节点
for (var i = 0; i < nodes.length; i++) {
//判断这个子节点是不是p标签, nodetype是1且nodename是大写的P
if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P") {
nodes[i].style.backgroundColor = "pink";
}
}
};
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/jane-panyiyun/p/11993895.html
时间： 2024-09-29 08:14:21