码迷,mamicode.com
首页 > Windows程序 > 详细

Web API---DOM---点击操作---节点的方式---案例

时间:2019-12-06 11:26:00      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:style   des   function   meta   web api   ==   ack   子节点   btn   

点击操作---节点的方式---案例

 

案例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>

 

 

 

Web API---DOM---点击操作---节点的方式---案例

标签:style   des   function   meta   web api   ==   ack   子节点   btn   

原文地址:https://www.cnblogs.com/jane-panyiyun/p/11993895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!