JS---DOM---點擊操做---節點的方式---案例

點擊操做---節點的方式---案例

 

案例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)html

<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="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="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. 全選的時候,複選框裏面狀態和全選一致node

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:

相關文章
相關標籤/搜索