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

案例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. 【nodejs原理&源码赏析（7）】【译】Node.js中的事件循环，定时器和process.nextTick

    [摘要] 官网博文翻译,nodejs中的定时器 示例代码托管在:http://www.github.com/dashnowords/blogs 原文地址:https://nodejs.org/en/d ...

  2. JQuery之Ajax应用

    众所周知JQuery中的Ajax主要用于数据传输,其数据传输格式为JSON格式数据,比XML格式数据传输更快. ajax 是 Asynchronous JavaScript and XML的简写,aj ...

  3. 使用正则表达式实现（加减乘除）计算器(C#实现)

    起因:公司领导要求做一款基于行业规范的计算器, 然后需要用户输入一些数据,然后根据用户输入的数据满足某些条件后,再根据用户输入的条件二进行加减乘除运算.;-) 期间因为查找规范等形成数据表的某一列是带 ...

  4. Exponial

    Description Everybody loves big numbers (if you do not, you might want to stop reading at this point ...

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

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

  6. wxxcx_learn独立验证与REST

    模块,控制器,方法 validate  接口参数校验 独立验证(验证器对独立验证做了更好的封装) $date = [ 'name' => '111', 'email' => '123@qq ...

  7. CCF-CSP题解 201809-4 再卖菜

    碎碎念..近视加老花,还以为第二天除了第二家范围在100以内别的都不确定,于是x**算的记搜复杂度超时了.还鼓捣着什么差分区间最长路,虽然有大神用差分区间做出来了,然而自己并没有看懂. 其实就是一个记 ...

  8. hexo + next 搭建博客时Cannot GET /tags/问题处理

    原来是要修改新建的index.md文件,不仔细. 此外,愈发觉得百度和谷歌搜索同一问题的差距,谷歌更适合程序员! https://www.zhihu.com/question/29017171 这个可 ...

  9. IPFS学习-IPNS

    星际名称系统(IPNS)是一个创建个更新可变的链接到IPFS内容的系统,由于对象在IPFS中是内容寻址的,他们的内容变化将导致地址随之变化.对于多变的事物是有用的.但是很难获取某些内容的最新版本. 在 ...

  10. Android设计模式—观察者模式

    装载请标明出处:https://www.cnblogs.com/tangZH/p/11175120.html  观察者模式 说白了,就是一个对发生改变,所有依赖于它的对象也发生改变,这是一对多的关系. ...