JS---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>

 

案例2：节点操作隔行变色

（写错一个字母查找bug花了好久时间，.nodes[i].nodeName 多了个s）

<body>
  <ul id="uu">
    <li>爆炒</li>
    <li>油炸</li>
    <li>清蒸</li>
    <li>红烧</li>
    <li>烧烤</li>
    <li>糖醋</li>
    <li>凉拌</li>
    <li>鱼香</li>
  </ul>
  <input type="button" value="隔行变色" id="btn" />

  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      //获取ul中所有的子节点
      var count = 0; //记录有多少li
      var nodes = my$("uu").childNodes;
      for (var i = 0; i < nodes.length; i++) {
        //判断这个节点是不是li标签
        if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") {
          nodes[i].style.backgroundColor = count % 2 == 0 ? "pink" : "yellow";
          count++;
        }
      }
    };

  </script>
</body>

 

 案例3：封装节点兼容代码

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>
<body>
<ul id="uu">
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
  <li>第五个</li>
</ul>
<script src="common.js"></script>
<script>
  
  //获取任意一个父级元素的第一个子级元素
  function getFirstElementChild(element) {
    if(element.firstElementChild){//true--->支持
      return element.firstElementChild;
    }else{
      var node=element.firstChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.nextSibling;
      }
      return node;
    }
  }
  //获取任意一个父级元素的最后一个子级元素
  function getLastElementChild(element) {
    if(element.lastElementChild){//true--->支持
      return element.lastElementChild;
    }else{
      var node=element.lastChild;//第一个节点
      while (node&&node.nodeType!=1){
        node=node.previousSibling;
      }
      return node;
    }
  }

  console.log(getFirstElementChild(my$("uu")).innerText);
  console.log(getLastElementChild(my$("uu")).innerText);

  //最后一个节点和最后一个元素的获取的代码在IE8中可能不支持
  //前一个节点和前一个元素的获取的代码在IE8中可能不支持
  //后一个节点和后一个元素的获取的代码在IE8中可能不支持

  //学习节点操作还是为了操作元素

</script>
</body>
</html>

 

案例4：切换背景图片

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>哈哈,我又变帅了</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    body {
      background-image: url("images/1.jpg");
    }

    #mask {
      background-color: rgba(255, 255, 255, 0.3);
      height: 200px;
      text-align: center;
    }

    #mask img {
      width: 200px;
      margin-top: 35px;
      cursor: pointer;
    }
  </style>

</head>

<body id="bd">
  <div id="mask">
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
  </div>
  <script src="common.js"></script>
  <script>
    //获取的所有的子元素
    var imgObjs = my$("mask").children;
    for (var i = 0; i < imgObjs.length; i++) {
      //循环遍历所有img,注册点击事件
      imgObjs[i].onclick = function () {
        document.body.style.backgroundImage = "url(" + this.src + ")";
      };
    }

  </script>
</body>

</html>

 

案例5：

1. 全选的时候，复选框里面状态和全选一致

2. 复选的时候，循环复选框，有一个不选中全选就flase

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }

    td {
      font: 14px "微软雅黑";
    }

    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="j_cbAll" />
          </th>
          <th>菜名</th>
          <th>饭店</th>
        </tr>
      </thead>
      <tbody id="j_tb">
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>红烧肉</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>西红柿鸡蛋</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>油炸榴莲</td>
          <td>田老师</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>清蒸助教</td>
          <td>田老师</td>
        </tr>

      </tbody>
    </table>
  </div>
  <script src="common.js"></script>
  <script>
    //获取全选的这个复选框
    var ckAll = my$("j_cbAll");
    //获取tbody中所有的小复选框
    var ckSmall = my$("j_tb").getElementsByTagName("input");
    //点击全选的这个复选框, 获取他当前的状态, 然后设置tbody中所有复选框的状态
    ckAll.onclick = function () {
      for (var i = 0; i < ckSmall.length; i++) {
        ckSmall[i].checked = this.checked;
      }
    };


    //获取tbody中所有的复选框,分别注册点击事件
    for (var i = 0; i < ckSmall.length; i++) {
      ckSmall[i].onclick = function () {
        var flag = true;//默认都被选中了
        for (var j = 0; j < ckSmall.length; j++) {
          //判断是否所有的复选框都选中
          if (!ckSmall[j].checked) {
            flag = false;
            break;
          }
        }
        //全选的这个复选框的状态就是flag这个变量的值
        ckAll.checked = flag;
      };
    }

  </script>
</body>

</html>

 

 

 

案例6：

 

 

posted @ 2019-12-06 10:44  jane_panyiyun  阅读(1090)  评论(0)  编辑  收藏  举报