Web API -- DOM4

Web API – DOM4

dom4

1. 日期对象有何作用？

   日期对象是用来表示时间的对象，它可以让网页显示时间，即能获取到系统的当前时间。

   在代码中使用了new关键字是，可以将该操作称之为实例化。

   如何实现：

   首先要创建一个日期对象并获取时间。

   • 获取当前时间：const date = new Date() console.log(date)

   • 要想获得指定时间可在括号内写入指定时间。

   例如：const date = new Date('2023-08-07') console.log(date)

   日期对象包含了如下方法：

   getFullYear()用于获取年份（四位数年份，例如：1919）

   getMonth() 用于获取月份 （从零开始，取值范围：0-11）

   getDate() 用于获取月份中的每一天 （不同月份取值不相同，如2月有28天，1月有31天）

   getDay() 用于获取星期 （从零开始，取值范围：0-6）

   getHours() 用于获取小时 （从零开始，取值范围：0-23）

   getMinutes() 用于获取分钟 （从零开始，取值范围：0-59）

   getSeconds() 用于获取秒 （从零开始，取值范围：0-59）

   时间戳：是一种特殊的计量时间的方式。是指从1970年01月01日00时00分00秒起至现在的毫秒数。倒计时器常用的方法。

   算法：

   剩余时间毫秒数=将来的时间戳-现在的时间戳

   获取时间戳的方式：

   • 使用getTime()方法 ，便能得到剩余的时间毫秒数

   例如：const date = new Date()

   console.log(date.getTime())

   • 使用+new Date()方法

   例如：const date = new Date()

   console.log(+new Date())

   • 使用Date.now()方法

   不用实例化，即不用写 new Date()。但只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳。

   例子：``console.log(Date.now()）`

2. 节点操作有哪些？

   先来看看这个图：
   

   这个图实际就是一个DOM树（倒着的树，HTML是根），DOM树里的每个内容就是节点。

   DOM节点类型有（图中都已经明确标出了节点类型）：

   • 元素节点（标签节点，如head、body等）
   • 属性节点（指的是所有属性）
   • 文本节点（指所有的文本）
   • 其他

   接下来要讲的是节点操作。

   操作1：查找节点

   先说说：当你要查找某个人，很难找到他本人，就会试着从他的父母、兄弟姐妹、朋友找起，这实际就是利用关系找起。

   节点的关系有父子关系，有兄弟关系。

   其实查找节点也是得利用节点关系来查找。

   • 查找父节点：语法：子元素-parentNode

   注意：会返回最近一级的父节点，找不到返回null。

   • 查找子节点：语法：父元素.children

   注意：会返回一个伪数组；仅仅获得所有子节点。

   另一个语法：父元素.childNodes

   注意：获得所有子节点，包括文本节点（空格、换行）、注释节点等。

   • 兄弟关系查找：

   下一个兄弟节点：使用nextElementSibling属性

   上一个兄弟节点：使用previousElementSibling属性

   操作2：增加节点

   增加节点的步骤：先创建一个节点，再插入一个节点。

   创建一个节点的方法：document.createElement('标签名')

   在末尾插入节点：父元素.appendChild(要插入的元素)

   插入到父元素中的某个子元素的前面：

   父元素.insertBefore(要插入的元素，在哪个元素的前面)

   有一种特殊情况就是，我们增加的这个节点有原型，这个时候只要复制原有的节点，再把复制的节点放入到指定元素的内部。

   克隆节点：元素.cloneNode(布尔值)

   布尔值若为true，则代表克隆时会连带后代节点一起克隆。

   若为false，则代表克隆时不会克隆后代节点（只会克隆该节点）。

   默认：false。

   操作3：删除节点

   不想要的节点可以进行删除，通过父元素删除。

   语法：父元素.removeChild(要删除的元素)

   注意：要是不存在父子关系就会删除不成功。

   删除节点后节点不存在了，隐藏节点后节点依旧存在。

3. 常见的移动端事件有哪些？

   常见的移动端事件就是触摸事件（又名触屏事件）touch。

   touch对象代表一个触摸点。只要是触摸点（如用手指或者触摸笔）都能够触发事件。

   常见的触屏事件：

   touchstart //手指触摸到一个DOM元素时触发

   touchmove //手指在一个DOM元素滑动时触发

   touchend //手指在一个DOM元素上移开时触发

4. 什么是插件？

摸点。只要是触摸点（如用手指或者触摸笔）都能够触发事件。

常见的触屏事件：

touchstart //手指触摸到一个DOM元素时触发

touchmove //手指在一个DOM元素滑动时触发

touchend //手指在一个DOM元素上移开时触发

4. 什么是插件？

   插件：指的是利用别人写好的代码，我们复制就能获得符合自己要求的效果。