用获取节点的方式实现点击按钮改变标签背景颜色的问题

跟着视频敲的,视频里的能实现,我的不行,有onclick事件,但是背景色不变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击设置p标签背景色</title>
    <style>
        div {
            width: 200px;
            height: 400px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="变色" id="btn">
<div id="dv">
    <br>
    <span>这是一个span</span>
    <p>这是一个p</p>
    <span>这是一个span</span>
    <p>这是一个p</p>
    <span>这是一个span</span>
    <p>这是一个p</p>
    <a href="www.bing.com">这是一个a</a>
</div>
<script src="../common.js"></script>
<script>
    my$("btn").onclick = function () {
        //获取div
 var dvObj = my$("dv");
        //console.log(dvObj);
        //获取div下所有的子节点
 var nodes = dvObj.childNodes;
        console.log(nodes.length);
        //循环遍历所有的子节点
 for (var i = 0; i < nodes.length; i++) {
            //判断这个子节点是不是p标签
 if (nodes[i].nodeType == 1 && nodes[i].nodeName == "p") {
                nodes[i].style.backgroundColor = "red";
            }
        }
    }
</script>
</body>
</html>

在敲nodes.length的时候webstrom提示的length是被划掉的,是不能用length嘛

简单简同学

浏览 1232回答 1

1回答

聪明的汤姆

if判断条件中，把p改为大写，因为你获取的nodeName都是大写的if (nodes[i].nodeType == 1 && nodes[i].nodeName == "P")或者转小写再判断if (nodes[i].nodeType == 1 && nodes[i].nodeName.toLowerCase() == "p")望采纳!ps：遇到什么问题，自己先在浏览器调试，比如这里你可以在for里面输出所有子节点的nodeType和nodeName

1 0

随时随地看视频慕课网APP