点击操作---节点的方式---案例
案例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-11-29 06:19:14