节点操作和别的零碎化知识

188 阅读3分钟

DOM节点

查找父节点:子元素.parentNode 返回最近一级的父节点 找不到返回null

查找子节点:

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

查找兄弟节点:

元素.nextElementSibling: 表示下一个兄弟节点.
元素.previousElementSibling: 表示上一个兄弟节点。

增加节点

我们想要创造一个新的网页元素,并将其添加到网页中,需要先创建节点, 然后再追加节点。

创建节点语法:document.createElement('标签名')

追加节点: 将创建好的节点追加到某个父元素中,才能在界面中看到.

父元素.appendChild(创建好的节点): 追加到父元素的最后一个位置.
父元素.insertBefor(a, b): 把 a 元素添加到 b 元素前面; 如果 b 元素获取不到, 会默认以 appendChild 形式添加

克隆节点语法:元素.cloneNode(布尔值)

说明: 复制一个原有的节点, 然后通过追加或插入的方式放到指定的位置.

注意:
若布尔值为true, 则表示克隆时会包含后代节点一起克隆.
若布尔值为false, 则表示克隆时不会包含后代节点.

删除节点

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

在JavaScript原生DOM操作中, 要删除元素必须通过父元素删除, 如果不存在父子关系, 则删除不成功.
注意:删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点

日期对象

获取当前时间的语法:const date = new Date()
获取指定时间的语法:const date1 = new Date('2022-5-1 08:30:00')

常用的获取日期方法:

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

注意: 获取的月份要记得加1, 星期的取值为0~6, 0代表是星期日.

时间戳: 是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式.
使用场景: 计算倒计时.

计算方式: 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数, 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是倒计时时间.

获取时间戳的几种方式:

  1. 使用 getTime() 方法

const n = new Date();
const re = n.getTime();
console.log(re);

  1. +new Date()方法

console.log(+new Date())

  1. 使用Date.now() console.log( Date.now() );

说明: 第三种方式只能能得到当前的时间戳, 而前面两种可以返回指定时间的时间戳。推荐第二种哦٩(๑❛ᴗ❛๑)۶

附一个js插件地址: swiper.com.cn/