DOM03~

DOM 节点

节点操作

时间对象

综合案例

重绘和回流

节点操作

DOM 节点

查找节点

增加节点

删除节点

  1. 什么是 DOM 节点？

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

    1.2 元素节点 属性节点 文本节点 其他

    1.3 作用：理清标签元素之间的关系

  2. 查找节点

    2.1 节点关系

    • 父节点

    • 子节点

    • 兄弟节点

    2.2 查找父节点

    • 子元素.parentNode

    • parentNode 属性

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

    2.3 查找子节点

    • 父元素.childNode 获得所有子节点，包括文本节点(空格、换行)、注释节点等

    • 父元素.children 仅获得所有元素节点 返回的是一个伪数组、

    2.4 查找兄弟节点

    • 兄弟元素.nextElementSilbling 下一个兄弟节点

    • 兄弟元素.previousElementSibling 上一个兄弟节点

    2.5 demo

<!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>
    <div class="father">
        <div>1</div>
        <div class="son">儿子</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
​
    <script>
        // 查找父节点
        let son = document.querySelector('.son')
        console.log(son.parentNode);
​
        // 查找子节点
        let father = document.querySelector('.father')
        // 获得所有子节点，包括文本节点、注释节点等
        console.log(father.childNodes);
        // 仅获得所有元素节点 返回的是一个伪数组
        console.log(father.children);
​
        // 查找兄弟节点
        console.log(son.previousElementSibling);
        console.log(son.nextElementSibling);
    </script>
</body>
</html>

  1. 增加节点

    3.1 创建元素节点

    • 语法： document.createElement('标签名')

    3.2 追加元素节点

    • 语法： 父元素.appendChild(子元素) 插入到父元素的最后一个子元素

    • 语法： 父元素.insertBefore(要插入的元素，放到那个元素前面) 插入到父元素中某个子元素的前面

    3.3 demo

<!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>
    <ul>
        <li>我是一个li</li>
    </ul>
    <script>
        // 创建新的标签节点
        let li = document.createElement('li')
        li.className = 'current'
        li.innerHTML = '我是另一个li'
        let ul = document.querySelector('ul')
​
        let li1 = document.createElement('li')
        li1.innerHTML = '我是最前的li'
​
        // 追加新的标签元素
        ul.appendChild(li)
​
        // 追加新的标签元素
        ul.insertBefore(li1,li)
    </script>
</body>
</html>

  1. 克隆节点

    4.1 语法：元素.cloneNode(布尔值)

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

    4.3 若为 false，克隆时不包含后代节点

    4.4 默认为 false

    4.5 demo

<!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>
    <ul>
        <li>我是内容</li>
    </ul>
​
    <script>
        // 获取元素
        let ul = document.querySelector('ul')
        // 克隆元素
        let newUl = ul.cloneNode(true)
        document.body.appendChild(newUl)
    </script>
</body>
</html>

  1. 删除元素

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

    5.2 js 原生 DOM 操作中，删除元素必须通过父元素删除

    5.3 如不存在父元素则删除不成功

    5.4 删除节点和隐藏节点有区别，隐藏节点还是存在的，删除则从 html 中删除

    5.5 demo

<!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>
    <button>点击删除元素节点</button>
    <ul>
        <li>我是内容11111</li>
    </ul>
​
    <script>
        // 获取元素
        let btn = document.querySelector('button')
        let ul = document.querySelector('ul')
        // 事件监听
        btn.addEventListener('click', function() {
            // 删除元素
            // children 返回值 伪数组
            ul.removeChild(ul.children[0])
        })
    </script>
</body>
</html>

时间对象

实例化

时间对象方法

时间戳

  1. 什么是时间对象？

    • 用来表示时间的对象

    • 作用：得到当前系统的时间

  2. 实例化

    2.1 语法 let date = new Date()

  3. 时间对象方法

    时间对象方法

  4. 时间戳

    4.1 什么是时间戳？

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

    4.2 三种方式获取时间戳

    • getTime() -- 需要实例化 当前时间的时间戳 或 指定时间的时间戳

    • "+" newDate() -- 需要实例化 当前时间的时间戳 或 指定时间的时间戳

    • Date.now() -- 无需实例化 只能得到当前时间的时间戳

    4.3 demo

<!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>
    <div></div>
​
    <script>
        setInterval(function() {
            // 当前时间的时间戳
            let now = + new Date()
            console.log(+ new Date());
            // 指定时间的时间戳
            let futrue = + new Date('2022-6-01 18:28:00')
            console.log(+ new Date('2022-6-01 18:28:00'));
            // 倒计时
            // 计算剩余秒数
            let count = (futrue - now) / 1000
            console.log(typeof count);
            // 转化为 时分秒
            // 时
            let hour = parseInt(count / 60 /60 % 24)
            hour = hour < 10 ? '0' + hour : hour
            // 分
            let min = parseInt(count /60 % 60)
            min = min < 10 ? '0' + min : min
            // 秒
            let sec = parseInt(count % 60)
            sec = sec < 10 ? '0' + sec : sec
            // 打印输出
            console.log(hour,min,sec);
​
            let div = document.querySelector('div')
            div.innerHTML = `${hour}时${min}分${sec}秒`
        }, 1000)
    </script>
</body>
</html>

综合案例

案例 微博发布

重绘和回流(重排)

重绘

回流/重排

  1. 浏览器如何进行 HTML 渲染的？

    • 解析 Parser HTML，生成 DOM 树 DOM Tree

    • 同时解析 Parser CSS，生成渲染规则 Style Rules

    • 根据 DOM 树和样式规则，生成渲染树 Render Tree

    • 进行布局 Layout：根据生成的渲染树，得到节点的几何信息（位置，大小）-- 回流/重排

    • 进行绘制 Painting：根据计算和获取的信息进行整个页面的绘制 -- 重绘

    • 展示在页面上

  2. 什么是回流/重排？

    • 当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程

  3. 什么是重绘？

    • 由于节点即元素的样式的改变并不影响它在文档流中的位置和文档布局时，称为重绘

  4. 重绘不一定引起回流/重排，回流/重绘一定会引起重绘

posted @   litilestar  阅读(188)  评论(0)  编辑  收藏  举报
相关博文：
· DOM01~
· DOM04~
· WebAPI_DAY3_DOM节点和时间戳
· 日期对象与节点操作与重构回流
· DOM操作之节点操作
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示