博学谷学习记录 | 学习总结，用心分享 | 前端学习之Web APIs（四）

程序二次猿

已于 2023-02-15 10:00:53 修改

阅读量41

点赞数

文章标签：前端学习 javascript html 开发语言

于 2023-02-11 17:58:41 首次发布

本文链接：https://blog.csdn.net/m0_47321226/article/details/128841993

版权

1 日期对象

1.1 实例化

使用 new 关键字创建一个日期对象（创建对象的过程也叫实例化）

1.获取当前时间

2.获取指定时间

代码展示：

  <script>
    // 实例化  new 
    // 1. 得到当前时间 
    const date = new Date()
    console.log(date)
    // 2. 指定时间
    const date1 = new Date('2023-5-1 08:30:00')
    console.log(date1)
  </script>

结果展示：

1.2 对象方法

代码展示：

  <script>
    // 获得日期对象
    const date = new Date()
    // 使用里面的方法
    console.log(date.getFullYear())
    console.log(date.getMonth() + 1)  // 月份要 + 1
    console.log(date.getDate())
    console.log(date.getDay())  // 星期几，周日为0
  </script>

结果：

1.3 时间戳

1.定义

时间戳是指1970年01月01日00时00分00秒起至现在的毫秒数。

2.获取时间戳的方式

（1）使用 getTime() 方法

const date = new Date()

（2）简写 +new Date()

console.log(+new Date())

（3）使用 Date.now()

无需实例化，但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

console.log(Date.now())

2 节点操作

2.1 DOM节点

DOM树里每一个内容都称之为节点（很抽象啊），节点有很多类型，比如元素节点、属性节点、文本节点等等。

2.2 查找节点

1.父子节点

查询父子节点会用到以下几个语法：

子元素.parentNode
父元素.childNodes
父元素.children

子元素.parentNode 仅是用来查询父元素的，父元素.childNodes 则会返回所有孩子节点（包括元素节点、文本节点、注释节点等等），而父元素.children 只会得到所有的元素节点（并且返回一个伪数组）。

<body>
  <div class="yeye">
    <div class="dad">
      <div class="baby">x</div>
    </div>
  </div>
  <script>
    const baby = document.querySelector('.baby')
    console.log(baby)  // 返回dom对象
    console.log(baby.parentNode)  // 返回dom对象
    console.log(baby.parentNode.childNodes)  // 返回所有子节点
  </script>
</body>

2.兄弟节点

（1）下一个兄弟节点

nextElementSibling 属性
（2）上一个兄弟节点
previousElementSibling 属性

<body>
  <div class="grandpa">
    <div class="dad">
      <div class="babysis">sister</div>
      <div class="baby">x</div>
      <div class="babybro">brother</div>
    </div>
  </div>
  <script>
    const baby = document.querySelector('.baby')
    console.log(baby.previousElementSibling);
    console.log(baby.nextElementSibling);
  </script>
</body>

2.3 增加节点

在陈述如何增加节点前，需要先说明为什么要增加节点。假设我们需要做一个评论列表，由于在设计列表时我们无法确定列表里的评论数量，因此也无法在 ul 标签内写上固定数量的 li 标签，我们只能在用户使用评论功能时，将一条条的评论加到 ul 标签内，这就是“增加节点”的应用场景之一。

1.创建节点

在增加节点之前，我们需要创建元素节点，创建节点的方法如下：

  <script>
    // 创建节点
    const div = document.createElement('div')
    const li = document.createElement('li')
  </script>

2.追加节点

创建完节点之后，我们就需要把它添加到某个位置上去，

（1）使用 appendChild 方法是将该节点插入到父元素的最后一个位置上去，

  <script>
    
    const body = document.querySelector('body')
    // 1. 创建节点 ul li
    const ul = document.createElement('ul')
    const li = document.createElement('li')

    // 2. 给li标签里添加内容
    li.innerHTML = '这是一个新增加的li标签'

    // 3. 将ul添加到body里，再将li添加到ul里
    body.appendChild(ul)
    ul.appendChild(li)

  </script>

（2）使用 insertBefore 方法是将该元素插入到父元素中某个子元素的前面，

<body>
  <ul>
    <li>我是老大</li>
  </ul>

  <script>
    // 创建节点 
    const ul = document.querySelector('ul')
    const li = document.createElement('li')
    li.innerHTML = '我是li'
    // 追加节点
    // insertBefore(插入的元素, 放到哪个元素的前面)
    ul.insertBefore(li, ul.children[0])
    
  </script>
</body>

（3）克隆节点（再添加）

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
① 若为true，则代表克隆时会包含后代节点一起克隆
② 若为false，则代表克隆时不包含后代节点
③ 默认为false

下面的代码先是克隆一个 ul.children[0] 节点然后添加到 ul 标签的最后，由于其没有后代，所以括号内 true or false 无所谓，

之后再克隆 ul 标签，若括号内为 true ，则将 ul 以及其所有子元素全部克隆，若为 false ，则仅克隆 ul 标签，

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const body = document.querySelector('body')
    const ul = document.querySelector('ul')
    // 1 克隆节点  元素.cloneNode(true)
    // const li1 = ul.children[0].cloneNode(true)
    // console.log(li1)
    // 2. 追加
    ul.appendChild(ul.children[0].cloneNode(true))
    body.appendChild(ul.cloneNode(true))
    body.appendChild(ul.cloneNode()) //false可写可不写
  </script>
</body>

ul.cloneNode(true)

2.4 删除节点

当我们不需要某个节点时，就需对它进行删除操作，其语法如下：

该语法里的父元素必须严格遵守父子关系，如果不是父子关系则会报错，

<body>
  <ul>
    <li>没用了</li>
  </ul>
  <script>
    const body = document.querySelector('body')
    const ul = document.querySelector('ul')
    // 删除节点  父元素.removeChlid(子元素)
    body.removeChild(ul.children[0])
    ul.removeChild(ul.children[0])
  </script>
</body>

遵循父子关系的写法，

<body>
  <div class="box">123</div>
  <ul>
    <li>没用了</li>
  </ul>
  <script>
    const body = document.querySelector('body')
    const ul = document.querySelector('ul')
    const div = document.querySelector('div')
    // 删除节点  父元素.removeChlid(子元素)
    body.removeChild(div)
    ul.removeChild(ul.children[0])
  </script>
</body>