DOM #第一天

最新推荐文章于 2024-07-22 15:13:59 发布

奋斗的小baby

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量100

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_52809337/article/details/119959534

版权

一、事件三要素

二、获取页面节点的方法

三、新增、删除数据

一、事件三要素

1.事件源

2.事件类型

3.事件处理函数

【例】：随机改变背景的颜色

    // 获取元素
    let box = document.querySelector('.box');
    //  绑定点击事件
    box.onclick = function() {
    //  1.使用十六进制改变背景颜色
    //  let numRandom = Math.random().toString(16).substring(2, 8);
    //  this.style.backgroundColor = `#${numRandom}`;  

    // 2.使用rgba改变背景颜色
    // 随机数公式：Math.round(Math.random()*(y-x)+x) 
    let numRandom = Math.round(Math.random()*256);
    let numRandom1 = Math.round(Math.random()*256);
    let numRandom2 = Math.round(Math.random()*256);
    var arr = [numRandom, numRandom1, numRandom2]
    //  console.log(numRandom);
    this.style.backgroundColor = `rgba(${arr[0]}, ${arr[1]}, ${arr[2]})`;
   }

二、获取页面节点的方法

1.通过 “标签名\类名\name属性” 获取，获取的节点结果都是一个类数组!

2.1 document.querySelectorAll, 结果为类数组，兼容性不是很好

2.2document.querySelector 可以直接操作，兼容性不是很好

注意：如果页面有多个相同的元素，document.querySelector只能获取相同元素中的第一个元素

<body>
  <div class="box">ff</div>
  <div id="mybox"></div>
  <input type="text" name="usename">
  <script>
    //1.通过 “标签名\类名\name属性” ,获取的节点结果都是一个类数组!
    // (1)通过 标签名 获取属性
    let divs = document.getElementsByTagName('div');
    console.log(divs); 
    console.log(divs[0]); // 获取第一个div

    // （2）通过类名获取属性
    let box = document.getElementsByClassName('box');
    console.log(box);
    box[0].style.height = "100px";
    box[0].style.width = "100px";
    box[0].style.backgroundColor = "red"
    
    // （3）通过name属性获取
    let input = document.getElementsByName('usename');
    input[0].style.color = 'red';

    // (4)通过id获取
    let mybox = document.getElementById('mybox');
    mybox.innerHTML = '呃呃呃呃';
    
    // 2.1document.querySelectorAll,结果为类数组 兼容性没有上边那些方法好
    let div = document.querySelectorAll('div');
    divs[0].style.backgroundColor = "green";

    // 2.2document.querySelector 可以直接操作 兼容性没有上边那些方法好
    document.querySelector('.box').style.color = 'red'
  </script>
</body>

【案例】点击按钮切换图片

<body>
  <img src="./img/9012175.jpg_220x240.jpg" alt="">

  <button>图片1</button>
  <button>图片2</button>
  <button>图片3</button>

  <script>
    let btn = document.querySelectorAll('button');
    let img = document.querySelector('img');
    let arrImg = ['./img/9012175.jpg_220x240.jpg', './img/9012177.jpg_220x240.jpg', './img/9012243.jpg_220x240.jpg'];
    for (let i = 0; i < btn.length; i++) {
      btn[i].onclick = function() {
        img.src = arrImg[i];
      }
    }
  </script>
</body>

3.通过关系获取节点

3.1获取兄弟节点

nextSibling：获取下一个兄弟，包括文本
nextElementSibling：获取下一个兄弟，只包括标签不包括文本

3.2获取儿子节点

children：获取父级所有儿子

【案例】表格标注

需求1：点击某一个td, 所在的列变颜色

需求2：点击某一个td, 所在的行变颜色

