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

案例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. 一道题反映Java的类初始化过程

    Java的类初始化过程: 1. 父类的static成员变量,static语句块. 2. 子类的static成员变量,static语句块. 3. 父类的普通成员变量,构造函数. 4. 子类的普通成员变量 ...

  2. hibernate的查询方式的介绍（一）

    1.对象导航查询 2.OID查询 3.hql(hibernate query language)查询 4.QBC查询 5.本地sql查询 在这里先介绍其中两种 1.hibernate的对象导航查询 ( ...

  3. SI522和RC522/ZS3801/FM17520的区别

    小编最近在测试一颗新的芯片,是国内知名厂家中科微研发的,主打超低功耗的厂家. 经过测试和比较小编发现 相对于MFRC522,SI522可以完全替换,不需要做任何更改,同时接受模式下功耗低10mA左右, ...

  4. C++fread小解

    std::fread ——C++ 输入/输出库 C 风格 I/O 定义于头文件 <cstdio> std::size_t fread( void* buffer, std::size_t ...

  5. Zabbix通过与微信、钉钉整合实现实时告警

    abbix可以通过多种方式把告警信息发送到指定人,常用的有邮件,短信报警方式,但是越来越多的企业开始使用zabbix结合微信.钉钉作为主要的告警方式,这样可以及时有效的把告警信息推送到接收人,方便告警 ...

  6. Python学习笔记之二——Python的运行机制，一般人肯定不会

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:XX   Python解释器简介   解释器是一种让其他程序运行起来的程 ...

  7. Selenium之编辑框操作

    编辑框操作: 网页上随处可见的编辑框,有时候编辑框里有默认的提示文字或者当我们需要输入第二次测试数据时,须先用clear()方法清除该元素里的字符串,再输入文本: 那么如何获取输入框已经输入的文本内容 ...

  8. Prometheus启动失败的问题

    1.yml文件格式错误 Prometheus是开箱即用的,但是我们用的时候因为新增监控项,所以我们需要修改配置文件.改了之后启动不了的话,第一件事就要想的是yaml文件的格式问题. yaml中允许表示 ...

  9. 第三方OAuth授权登录，QQ、微信（WeChat）、微博、GitHub、码云（Gitee）、淘宝（天猫）、微软（Microsoft ）、钉钉、谷歌（Google）、支付宝（AliPay）、StackOverflow

    Netnr.Login 第三方OAuth授权登录 支持第三方登录 三方 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 参考文档 安装 ( ...

  10. hbuilder/hbuilderx 无法检测到模拟器

    常用模拟器的端口 夜神模拟器 端口号 :62001 海马玩模拟器 端口号:26944 网易mumu模拟器端口号:7555 天天模拟器 端口号:6555 AndroidStudio自带模拟器 端口号: ...