javaScript 08 DOM节点操作、日期函数

初映CY的前说

已于 2023-01-30 13:32:54 修改

阅读量515

点赞数 3

分类专栏： javaScript 文章标签： javascript 前端 html html5 css

于 2022-12-06 21:08:13 首次发布

本文链接：https://blog.csdn.net/m0_61118311/article/details/128202028

版权

javaScript 专栏收录该内容

17 篇文章 6 订阅

订阅专栏

🥳博主：初映CY的前说(前端领域)

🌞个人信条：想要变成得到，中间还有做到！

🤘本文核心：创建追加DOM节点、格式化日期对象

一、DOM节点

什么是节点：

DOM树里每一个内容都称之为节点节点。

1.1节点操作

1.获取父节点（注意：返回最近一级的父节点 找不到返回为null）

子元素.parentNode

2.获取子节点

注意：

childNodes 获得所有子节点、包括文本节点（空格、换行）、注释节点等
children 仅获得所有元素节点返回的还是一个伪数组 (重点)

父节点.childNodes
父节点.children

3.获取兄弟节点

元素.nextElementSibling // 获取下一个兄弟
元素.previousElementSibling // 获取上一个兄弟

1.2创建节点

1.为什么需要创建节点

很多情况下，我们需要在页面中增加元素

比如，点击发布按钮，可以新增一条信息

一般情况下，我们新增节点，按照如下操作：

创建一个新的节点

把创建的新的节点放入到指定的元素内
const 变量名 = document.createElement('标签名')

当我点击点我创建的时候，控制台可看到输出的内容

2.3追加创建的节点

// 插入到这个父元素的最后面
父元素.appendChild(要追加的子元素)

3. 定点追加

父元素.insertBefore(要追加的子元素,在那个元素的前面追加)

1.3删除节点

二、日期函数

1.实例化日期

// 获取当前日期对象
const 变量 = new Date() 
// 获取指定日期对象 语法
const 变量 = new Date('时间字符串')

2.日期对象方法（过一下就可以）

<!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>
    // 1.创建日期对象
    const n = new Date()
    
    const y = n.getFullYear()//获取年份
    const m = n.getMonth()+1//获取月份0-11+1
    const dd = n.getDate()//1-31
    const h = n.getHours()//0-23
    const mm = n.getHours()//0-59
    const s = n.getSeconds()//0-59
    const w = n.getDay() //0-6 +1
     console.log(w);
     
  </script>
</body>
</html>

2.1来个案例体验下

<!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>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      /* align-items: center; */
    }

    .box {
      margin-top: 100px;
      width: 250px;
      height: 50px;
      background-color: pink;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <script>

const box = document.querySelector('.box')
    function fn() {

      let n = new Date()
      let y = n.getFullYear()//获取年份
      let m = n.getMonth() + 1//获取月份0-11+1
      let dd = n.getDate()//1-31
      let h = n.getHours()//0-23
      let mm = n.getHours()//0-59
      let s = n.getSeconds()//0-59
      let w = n.getDay() //0-6 +1

      m = padZero(m)
      dd = padZero(dd)
      h = padZero(h)
      mm = padZero(mm)
      s = padZero(s)

      const str = `${y}-${m}-${dd} ${h}:${mm}:${s}`
      box.innerHTML = str
    }
    fn()
  //动起来加个定时器就可以了，每次调用方法实时刷新 
    setInterval(fn,1000)
    

    function padZero(m) {
    return m<10? `0${m}`:m
    }

  </script>
</body>

</html>

3.时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

// 使用 日期对象.getTime()
const date = new Date()
const 变量 = date.getTime()
// 使用 +new Date()
const 变量 = +new Date()
// 使用 Date.now()
Date.now()

初映CY的前说

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaScript 08 DOM节点操作、日期函数

本文概述：创建追加DOM节点、格式化日期对象（了解的知识认识即可）
复制链接

扫一扫

专栏目录

javaScript 08 DOM节点操作、日期函数

一、DOM节点

1.1节点操作

1.2创建节点

1.3删除节点

二、日期函数

1.实例化日期

2.日期对象方法（过一下就可以）

3.时间戳

“相关推荐”对你有帮助么？