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

Posted jane_panyiyun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web API---DOM---点击操作---节点的方式---案例相关的知识，希望对你有一定的参考价值。

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

 

案例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---点击操作---节点的方式---案例的主要内容，如果未能解决你的问题，请参考以下文章

前端JS 4

javascript笔记6-DOM

JavaScriptJavaScript DOM 编程

JavaScritpt的DOM初探之Node

认识 DOM

JavaScript——Dom编程