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

案例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. base64转图片、图片转base64、图片拼接、加水印（水印角度可设置）

    /** * @Description: 将base64编码字符串转换为图片 * @param imgStr * base64编码字符串 * @param path * 图片路径-具体到文件 * @re ...

  2. 转:关于JAVA项目中CLASSPATH路径详解

    在dos下编译Java程序,就要用到classpath这个概念,尤其是在没有设置环境变量的时候.classpath就是存放.class等编译后文件的路径. javac:如果当前你要编译的Java文件中 ...

  3. redis--linux环境搭建

    1.redis诞生的背景 在这要从08年开始说起,一个意大利的小伙子创建一个访问网站信息的LLOOGG.COM网站,用来记录网站的访问记录,查看最近一万条访问信息,每次访问都会将数据存入mysql当中 ...

  4. luogu P1731 [NOI1999]生日蛋糕 |暴力枚举

    题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层 生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M)层蛋糕是半径为Ri, 高度为Hi的圆柱 ...

  5. Java并发编程系列-(4) 显式锁与AQS

    4 显示锁和AQS 4.1 Lock接口 核心方法 Java在java.util.concurrent.locks包中提供了一系列的显示锁类,其中最基础的就是Lock接口,该接口提供了几个常见的锁相关 ...

  6. tensorflow SavedModelBuilder用法

    训练代码: # coding: utf-8 from __future__ import print_function from __future__ import division import t ...

  7. 冒泡排序 C&&C++

    冒泡排序(因为过程像冒泡,所以叫做冒泡排序)   流程: (1)对数组中各个数字,一次比较相邻两个 (2)如果前面大于后面,就交换这两个数据 (3)再用同样的方法继续排,直到外层循环排完 或者 (1) ...

  8. Swing JTable使用

    package cn.ychx; import java.awt.Dimension; import java.awt.Toolkit; import java.sql.Connection; imp ...

  9. 基于JavaScript google map集成流程

    google地图集成流程 一.获取Google Map API密钥 1.进入Google官网 => https://www.google.com.hk/ ,申请一个谷歌账号(如果没有)然后访问下 ...

  10. angular6路由参数的传递与获取

    1.访问路由链接:/test/id 路由配置: {path: 'test/:id', component: TestComponent} html传参: <a href="javasc ...