JSDOM和BOM学习第二天（下）

JS BOM 和 DOM 学习第二天 （下）

在这里插入图片描述

目录

1. 创建元素的效率对比示例

1.1 innerHTML字符串拼接

<!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>
        // 使用字符串拼接效率
        var d1=new Date();
        var div=document.querySelector('div');
        for(var i=0;i<1000;i++){
            div.innerHTML+='<a href="#">666</a>';
        }
 
        var d2=new Date();
 
        console.log(d2-d1);
    </script>
</body>
</html>
  • 效果图

在这里插入图片描述

1.2 innerHTML数组

<!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>
        // 使用字符串拼接效率
        var d1=new Date();
        var div=document.querySelector('div');
        var arr=[];
        for(var i=0;i<1000;i++){
            
            arr.push('<a href="#">666</a>');
        }
 
        div.innerHTML=arr.join('');
 
        var d2=new Date();
 
        console.log(d2-d1);
    </script>
</body>
</html>
  • 效果图

在这里插入图片描述

1.3 creatElement 效率

<!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>
        // 使用字符串拼接效率
        var d1=new Date();
        var div=document.querySelector('div');
        for(var i=0;i<1000;i++){
            var a=document.createElement('a');
            a.innerHTML='666';
            a.href='#';
            div.appendChild(a);
        }
 
        var d2=new Date();
 
        console.log(d2-d1);
    </script>
</body>
</html>
  • 效果图

在这里插入图片描述

总结

  • 不同浏览器下，innerHTML效率比creatElement效率高

2. Dom重点核心

2.1 创建

  • document.write
  • innerHTML
  • createElement

2.2 增

  • appendChild
  • insertBefore

2.3 删

  • removeChild

2.4 改

  • 修改元素属性：src,href,title
  • 修改普通元素内容：innerHTML,innerText
  • 修改表单元素：value,type,disabled
  • 修改元素样式：style,className

2.5 查

  • DOM的API：getElementById，getElementByTagName（不提倡）
  • h5新增方法：querySelector，querySelectorAll（提倡）
  • 利用节点操作：父（parentNode），子（childeren），兄（previousElementSibling，nextElementSinling）

2.6 属性操作

  • setAttribute（）：设置DOM属性
  • getAttribute（）：获取DOM属性
  • removeAttribute():删除DOM属性

事件操作

  • 注册事件：事件源.事件类型=事件处理程序
posted @   凌歆  阅读(13)  评论(0)  编辑  收藏  举报
相关博文：
· JS的DOM和BOM学习第二天（上）
· JS的DOM和BOM学习第一天
· JS学习——day2
· day09 --> 【JavaScript（BOM、DOM事件）】
· 前端学习倒数第二天
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示