API（DOM-节点操作）

最新推荐文章于 2024-06-09 18:24:15 发布

zmmbbxx

最新推荐文章于 2024-06-09 18:24:15 发布

阅读量130

点赞数

文章标签： java javascript servlet

本文链接：https://blog.csdn.net/zmmas/article/details/127032524

版权

一、节点操作

1. DOM节点

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

1.1 节点类型：

元素节点：

所有的标签，比如 body、 div

html 是根节点

属性节点：

所有的属性，比如 href

文本节点：

所有的文本

2. 查找节点

节点关系：父节点、子节点、兄弟节点

父节点查找：

parentNode 属性；

返回最近一级的父节点找不到返回为null。

        let son = document.querySelector('.son')
        // 找爸爸
        // console.log(son.parentNode)  这里是通过控制台看是否打印父节点
        // parentNode 就是要找父亲的意思
        son.parentNode.style.display = 'none'

子节点查找：

childNodes ：获得所有子节点、包括文本节点（空格、换行）、注释节点等。

children （重点）：仅获得所有元素节点；返回的还是一个伪数组。

兄弟关系查找：

a . 下一个兄弟节点

nextElementSibling 属性

b. 上一个兄弟节点

previousElementSibling 属性

3. 增加节点

1.1 创建节点

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

创建元素节点方法：

1.2 追加节点

要想在界面看到，还得插入到某个父元素中

a. 插入到父元素的最后一个子元素:

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

1.3 克隆节点

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

若为true，则代表克隆时会包含后代节点一起克隆;

若为false，则代表克隆时不包含后代节点;

默认为false.

        let ul = document.querySelector('ul')
        // 父级.cloneNode(布尔值)  
        /*  布尔值为false，则不克隆后代节点；是true则克隆后代节点 */
        let newUl = ul.cloneNode(true)
        // 追加克隆节点
        document.body.appendChild(newUl)

4. 删除节点

若一个节点在页面中已不需要时，可以删除它;

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除.

语法：

注意：

如不存在父子关系则删除不成功；

删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点。

二、时间对象

时间对象：用来表示时间的对象。

作用：可以得到当前系统时间。

1. 实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化。

创建一个时间对象并获取时间：

获得当前时间：

获得指定时间：

2. 时间对象方法

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

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

        // new  实例化   事件对象
        // 小括号为空可以得到当前的时间

        // 年月日
        let date = new Date()
        console.log(date.getFullYear())
        console.log(date.getMonth() + 1)  //getMonth只有0-11
        console.log(date.getDate())
        // 时分秒
        console.log(date.getHours())
        console.log(date.getMinutes())
        console.log(date.getSeconds())
        // 星期
        console.log(date.getDay())     //0-6

3. 时间戳

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

三种方式获取时间戳：

1. 使用 getTime() 方法

        // 1. 第一中方法  getTime()
         let date = new Date()
         console.log(date.getTime())

2. 简写 +new Date()

        // 2. 第二种方法  +new Date()  //当前的时间戳
        console.log(+new Date())
        console.log(+new Date('2022-9-24  12:00:00'))    //指定时间的时间戳

3. 使用 Date().now()

        // 3. 第三种方法  Date.now()    只能得到当前，不能得到以前的
         console.log(Date.now())

注意：

1. 通过时间戳得到是毫秒，需要转换为秒在计算。

2. 转换公式：

    d = parseInt(总秒数/ 60/60 /24); // 计算天数
    h = parseInt(总秒数/ 60/60 %24) // 计算小时
    m = parseInt(总秒数 /60 %60 ); // 计算分数
    s = parseInt(总秒数%60); // 计算当前秒数