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

案例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="data:images/1.jpg" alt="">

    <img src="data:images/2.jpg" alt="">

    <img src="data: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：

JS---DOM---点击操作---节点的方式---案例的更多相关文章

  1. JS DOM用不同方法获取节点及对节点插入、复制和移除

    操作节点的方法 appendChild() insertBefore() replaceChild() cloneNode() normalize() splitText() sppendChild( ...

  2. JS DOM元素的操作（创建，添加，删除，和修改属性）

    1.1 创建 DOM 元素以及相应的追加方式 1.1.1  创建:document.createElement('div'); 添加: fatherEle.appendChild(ele); appe ...

  3. JS DOM之表格操作

    一个能给添加行的表格 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  4. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  5. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  6. js dom操作获取节点的一些方法

    在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...

  7. js dom 操作技巧

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

  8. js基础总结01 --操作DOM

    1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...

  9. JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删改查),事件

    JavaScript---Dom树详解,节点查找方式(直接(id,class,tag),间接(父子,兄弟)),节点操作(增删改查,赋值节点,替换节点,),节点属性操作(增删改查),节点文本的操作(增删 ...

随机推荐

  1. CoderForces-913D

    You are preparing for an exam on scheduling theory. The exam will last for exactly Tmilliseconds and ...

  2. 【Leetcode 做题学算法周刊】第六期

    首发于微信公众号<前端成长记>,写于 2019.12.15 背景 本文记录刷题过程中的整个思考过程,以供参考.主要内容涵盖: 题目分析设想 编写代码验证 查阅他人解法 思考总结 目录 11 ...

  3. unity3d 柏林噪声 PerlinNoise 规律 算法

    测试 每个小数值取100次 print(0.1); LaTest3(0.1f, 0.1f); print("Max:" + La.Max() + "|Min:" ...

  4. debian官网qcow2镜像修改root账号密码，开启ssh等

    1.下载官网qcow2镜像文件 wget http://172.16.20.10/vmtemplate/KVM/wangrui/Debian/debian-10.2.0-openstack-amd64 ...

  5. JS中的深拷贝和浅拷贝

    浅拷贝 浅拷贝是拷贝第一层的拷贝 使用Object.assign解决这个问题. let a = { age: 1 } let b = Object.assign({}, a) a.age = 2 co ...

  6. HTTP 错误 500.19 - Internal Server Error 错误代码 0x80070005 由于权限不足而无法读取配置文件

    HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 模块 IIS Web Core 通知 未知 处理程序 尚未确定 错误代码 ...

  7. ubuntu16.04修改ssh的端口

    直接修改文件   /etc/ssh/sshd_config文件,

  8. dev gridcontrol简单的动态设置动态表头

    1)使用BandedGridView控件(此处演示BandedGridView控件包含8个列)2)往BandedGridView控件里添加GridBand控件(此处演示添加了4个) 3)///设置添加 ...

  9. pt-online-schema-change工具使用教程（在线修改大表结构）

    percona-toolkit中pt-online-schema-change工具安装和使用 pt-online-schema-change介绍 使用场景:在线修改大表结构 在线数据库的维护中,总会涉 ...

  10. IDC：助力转型、深入变革：中国云专业服务市场持续升温

    来源:IDC 北京,2019 年 10 月 24 日——随着云计算在中国市场更深入和广泛的应用,与云相关的专业服务(咨询.迁移.开发与建设服务)需求旺盛.IDC 首次发布的<2019 年上半年云 ...