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

案例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 解析excel，带合并单元的excel

    收集了一些对博主有帮助的博文,如下 >>>>>>>>>>>第一部分: 首先,mavn导入jar包 <!-- 解析excel需要导 ...

  2. 关于TC297的Flash写入之前是否需要先擦除的问题

    通过实际测试,对TC297 Flash的一个地址空间可以重复执行写入操作(program),而不需要先对该区域所在扇区进行擦除. MPC5675K则需要在写入之前进行擦除.

  3. 【实用工具】使用Java封装可执行exe应用全过程

    目录 编写java代码 打包 创建exe文件 压缩 总结 本文将使用exe4j将java项目封装为可以发送给他人使用的工具为例,来记录将java项目封装为exe文件的全过程 编写java代码 目标:创 ...

  4. 基于Java语言的IO操作（文件复制）

    public static void main(String[] args) { //获取复制开始前系统时间毫秒值 long start=System.currentTimeMillis(); //文 ...

  5. Seata 客户端需要同时启动 TM 和 RM 吗？

    在分析启动部分源码时,我发现 GlobalTransactionScanner 会同时启动 RM 和 TM client,但根据 Seata 的设计来看,TM 负责全局事务的操作,如果一个服务中不需要 ...

  6. Python文章相关性分析---金庸武侠小说分析-2018.1.16

    最近常听同事提及相关性分析,正巧看到这个google的开源库,并把相关操作与调试结果记录下来. 输出结果: 比较有意思的巧合是黄蓉使出打狗棒,郭靖就用了降龙十八掌,再后测试了名词的解析. 小说集可以百 ...

  7. Golang 怎么给WaitGroup加超时时间

    怎么给WaitGroup加超时时间呢?刚好群里有人问了我这个问题,我就把我的方法在这边贴出来了. var w = sync.WaitGroup{} var ch = make(chan bool) w ...

  8. BOM和DOM操作

    目录 BOM window对象 window子对象 location 弹出框 计时 history navigator DOM 查找节点 直接查找 间接查找 节点操作 创建节点 添加节点 删除节点 替 ...

  9. Orleans 初接触（二） 测试用例

    [返回导航] 在简单了解了Orleans 之后我们可以通过几个例子去加深印象 一.快速入门示例 这个例子也是跟着<Microsoft Orleans 之 入门指南>(https://www ...

  10. Node.js：深入浅出 http 与 stream

    原文链接:https://github.com/iNuanfeng/blog/issues/4 作者:暖风叔叔 前言 stream(流)是Node.js提供的又一个仅在服务区端可用的模块,流是一种抽象 ...