进一步学习 DOM 相关知识，实现可交互的网页特效
掌握 Date 日期对象的使用，动态获取当前计算机的时间。
ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用。
x1 // 1. 实例化2 // const date = new Date(); // 系统默认时间3 const date = new Date('2020-05-01') // 指定时间4 // date 变量即所谓的时间对象5 console.log(typeof date)7
xxxxxxxxxx61 // 1. 实例化2 const date = new Date();3 // 2. 调用时间对象方法4 // 通过方法分别获取年、月、日，时、分、秒5 const year = date.getFullYear(); // 四位年份6 const month = date.getMonth(); // 0 ~ 11getFullYear 获取四位年份
getMonth 获取月份，取值为 0 ~ 11
getDate 获取月份中的每一天，不同月份取值也不相同
getDay 获取星期，取值为 0 ~ 6
getHours 获取小时，取值为 0 ~ 23
getMinutes 获取分钟，取值为 0 ~ 59
getSeconds 获取秒，取值为 0 ~ 59
时间戳是指1970年01月01日00时00分00秒起至现在的总秒数或毫秒数，它是一种特殊的计量时间的方式。
注：ECMAScript 中时间戳是以毫秒计的。
xxxxxxxxxx91 // 1. 实例化2 const date = new Date()3 // 2. 获取时间戳4 console.log(date.getTime())5// 还有一种获取时间戳的方法6 console.log(+new Date())7 // 还有一种获取时间戳的方法8 console.log(Date.now())9获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()
掌握元素节点创建、复制、插入、删除等操作的方法，能够依据元素节点的结构关系查找节点
回顾之前 DOM 的操作都是针对元素节点的属性或文本的，除此之外也有专门针对元素节点本身的操作，如插入、复制、删除、替换等。
在已有的 DOM 节点中插入新的 DOM 节点时，需要关注两个关键因素：首先要得到新的 DOM 节点，其次在哪个位置插入这个节点。
如下代码演示：
xxxxxxxxxx271<body>2 <h3>插入节点</h3>3 <p>在现有 dom 结构基础上插入新的元素节点</p>4 <hr>5 <!-- 普通盒子 -->6 <div class="box"></div>7 <!-- 点击按钮向 box 盒子插入节点 -->8 <button class="btn">插入节点</button>9 <script>10 // 点击按钮，在网页中插入节点11 const btn = document.querySelector('.btn')12 btn.addEventListener('click', function () {13 // 1. 获得一个 DOM 元素节点14 const p = document.createElement('p')15 p.innerText = '创建的新的p标签'16 p.className = 'info'17 18 // 复制原有的 DOM 节点19 const p2 = document.querySelector('p').cloneNode(true)20 p2.style.color = 'red'21 // 2. 插入盒子 box 盒子23 document.querySelector('.box').appendChild(p)24 document.querySelector('.box').appendChild(p2)25 })26 </script>27</body>结论：
createElement 动态创建任意 DOM 节点cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点appendChild 在末尾（结束标签前）插入节点再来看另一种情形的代码演示：
xxxxxxxxxx331<body>2 <h3>插入节点</h3>3 <p>在现有 dom 结构基础上插入新的元素节点</p>4 <hr>5 <button class="btn1">在任意节点前插入</button>6 <ul>7 <li>HTML</li>8 <li>CSS</li>9 <li>JavaScript</li>10 </ul>11 <script>12 // 点击按钮，在已有 DOM 中插入新节点13 const btn1 = document.querySelector('.btn1')14 btn1.addEventListener('click', function () {15 // 第 2 个 li 元素17 const relative = document.querySelector('li:nth-child(2)')18 // 1. 动态创建新的节点20 const li1 = document.createElement('li')21 li1.style.color = 'red'22 li1.innerText = 'Web APIs'23 // 复制现有的节点25 const li2 = document.querySelector('li:first-child').cloneNode(true)26 li2.style.color = 'blue'27 // 2. 在 relative 节点前插入29 document.querySelector('ul').insertBefore(li1, relative)30 document.querySelector('ul').insertBefore(li2, relative)31 })32 </script>33</body>结论：
createElement 动态创建任意 DOM 节点cloneNode 复制现有的 DOM 节点，传入参数 true 会复制所有子节点insertBefore 在父节点中任意子节点之前插入新节点删除现有的 DOM 节点，也需要关注两个因素：首先由父节点删除子节点，其次是要删除哪个子节点。
xxxxxxxxxx221<body>2 <!-- 点击按钮删除节点 -->3 <button>删除节点</button>4 <ul>5 <li>HTML</li>6 <li>CSS</li>7 <li>Web APIs</li>8 </ul>9 <script>11 const btn = document.querySelector('button')12 btn.addEventListener('click', function () {13 // 获取 ul 父节点14 let ul = document.querySelector('ul')15 // 待删除的子节点16 let lis = document.querySelectorAll('li')17 // 删除节点19 ul.removeChild(lis[0])20 })21 </script>22</body>结论：removeChild 删除节点时一定是由父子关系。
DOM 树中的任意节点都不是孤立存在的，它们要么是父子关系，要么是兄弟关系，不仅如此，我们可以依据节点之间的关系查找节点。
xxxxxxxxxx221<body>2 <button class="btn1">所有的子节点</button>3 <!-- 获取 ul 的子节点 -->4 <ul>5 <li>HTML</li>6 <li>CSS</li>7 <li>JavaScript 基础</li>8 <li>Web APIs</li>9 </ul>10 <script>11 const btn1 = document.querySelector('.btn1')12 btn1.addEventListener('click', function () {13 // 父节点14 const ul = document.querySelector('ul')15 // 所有的子节点17 console.log(ul.childNodes)18 // 只包含元素子节点19 console.log(ul.children)20 })21 </script>22</body>结论：
childNodes 获取全部的子节点，回车换行会被认为是空白文本节点children 只获取元素类型节点xxxxxxxxxx391<body>2 <table>3 <tr>4 <td width="60">序号</td>5 <td>课程名</td>6 <td>难度</td>7 <td width="80">操作</td>8 </tr>9 <tr>10 <td>1</td>11 <td><span>HTML</span></td>12 <td>初级</td>13 <td><button>变色</button></td>14 </tr>15 <tr>16 <td>2</td>17 <td><span>CSS</span></td>18 <td>初级</td>19 <td><button>变色</button></td>20 </tr>21 <tr>22 <td>3</td>23 <td><span>Web APIs</span></td>24 <td>中级</td>25 <td><button>变色</button></td>26 </tr>27 </table>28 <script>29 // 获取所有 button 节点，并添加事件监听30 const buttons = document.querySelectorAll('table button')31 for(let i = 0; i < buttons.length; i++) {32 buttons[i].addEventListener('click', function () {33 // console.log(this.parentNode); // 父节点 td34 // console.log(this.parentNode.parentNode); // 爷爷节点 tr35 this.parentNode.parentNode.style.color = 'red'36 })37 }38 </script>39</body>结论：parentNode 获取父节点，以相对位置查找节点，实际应用中非常灵活。
xxxxxxxxxx221<body>2 <ul>3 <li>HTML</li>4 <li>CSS</li>5 <li>JavaScript 基础</li>6 <li>Web APIs</li>7 </ul>8 <script>9 // 获取所有 li 节点10 const lis = document.querySelectorAll('ul li')11 // 对所有的 li 节点添加事件监听13 for(let i = 0; i < lis.length; i++) {14 lis[i].addEventListener('click', function () {15 // 前一个节点16 console.log(this.previousSibling)17 // 下一下节点18 console.log(this.nextSibling)19 })20 }21 </script>22</body>结论：
previousSibling 获取前一个节点，以相对位置查找节点，实际应用中非常灵活。nextSibling 获取后一个节点，以相对位置查找节点，实际应用中非常灵活。