JS基础知识day11

最新推荐文章于 2024-07-29 13:58:45 发布

是阿竹呀

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量90

点赞数 2

分类专栏： JS学习文章标签： javascript css html

本文链接：https://blog.csdn.net/lxz1151184225/article/details/122115641

版权

JS学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

知识点回顾：

DOM操作

页面的宽高 --- clientHeight / scrollHeight / scrollTop

标签的内容操作 innerHTML / innerText / value

标签的属性：

自有属性 obj.id obj.className/ classList

自定义属性 getAttribute() setAttribute() removeAttribute()

特殊标签的属性 disabled checked

标签的样式：

1 style.color 2 style.cssText 3 加类名

获取样式 getComputedStyle

获取元素

es6新加入

document.querySelector() 获取单个元素

document.querySelectorAll() 获取多个元素列表

自定义属性中包括：

css属性、html属性、js对象属性

DOM新增

1 innerHTML

2 创建一个文本节点 createTextNode()

创建标签节点 createElement()

DOM插入

在最后面插入 appendChild()

在指定的元素前面插入 insertBefore(要插入的元素 , 指定的元素)

<!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="a">
        <span>111</span>
    </div>

    <script>


        var oDiv = document.querySelector('.a') ;
        // oDiv.innerHTML = '<p>666</p>'


        // 1 创建一个标签  createElement
        var oP = document.createElement('p') ;
        console.log(oP);

        // 2 创建一个文本节点
        var oText = document.createTextNode('666');
        console.log(oText);

        // 3 添加子元素  把文本插入标签中
        oP.appendChild(oText) ;

        // 4 把p插入div中
        // oDiv.appendChild(oP)

        // 同一个标签只能操作一次 --- 标签是对象，对象都有唯一的地址
        // oDiv.appendChild(oP)

        // oDiv.innerHTML = oP ;   // 无法解析？


        var oSpan = document.querySelector('span') ;
        oDiv.insertBefore(oP , oSpan)

        



    </script>
    
</body>
</html>

两种方法的区别：

oP 在创建标签的时候，是一个对象

innerHTML 只能解析字符串

DOM删除

remove() 删除自己和所有的子元素

removeChild() 删除指定的子元素，只能删除儿子，不能删除孙子

innerHTML = '' 删除所有的子元素

DOM替换子元素

replaceChild(new , old)

DOM找父元素

parentNode

DOM找儿子

childNodes 子节点 --- 包含所有的文本，换行，标签，注释等等

children 子元素 --- 只包含标签

firstElementChild

lastElementChild

DOM找兄弟

previousElementSibling 前一个标签兄弟元素

nextElementSibling 后一个标签兄弟

previousSibling 前一个兄弟节点

nextSibling 后一个兄弟节点

克隆节点

cloneNode() 克隆节点 , 默认只复制标签

cloneNode(true) 克隆节点，包含子元素

重绘回流

重绘：重新绘画比如颜色的改变会引发页面重绘

回流：比如插队 display:none / block

重绘和回流都影响页面的响应速度

回流必引发重绘，但是重绘不一定引发回流

（回流的代价大于重绘）

重绘和回流是无法避免的；这个问题只能优化，不能解决

任何的DOM操作都会引发回流


        // 文档碎片 fragment
        var fragment = document.createDocumentFragment() ;
        console.log(fragment);

        for(var i = 0 ; i < 1000 ; i++) {
            var oP = document.createElement('p') ;
            oP.innerHTML = i ;
            fragment.appendChild(oP)
        }
        document.body.appendChild(fragment)

是阿竹呀

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础知识day11

知识点回顾：DOM操作页面的宽高 --- clientHeight / scrollHeight / scrollTop标签的内容操作 innerHTML / innerText / value标签的属性：自有属性 obj.id obj.className自定义属性 getAttribute() setAttribute() removeAttribute()...
复制链接

扫一扫