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秒起至现在的毫秒数,它是一种特殊的计量时间的方式.
使用场景: 计算倒计时.
计算方式: 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数, 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是倒计时时间.
获取时间戳的几种方式:
- 使用 getTime() 方法
const n = new Date();
const re = n.getTime();
console.log(re);
- +new Date()方法
console.log(+new Date())
- 使用Date.now()
console.log( Date.now() );
说明: 第三种方式只能能得到当前的时间戳, 而前面两种可以返回指定时间的时间戳。推荐第二种哦٩(๑❛ᴗ❛๑)۶
附一个js插件地址: swiper.com.cn/