diff --git "a/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250+\345\271\277\345\221\212/08.2-\347\202\271\345\207\273\345\205\263\351\227\255.html" "b/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250+\345\271\277\345\221\212/08.2-\347\202\271\345\207\273\345\205\263\351\227\255.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6725a94b7766866d6167598c695f5b40e0e52e66
--- /dev/null
+++ "b/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250+\345\271\277\345\221\212/08.2-\347\202\271\345\207\273\345\205\263\351\227\255.html"	
@@ -0,0 +1,75 @@
+<!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>
+    .box {
+      position: relative;
+      width: 1000px;
+      height: 200px;
+      background-color: pink;
+      margin: 100px auto;
+      text-align: center;
+      font-size: 50px;
+      line-height: 200px;
+      font-weight: 700;
+    }
+
+    .box1 {
+      position: absolute;
+      right: 20px;
+      top: 10px;
+      width: 20px;
+      height: 20px;
+      background-color: skyblue;
+      text-align: center;
+      line-height: 20px;
+      font-size: 16px;
+      cursor: pointer;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="box">
+    我是广告1
+    <div class="box1">X</div>
+  </div>
+  <div class="box">
+    我是广告2
+    <div class="box1">X</div>
+  </div>
+  <div class="box">
+    我是广告3
+    <div class="box1">X</div>
+  </div>
+  <script>
+    // 关闭广告挑战
+    // 挑战1：关闭广告1
+   
+      // const box1 = document.querySelector('.box1')
+      // box1.addEventListener('click', function (e) {
+      //   if (e.target.tagName = '.BOX1') {
+      //     e.target.parentNode.style.display = 'none'
+      //   }
+      // })
+    
+   
+    // 挑战2：获取三个广告
+    const boxs = document.querySelectorAll('.box1')
+    for (let i = 0; i < boxs.length; i++) {
+      boxs[i].addEventListener('click', function () {
+        boxs[i].parentNode.style.display = 'none'
+      })
+    }
+
+      // 挑战3：如何优化
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250+\345\271\277\345\221\212/css/index.css" "b/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250+\345\271\277\345\221\212/css/index.css"
new file mode 100644
index 0000000000000000000000000000000000000000..bf537709ea7ef92a9f3564533646f812e737c65b
--- /dev/null
+++ "b/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250+\345\271\277\345\221\212/css/index.css"	
@@ -0,0 +1,71 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color:#721c24;
+}
+h1 {
+  text-align: center;
+  color:#333;
+  margin: 20px 0;
+ 
+}
+table {
+  margin:0 auto;
+  width: 800px;
+  border-collapse: collapse;
+  color:#004085;
+}
+th {
+  padding: 10px;
+  background: #cfe5ff;
+  
+  font-size: 20px;
+  font-weight: 400;
+}
+td,th {
+  border:1px solid #b8daff;
+}
+td {
+  padding:10px;
+  color:#666;
+  text-align: center;
+  font-size: 16px;
+}
+tbody tr {
+  background: #fff;
+}
+tbody tr:hover {
+  background: #e1ecf8;
+}
+.info {
+  width: 900px;
+  margin: 50px auto;
+  text-align: center;
+}
+.info  input, .info select {
+  width: 80px;
+  height: 27px;
+  outline: none;
+  border-radius: 5px;
+  border:1px solid #b8daff;
+  padding-left: 5px;
+  box-sizing: border-box;
+  margin-right: 15px;
+}
+.info button {
+  width: 60px;
+  height: 27px;
+  background-color: #004085;
+  outline: none;
+  border: 0;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 5px;
+}
+.info .age {
+  width: 50px;
+}
\ No newline at end of file
diff --git "a/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250+\345\271\277\345\221\212/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html" "b/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250+\345\271\277\345\221\212/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html"
new file mode 100644
index 0000000000000000000000000000000000000000..da4bf7c0244d60f0e8028c698fbcb8cc822ac73d
--- /dev/null
+++ "b/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250+\345\271\277\345\221\212/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html"	
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>学生信息管理</title>
+  <link rel="stylesheet" href="css/index.css" />
+</head>
+
+<body>
+  <h1>新增学员</h1>
+  <form action='' class="info" autocomplete="off">
+    姓名：<input type="text" class="uname" name="uname" />
+    年龄：<input type="text" class="age" name="age" />
+    性别:
+    <select name="gender" class="gender">
+      <option value="男">男</option>
+      <option value="女">女</option>
+    </select>
+    薪资：<input type="text" class="salary" name="salary" />
+    就业城市：<select name="city" class="city">
+      <option value="北京">北京</option>
+      <option value="上海">上海</option>
+      <option value="广州">广州</option>
+      <option value="深圳">深圳</option>
+      <option value="曹县">曹县</option>
+    </select>
+    <button class="add">录入</button>
+  </form>
+  <h1>就业榜</h1>
+  <table>
+    <thead>
+      <tr>
+        <th>学号</th>
+        <th>姓名</th>
+        <th>年龄</th>
+        <th>性别</th>
+        <th>薪资</th>
+        <th>就业城市</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- 
+        <tr>
+          <td>1001</td>
+          <td>欧阳霸天</td>
+          <td>19</td>
+          <td>男</td>
+          <td>15000</td>
+          <td>上海</td>
+          <td>
+            <a href="javascript:">删除</a>
+          </td>
+        </tr> 
+        -->
+    </tbody>
+  </table>
+  <script>
+    const uname = document.querySelector('.uname')
+    const age = document.querySelector('.age')
+    const gender = document.querySelector('.gender')
+    const salary = document.querySelector('.salary')
+    const city = document.querySelector('.city')
+    const tbody = document.querySelector('tbody')
+    const arr = []
+    const form = document.querySelector('form')
+    form.addEventListener('submit', function (e) {
+      e.preventDefault()
+
+      const names = document.querySelectorAll('[name]')
+      for (let i = 0; i < names.length; i++) {
+        if (names[i].value === '') {
+          return alert(`${names[i].name}不能为空`)
+        }
+
+      }
+
+      const data = {
+        id: arr.length + 1,
+        uname: uname.value,
+        age: age.value,
+        gender: gender.value,
+        salary: salary.value,
+        city: city.value
+      }
+      // console.log(data)
+      arr.push(data)
+      // console.log(arr)
+      this.reset()
+      funame()
+     
+      
+    })
+   tbody.addEventListener('click',function(e){
+    if(e.target.tagName === 'A'){
+  arr.splice(e.target.dataset.id,1)
+     }
+    funame()
+   })
+    
+   function funame(){
+        tbody.innerHTML = ''
+      for (let i = 0; i < arr.length; i++) {
+      const tr = document.createElement('tr')
+      tr.innerHTML = `
+    <td>${arr[i].id}</td>
+     <td>${arr[i].uname}</td>
+      <td>${arr[i].age}</td>
+       <td>${arr[i].gender}</td>
+        <td>${arr[i].salary}</td>
+         <td>${arr[i].city}</td>
+          <td><a href = "javascript:" data-id = '${i}'>删除</a></td>
+    `
+    tbody.appendChild(tr)
+
+  console.log(tbody)
+    }
+      }
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\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\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\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\271\262\347\272\257\346\254\243/2024.1122 \350\212\202\347\202\271/\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	中级