diff --git "a/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/01-\345\256\236\344\276\213\345\214\226\346\227\245\346\234\237\345\257\271\350\261\241.html" "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/01-\345\256\236\344\276\213\345\214\226\346\227\245\346\234\237\345\257\271\350\261\241.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5d1ceb77228ebf9fc31370b2bf4313d621133a76
--- /dev/null
+++ "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/01-\345\256\236\344\276\213\345\214\226\346\227\245\346\234\237\345\257\271\350\261\241.html"	
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <button></button>
+  <script>
+    // 实例化  new 
+    // 1. 得到当前时间 
+    const date = new Date();
+    document.write(date);
+    
+    document.write(`</br>`)
+
+    // 2. 指定时间 2025-11-12 09:30:00
+    const date2 = new Date('2025-11-12 09:30:00');
+    document.write(date2);
+   
+
+
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/02-\345\270\270\350\247\201\347\232\204\346\227\245\346\234\237\345\257\271\350\261\241\346\226\271\346\263\225.html" "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/02-\345\270\270\350\247\201\347\232\204\346\227\245\346\234\237\345\257\271\350\261\241\346\226\271\346\263\225.html"
new file mode 100644
index 0000000000000000000000000000000000000000..dbd6ec3c1e2745f7148d834dc8837f123a15b66f
--- /dev/null
+++ "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/02-\345\270\270\350\247\201\347\232\204\346\227\245\346\234\237\345\257\271\350\261\241\346\226\271\346\263\225.html"	
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <script>
+    // 获得日期对象
+    const date = new Date();
+   
+    // 使用里面的方法
+    // 年
+    document.write(date.getFullYear());
+    document.write(`</br>`);
+    // 月  从0-11
+    document.write(date.getMonth());
+    document.write(`</br>`);
+    // 日
+    document.write(date.getDate());
+    document.write(`</br>`);
+    // 时
+    document.write(date.getHours());
+    document.write(`</br>`);
+    // 分
+    document.write(date.getMinutes());
+    document.write(`</br>`);
+    // 秒
+    document.write(date.getSeconds());
+    document.write(`</br>`);
+    // 星期几 ，第一天是星期几？
+    document.write('第一天是星期日');
+
+
+
+
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/03-\346\230\276\347\244\272\346\240\274\345\274\217\345\214\226\347\232\204\346\227\266\351\227\264.html" "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/03-\346\230\276\347\244\272\346\240\274\345\274\217\345\214\226\347\232\204\346\227\266\351\227\264.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3d0d07e92d3a4da9fe389dd750b35976095e7694
--- /dev/null
+++ "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/03-\346\230\276\347\244\272\346\240\274\345\274\217\345\214\226\347\232\204\346\227\266\351\227\264.html"	
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    div {
+      width: 300px;
+      height: 40px;
+      border: 1px solid pink;
+      text-align: center;
+      line-height: 40px;
+    }
+  </style>
+</head>
+
+<body>
+  <div></div>
+
+  <script>
+
+    // 实现电子时间效果，在div里显示 现在是2024年11月21日 10:12:07 格式的时间
+
+
+    const time = function () {    //实现电子时间函数
+      const date = new Date();    //实例化时间对象
+      const div = document.querySelector('div');    //获取div
+      div.innerHTML = `${date.getFullYear()}年${date.getMonth()}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+    }
+
+    time();   //将电子时间函数给div
+
+    setInterval(time, 1000); //间隔函数，每一秒刷新一次div的时间
+
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/04-\346\227\266\351\227\264\347\232\204\345\217\246\345\244\226\344\270\200\344\270\252\345\206\231\346\263\225.html" "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/04-\346\227\266\351\227\264\347\232\204\345\217\246\345\244\226\344\270\200\344\270\252\345\206\231\346\263\225.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a7dafdeb3506119d4f58f1555f2fa14e43e5077b
--- /dev/null
+++ "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/04-\346\227\266\351\227\264\347\232\204\345\217\246\345\244\226\344\270\200\344\270\252\345\206\231\346\263\225.html"	
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    div {
+      width: 300px;
+      height: 40px;
+      border: 1px solid pink;
+      text-align: center;
+      line-height: 40px;
+    }
+  </style>
+</head>
+
+<body>
+  <div></div>
+  <script>
+    // const div = document.querySelector('div')
+    // // 得到日期对象
+    // const date = new Date()
+    // // 将日期对象 本地化
+    // // 1. 完整的日期+时间  date.toLocaleString()      // 2022/4/1 09:41:21
+    // // 2. 只有日期        date.toLocaleDateString()  // 2022/4/1
+    // // 3. 只有时间        date.toLocaleTimeString()  // 16:57:40
+    // div.innerHTML = date.toLocaleString()
+    // setInterval(function () {
+    //   const date = new Date()
+    //   div.innerHTML = date.toLocaleString()
+
+    // }, 1000)
+
+    const date = new Date();
+
+    console.log(date);
+    console.log(date.toLocaleString());
+    console.log(date.toLocaleDateString());
+    console.log(date.toLocaleTimeString());
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/05-\345\276\227\345\210\260\346\227\266\351\227\264\346\210\263.html" "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/05-\345\276\227\345\210\260\346\227\266\351\227\264\346\210\263.html"
new file mode 100644
index 0000000000000000000000000000000000000000..73501852e6f552f218783954e0f592ef3b4962bf
--- /dev/null
+++ "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/05-\345\276\227\345\210\260\346\227\266\351\227\264\346\210\263.html"	
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <script>
+    // 时间戳，一种特殊的时间计量方式，一串整数的数字
+    // 1970.01.01 0:0:0  1970年Unix版本发布，1970是纪元时间
+    // 时间戳，通常用来做时间比较的差值
+
+    // 3种获取方式 get + Date
+    const date = new Date();
+    console.log(date.getTime() / 1000);  // 1970.01.01 0:0:0 到此时此刻的毫秒数 秒数要/1000
+    const last = new Date('2024-11-21 09:42:00')
+    console.log((last.getTime() / 1000 - date.getTime() / 1000) / 60);
+
+
+    console.log(+new Date());  // +'10'
+
+    console.log(Date.now());  // 静态方法
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/06-\345\200\222\350\256\241\346\227\266.html" "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/06-\345\200\222\350\256\241\346\227\266.html"
new file mode 100644
index 0000000000000000000000000000000000000000..469db31c3c702ac6a6e72d590454ab664697f35d
--- /dev/null
+++ "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/06-\345\200\222\350\256\241\346\227\266.html"	
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+  <style>
+    .countdown {
+      width: 240px;
+      height: 305px;
+      text-align: center;
+      line-height: 1;
+      color: #fff;
+      background-color: brown;
+      /* background-size: 240px; */
+      /* float: left; */
+      overflow: hidden;
+    }
+
+    .countdown .next {
+      font-size: 16px;
+      margin: 25px 0 14px;
+    }
+
+    .countdown .title {
+      font-size: 33px;
+    }
+
+    .countdown .tips {
+      margin-top: 80px;
+      font-size: 23px;
+    }
+
+    .countdown small {
+      font-size: 17px;
+    }
+
+    .countdown .clock {
+      width: 142px;
+      margin: 18px auto 0;
+      overflow: hidden;
+    }
+
+    .countdown .clock span,
+    .countdown .clock i {
+      display: block;
+      text-align: center;
+      line-height: 34px;
+      font-size: 23px;
+      float: left;
+    }
+
+    .countdown .clock span {
+      width: 34px;
+      height: 34px;
+      border-radius: 2px;
+      background-color: #303430;
+    }
+
+    .countdown .clock i {
+      width: 20px;
+      font-style: normal;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="countdown">
+    <p class="next">今天是11月21日<span>星期六</span></p>
+    <p class="title">下课倒计时</p>
+    <p class="clock">
+      <span id="hour">00</span>
+      <i>:</i>
+      <span id="minutes">25</span>
+      <i>:</i>
+      <span id="scond">20</span>
+    </p>
+    <p class="tips">21:07:07下课</p>
+  </div>
+  <script>
+    // 做倒计时要有两个时间 未来时间A 现在时间B A-B就是时间差 ，毫秒的差，转成时分秒
+
+    // 随机颜色函数
+
+    // 1. 自定义一个随机颜色函数 #00FF00 rgb(255,255,255)
+    // a.style.color = '#FFFF00'  // 三原色 Red Green Blue   0-F 的6位数
+    // a.style.color = 'rgb(255,0,0)'  // 三原色 Red Green Blue   rgb(255,0,0)  0-255
+    // div.style.backgroundColor = 'rgb(0,0,255)' 
+    // div.style.backgroundColor = '#FF0000'
+    // 定义数组，把可选值写到数组，再去用随机的下标取6次数组的值   
+    // F #F 0 #F0
+
+
+    // 
+
+
+    // 函数封装 getCountTime
+
+    // 让倒计时生效
+
+    const div = document.querySelector('.countdown');  //获取div
+
+    const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+
+    // 获取span标签并修改星期
+
+    // 页面刷新随机得到颜色
+    const randomColor = function (flag) {
+      const time = new Date();    //实例化时间对象
+      document.querySelector('.next span').innerText = weeks[time.getDay()];
+      const last = new Date('2024-11-21 21:07:07');
+      const n = Math.floor((+last - +time)) / 1000;
+      const h = Math.floor(n / 3600);
+      const m = Math.floor(n / 60 % 60);
+      const s = Math.floor(n % 60);
+      document.querySelector('#hour').innerText = h < 10 ? '0' + h : h;
+      document.querySelector('#minutes').innerText = m < 10 ? '0' + m : m;
+      document.querySelector('#scond').innerText = s < 10 ? '0' + s : s;
+      if (flag == 'rgb') {
+        //获取随机rgb颜色
+        const rgb = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
+        div.style.backgroundColor = rgb;
+      } else {
+        const cmyks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];   // 获取随机cmyk颜色的数组
+        let cmyk = '#';
+        for (let i = 0; i < 6; i++) {
+          cmyk += cmyks[Math.floor(Math.random() * cmyks.length)];
+        }
+        div.style.backgroundColor = cmyk;
+      }
+    }
+
+    randomColor();
+
+    setInterval(randomColor, 1000);
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260 PPT.pdf" "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260 PPT.pdf"
new file mode 100644
index 0000000000000000000000000000000000000000..4b65205829efcfbc7d82a8d7b6df46f68f8d2570
Binary files /dev/null and "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260 PPT.pdf" differ
diff --git "a/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260.md" "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..88e0d567efb782cce2c78501271b54b177ae23e5
--- /dev/null
+++ "b/\345\220\264\344\275\263\345\256\207/20241121 \346\227\266\351\227\264\345\257\271\350\261\241/\346\227\266\351\227\264\345\257\271\350\261\241\347\273\203\344\271\240/\346\227\266\351\227\264\345\257\271\350\261\241\344\270\216\350\212\202\347\202\271\346\223\215\344\275\234\347\254\224\350\256\260.md"	
@@ -0,0 +1,330 @@
+# Web APIs - 第4天
+
+> 进一步学习 DOM 相关知识，实现可交互的网页特效
+
+- 能够插入、删除和替换元素节点
+- 能够依据元素节点关系查找节点
+
+## 日期对象
+
+
+掌握 Date 日期对象的使用，动态获取当前计算机的时间。
+
+
+ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。
+
+### 实例化
+
+~~~javascript
+  // 1. 实例化
+  // const date = new Date(); // 系统默认时间
+  const date = new Date('2020-05-01') // 指定时间
+  // date 变量即所谓的时间对象
+
+  console.log(typeof date)
+
+
+
+~~~
+
+### 方法
+
+
+
+ ~~~javascript
+   // 1. 实例化
+  const date = new Date();
+  // 2. 调用时间对象方法
+  // 通过方法分别获取年、月、日，时、分、秒
+  const year = date.getFullYear(); // 四位年份
+  const month = date.getMonth(); // 0 ~ 11
+ ~~~
+
+
+getFullYear 获取四位年份
+
+getMonth 获取月份，取值为 0 ~ 11
+
+getDate 获取月份中的每一天，不同月份取值也不相同
+
+getDay 获取星期，取值为 0 ~ 6
+
+getHours 获取小时，取值为 0 ~ 23
+
+getMinutes 获取分钟，取值为 0 ~ 59
+
+getSeconds 获取秒，取值为 0 ~ 59
+
+### 时间戳
+
+时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。
+
+注：ECMAScript 中时间戳是以毫秒计的。
+
+~~~javascript
+    // 1. 实例化
+  const date = new Date()
+  // 2. 获取时间戳
+  console.log(date.getTime())
+// 还有一种获取时间戳的方法
+  console.log(+new Date())
+  // 还有一种获取时间戳的方法
+  console.log(Date.now())
+
+~~~
+
+
+获取时间戳的方法，分别为 getTime 和 Date.now 和  +new Date()
+
+## DOM 节点
+
+> 掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点
+
+回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。
+
+### 插入节点
+
+在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。
+
+如下代码演示：
+
+```html
+<body>
+  <h3>插入节点</h3>
+  <p>在现有 dom 结构基础上插入新的元素节点</p>
+  <hr>
+  <!-- 普通盒子 -->
+  <div class="box"></div>
+  <!-- 点击按钮向 box 盒子插入节点 -->
+  <button class="btn">插入节点</button>
+  <script>
+    // 点击按钮，在网页中插入节点
+    const btn = document.querySelector('.btn')
+    btn.addEventListener('click', function () {
+      // 1. 获得一个 DOM 元素节点
+      const p = document.createElement('p')
+      p.innerText = '创建的新的p标签'
+      p.className = 'info'
+      
+      // 复制原有的 DOM 节点
+      const p2 = document.querySelector('p').cloneNode(true)
+      p2.style.color = 'red'
+
+      // 2. 插入盒子 box 盒子
+      document.querySelector('.box').appendChild(p)
+      document.querySelector('.box').appendChild(p2)
+    })
+  </script>
+</body>
+```
+
+结论：
+
+- `createElement` 动态创建任意 DOM 节点
+
+- `cloneNode` 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
+
+- `appendChild` 在末尾（结束标签前）插入节点
+
+再来看另一种情形的代码演示：
+
+```html
+<body>
+  <h3>插入节点</h3>
+  <p>在现有 dom 结构基础上插入新的元素节点</p>
+	<hr>
+  <button class="btn1">在任意节点前插入</button>
+  <ul>
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>JavaScript</li>
+  </ul>
+  <script>
+    // 点击按钮，在已有 DOM 中插入新节点
+    const btn1 = document.querySelector('.btn1')
+    btn1.addEventListener('click', function () {
+
+      // 第 2 个 li 元素
+      const relative = document.querySelector('li:nth-child(2)')
+
+      // 1. 动态创建新的节点
+      const li1 = document.createElement('li')
+      li1.style.color = 'red'
+      li1.innerText = 'Web APIs'
+
+      // 复制现有的节点
+      const li2 = document.querySelector('li:first-child').cloneNode(true)
+      li2.style.color = 'blue'
+
+      // 2. 在 relative 节点前插入
+      document.querySelector('ul').insertBefore(li1, relative)
+      document.querySelector('ul').insertBefore(li2, relative)
+    })
+  </script>
+</body>
+```
+
+结论：
+
+- `createElement` 动态创建任意 DOM 节点
+
+- `cloneNode` 复制现有的 DOM 节点，传入参数 true 会复制所有子节点
+
+- `insertBefore` 在父节点中任意子节点之前插入新节点
+
+### 删除节点
+
+删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。
+
+```html
+<body>
+  <!-- 点击按钮删除节点 -->
+  <button>删除节点</button>
+  <ul>
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>Web APIs</li>
+  </ul>
+
+  <script>
+    const btn = document.querySelector('button')
+    btn.addEventListener('click', function () {
+      // 获取 ul 父节点
+      let ul = document.querySelector('ul')
+      // 待删除的子节点
+      let lis = document.querySelectorAll('li')
+
+      // 删除节点
+      ul.removeChild(lis[0])
+    })
+  </script>
+</body>
+```
+
+结论：`removeChild` 删除节点时一定是由父子关系。
+
+### 查找节点
+
+DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。
+
+#### 父子关系
+
+```html
+<body>
+  <button class="btn1">所有的子节点</button>
+  <!-- 获取 ul 的子节点 -->
+  <ul>
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>JavaScript 基础</li>
+    <li>Web APIs</li>
+  </ul>
+  <script>
+    const btn1 = document.querySelector('.btn1')
+    btn1.addEventListener('click', function () {
+      // 父节点
+      const ul = document.querySelector('ul')
+
+      // 所有的子节点
+      console.log(ul.childNodes)
+      // 只包含元素子节点
+      console.log(ul.children)
+    })
+  </script>
+</body>
+```
+
+结论：
+
+- `childNodes` 获取全部的子节点，回车换行会被认为是空白文本节点
+- `children` 只获取元素类型节点
+
+```html
+<body>
+  <table>
+    <tr>
+      <td width="60">序号</td>
+      <td>课程名</td>
+      <td>难度</td>
+      <td width="80">操作</td>
+    </tr>
+    <tr>
+      <td>1</td>
+      <td><span>HTML</span></td>
+      <td>初级</td>
+      <td><button>变色</button></td>
+    </tr>
+    <tr>
+      <td>2</td>
+      <td><span>CSS</span></td>
+      <td>初级</td>
+      <td><button>变色</button></td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td><span>Web APIs</span></td>
+      <td>中级</td>
+      <td><button>变色</button></td>
+    </tr>
+  </table>
+  <script>
+    // 获取所有 button 节点，并添加事件监听
+    const buttons = document.querySelectorAll('table button')
+    for(let i = 0; i < buttons.length; i++) {
+      buttons[i].addEventListener('click', function () {
+        // console.log(this.parentNode); // 父节点 td
+        // console.log(this.parentNode.parentNode); // 爷爷节点 tr
+        this.parentNode.parentNode.style.color = 'red'
+      })
+    }
+  </script>
+</body>
+```
+
+结论：`parentNode` 获取父节点，以相对位置查找节点，实际应用中非常灵活。
+
+#### 兄弟关系
+
+```html
+<body>
+  <ul>
+    <li>HTML</li>
+    <li>CSS</li>
+    <li>JavaScript 基础</li>
+    <li>Web APIs</li>
+  </ul>
+  <script>
+    // 获取所有 li 节点
+    const lis = document.querySelectorAll('ul li')
+
+    // 对所有的 li 节点添加事件监听
+    for(let i = 0; i < lis.length; i++) {
+      lis[i].addEventListener('click', function () {
+        // 前一个节点
+        console.log(this.previousSibling)
+        // 下一下节点
+        console.log(this.nextSibling)
+      })
+    }
+  </script>
+</body>
+```
+
+结论：
+
+- `previousSibling` 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。
+- `nextSibling` 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。
+
+
+
+
+
+
+
+
+
+
+
+
+
+

序号	课程名	难度	操作
1	HTML	初级
2	CSS	初级
3	Web APIs	中级