节点操作 时间对象

NIEandyou
285 阅读5分钟

WebAPIday-03笔记

目标：

  • 能够创建和添加节点
// 创建节点
document.creatElment('标签名')

// 添加节点
parent.appendChild(child)
  • 能够删除和复制节点
// 删除节点
parent.removeChild(child)

// 复制节点（克隆节点）
node.cloneNode(true)
作用属性
获取所有子节点（包括元素节点、注释节点、文本节点）childNodes
获取所有子元素（只有元素节点）children
获取第一个子节点（包括元素节点、注释节点、文本节点）firstChild
获取第一个子元素（只有元素节点）firstElementChild
获取最后一个子节点（包括元素节点、注释节点、文本节点）lastChild
获取最后一个子元素（只有元素节点）lastElementChild

节点操作 时间对象 综合案例 重绘和回流

掌握节点(标签)的增删改查

具备编写微博发布案例的能力

节点操作

  1. DOM 节点
  2. 查找节点
  3. 增加节点
  4. 删除节点

🔰DOM节点

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

🔰节点类型 元素节点 所有的标签 比如 body、 div html 是根节点 🔰属性节点 所有的属性 比如 href 🔰文本节点 所有的文本

1649607746368

  1. 什么是DOM 节点？ DOM树里每一个内容都称之为节点
  2. DOM节点的分类？ 元素节点 比如 div标签 属性节点 比如 class属性 文本节点 比如标签里面的文字
  3. 我们重点记住那个节点？ 元素节点 可以更好的让我们理清标签元素之间的关系

查找节点

目标：能够具备根据节点关系查找目标节点的能

  • 关闭二维码案例： 点击关闭按钮， 关闭的是二维码的盒子， 还要获取erweima盒子
  • 思考： 关闭按钮 和 erweima 是什么关系呢？ 父子关系 所以，我们完全可以这样做： 点击关闭按钮， 直接关闭它的爸爸，就无需获取erweima元素了
  • 节点关系： 父节点
    子节点 兄弟节点

父节点查找：

parentNode 属性
返回最近一级的父节点 找不到返回为null

1649613895222

1649608112825

1649614169367

1649614189431

子节点查找：

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

1649614268382

兄弟关系查找：

​ 1. 下一个兄弟节点 nextElementSibling 属性

​ 2. 上一个兄弟节点 previousElementSibling 属性

增加节点

.创建节点

即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点 创建元素节点方法：

1649614343259

增加节点

要想在界面看到，还得插入到某个父元素中 插入到父元素的最后一个子元素:

1649614966153

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

1649614952606

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

比如：点击发布按钮之后，在下方新增一条数据

页面增加节点步骤：

  1. 创建元素节点

  2. 页面中追加节点

    2000

**需求：**点击按钮之后，把div.red添加div.father里面

克隆节点

特殊情况下，我们新增节点，按照如下操作： 复制一个原有的节点 把复制的节点放入到指定的元素内部

克隆节点

1649615081914

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

  • 若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
  • 若为false，则代表克隆时不包含后代节点--浅拷贝
  • 默认为false

删除节点

若一个节点在页面中已不需要时，可以删除它 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

语法

1649615188178

parent.removeChild(child)

参数：

  • parent：要删除元素的父元素
  • child：需要删除的元素

注意、；如不存在父子关系则删除不成功 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象方法

目标：能够使用时间对象中的方法写出常见日期

因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

方法作用说明
getFullYear()获得年份获取四位年份
getMonth()获得月份取值为 0 ~ 11
getDate()获取月份中的每一天不同月份取值也不相同
getDay()获取星期取值为 0 ~ 6
getHours()获取小时取值为 0 ~ 23
getMinutes()获取分钟取值为 0 ~ 59
getSeconds()获取秒取值为 0 ~ 59

代码：

<body>
    <script>
        let data=new Date()

        //获取年份
        let year=data.getFullYear();
        //获取月份
        let month=data.getMonth();
        //获取几号
        let isdata=data.getDate();
        //获取周几
        // let day=data.getDay();
        //获取小时
        let hour=data.getHours();
        //获取分钟
        let minutes=data.getMinutes();
        //获取秒
        let seconds=data.getSeconds();
        document.write(`当前是:${year}年${ month}月${isdata}日${hour}时${minutes}分${seconds}秒`)
        
    </script>
</body>

时间戳

目标：能够获得当前时间戳

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

三种方式获取时间戳

  1. 使用 getTime() 方法

1649524123020

  1. 简写 +new Date()

1649524230293

  1. 使用 Date.now()

1649524260361

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

<body>
    <script>
     1.   let date=new Date()
        console.log(date.getTime());

     2.   console.log(+new Date());

     3.  console.log(Date.now());
    </script>
</body>

1649524878466

//前两种方式需要先创建一个日期对象

//优点在于可以传入你想获得得日期

//最后这种方式得优点在于不用创建对象

//缺点在于：不能指定日期，只能获取当前日期的时间戳

avatar
文章
阅读
粉丝