初识JS_WebAPI基础Day3——笔记整理+1课后作业...

最新推荐文章于 2020-10-24 17:59:06 发布

UndeFIned丶

最新推荐文章于 2020-10-24 17:59:06 发布

阅读量670

点赞数 1

分类专栏： JavaScript学习文章标签： js

Atuthor:Chen.orange

本文链接：https://blog.csdn.net/weixin_46313446/article/details/106161740

版权

本文详细介绍了JavaScript中关于DOM节点的操作，包括删除、复制、创建元素的三种方式，以及innerTHML与createElement的效率比较。此外，还深入探讨了事件监听、事件对象、事件冒泡与阻止事件、事件委托等高级事件处理概念，同时提供了一个动态添加列表并实现点击效果的实践题目。

摘要由CSDN通过智能技术生成

一.节点操作

文章目录
1 . 删除节点
2. 复制（克隆）节点
3. 创建元素的三种方式
4. innerTHML和createElement效率对比
5.DOM学习总结
二.事件高级
1 . 事件监听
2. 事件监听兼容性解决方案
3. 删除事件（解绑事件）
4. 删除事件兼容性解决方案
5. 事件对象
6. e.target 和 this 的区别
7.阻止默认行为
7. 阻止事件冒泡
8.事件委托
9.鼠标事件对象

1. 删除节点

在这里插入图片描述
node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

 //  删除元素  node.removeChild(child)
 ul.removeChild(ul.children[0]);

2. 复制（克隆）节点

在这里插入图片描述

// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容

3. 创建元素的三种方式

在这里插入图片描述

4. innerTHML和createElement效率对比

innerHTML字符串拼接方式（效率低）

<script>
    function fn() {
   
        var d1 = +new Date();
        var str = '';
        for (var i = 0; i < 1000; i++) {
   
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
        }
        var d2 = +new Date();
        console.log(d2 - d1);
    }
    fn();
</script>