<body>
  <table border="1" width = '500px' height = "200px" style = border-collapse:collapse>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
  </table>

  <script src="">
    // 1.需求：点击某一个td, 所在的列变颜色
    let tds = document.querySelectorAll('td');
    let trs = document.querySelectorAll('tr');
    
    // console.log(trs);
    
    // 给所有td绑定点击事件
    for (let i = 0; i < tds.length; i++) {
        tds[i].onclick = function() {
          for (let i = 0; i < tds.length; i++) {
            tds[i].style.backgroundColor = '#fff';
          }
          let childs =  [...tds[i].parentElement.children];
          let index = childs.indexOf(tds[i]); 
          // console.log(index);
          for (let j = 0; j < trs.length; j++) {
            trs[j].children[index].style.backgroundColor = 'red'
            // console.log(trs[j][index]);
            
          }
        }
      } 
  </script>

  <script>
    // 2.需求：点击某一个td, 所在的行变颜色
    let tds = document.querySelectorAll('td');
    let trs = document.querySelectorAll('tr');
    // 给所有td绑定点击事件
    for (let i = 0; i < tds.length; i++) {
        tds[i].onclick = function() {
          for (let i = 0; i < trs.length; i++) {
            trs[i].style.backgroundColor = '#fff';
          }
        this.parentElement.style.backgroundColor = 'green';
      }
    }
  </script>
</body>

需求1运行结果：

需求2运行结果：

三、新增、删除数据

1.新增

（1）document.createElement()：创建节点

(2) 将新增的节点插入html页面

appendChild()
append()
insertBefore()

2.复制

cloneNode(Boolean)

-->true：复制节点本身及其子节点

-->false：只复制该节点自己，如果括号里面不填，就默认为false

3.删除

（1）remove()：删除节点自己

（2）removeChild(‘元素’)：删除儿子节点

<body>
  <div class="box">要删除的节点
    <p class="child">children</p>
  </div>
  <script>
    // 1.新增
    // （1）document.createElement()创建方法
    let div = document.createElement('div');
    div.innerHTML = '新增的divddc'; // 填充内容
    // (2) 将新增的标签插入div
    let body = document.body; // 获取body标签
    body.appendChild(div); //

    // 2.删除
    // （1）删除节点自己
    let olddiv = document.querySelector('.box');
    // // console.log(olddiv);
    // olddiv.remove();

    // （2）删除儿子节点
    let child = document.querySelector('.child')
    olddiv.removeChild(child)
  </script>
</body>

【案例】动态新增表格数据

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      margin: 50px;
    }
  </style>
</head>

<body>
  姓名：<input type="text">&nbsp;&nbsp;&nbsp;&nbsp;
  住址：<input type="text">&nbsp;&nbsp;&nbsp;&nbsp;
  电话：<input type="text">
  <button>新增数据</button>

  <table border="1" width='300px' height='20px' style="border-collapse: collapse;">
    <thead>
      <tr>
        <td>姓名</td>
        <td>住址</td>
        <td>电话</td>
        <td class="caozuo">操作</td>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>

  <script>
    let tbody = document.querySelector('tbody');
    let input = document.querySelectorAll('input');
    let btn = document.querySelector('button');

    btn.onclick = function () {
      tbody.innerHTML += `
        <tr>
          <td>${input[0].value}</td>
          <td>${input[1].value}</td>
          <td>${input[2].value}</td>
          <td><button>删除</button></td>
        </tr>
      `;
      shanchu();
    }

    function shanchu() {
      let btn = document.querySelectorAll('td button');
      for (let i = 0; i < btn.length; i++) {
        btn[i].onclick = function () {
          this.parentElement.parentElement.remove();
        }
      }
    }
  </script>

奋斗的小baby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM #第一天

一、事件三要素1.事件源2.事件类型3.事件处理函数【例】：随机改变背景的颜色 // 获取元素 let box = document.querySelector('.box'); // 绑定点击事件 box.onclick = function() { // 1.使用十六进制改变背景颜色 // let numRandom = Math.random().toString(16).substring(2, 8); // thi
复制链接

扫一扫