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 @ 2022-02-26 12:18  凌歆  阅读(24)  评论(0)    收藏  举报