ul.removeChild(this.parentNode);
}
}
}
}
</script>
[]( )1.3 复制克隆节点
-------------------------------------------------------------------------
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
[]( )1.4 案例：动态生成表格
----------------------------------------------------------------------------
代码如下（示例）：
[]( )二、创建元素的三种方式
==========================================================================
[]( )2.1 innerTHML和createElement效率对比
----------------------------------------------------------------------------------------------
**innerHTML字符串拼接方式（效率低）**
**createElement方式（效率一般）**
**innerHTML数组方式（效率高）**
注：innerHTML在不使用字符串拼接的方式（用数组接收元素），执行效率高。但createElement（）结构清晰。
[]( )三、DOM核心的总结
=========================================================================
[]( )3.1 创建元素
-----------------------------------------------------------------------
1、document.createElement
2、innerHTML
3、doucumen.write()
注：3存在页面重绘的问题，不推荐使用
[]( )3.2 增
--------------------------------------------------------------------
1、appendChild（）；
2、insertBefore（）；
[]( )3.3 删
--------------------------------------------------------------------
1、removeChild（）；
[]( )3.4 改
--------------------------------------------------------------------
主要修改Dom元素的内容、属性、表单值、样式等
1、修改元素的属性：src、title、alt等
2、修改元素的内容：innerHTML、innerText
3、修改表单元素：value、type、disabled、selected；
修改元素样式：style、className；
[]( )3.5 查（获取）
------------------------------------------------------------------------
主要是回去查询DOM元素
1、DOM提供的传统方法：getElementById（）、getElementByTagName（）
2、H5新增方法（推荐使用）：quserySelector（）、quserySelectorAll（）；
3、利用父、子、兄节点关系获取：父：parentNode；
子：children; 兄：（上一个兄弟）nextElementSibling、（下一个兄弟）previousElementSibling；
[]( )3.6 属性操作
-----------------------------------------------------------------------
1、设置自定义属性：setAttribute（‘属性名’，属性值）;
2、获取属性值：getAttribue（‘属性名’）；
3、移除属性：removeAttribute（‘属性名’）；
[]( )3.7 事件操作(重点)
---------------------------------------------------------------------------
[]( )四、事件高级
=====================================================================
[]( )4.1 注册事件的两种方式
----------------------------------------------------------------------------
[]( )4.2 事件监听
-----------------------------------------------------------------------
**addEventListener()事件监听（IE9以后支持）
注：addEventListener（）中的第三个参数是布尔型变量默认是flase，如果输入true，是阻止事件冒泡的意思（后面即将学习stopProtagation()）;**
**attachEventListener()事件监听（IE9以后支持）**
代码如下（示例）：
传统注册事件
方法监听注册事件
ie9 attachEvent
注：主要记住传统的用on绑定事件和addElementListener（）两种方式注册侦听事件；
[]( )4.3 事件监听兼容性解决方案
------------------------------------------------------------------------------
封装一个函数，函数中判断浏览器的类型：
[]( )4.4 删除事件（解绑事件）
-----------------------------------------------------------------------------
1
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
// 1. 传统方式删除事件
divs[0].onclick = null;
}
// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclick', fn1);
}
</script>
注：记住1、传统的解绑方式给鼠标点击事件赋值null；2、removeEventListener（）（常用）；
[]( )4.5 删除事件的兼容性解决方案（解绑事件）
-------------------------------------------------------------------------------------
[]( )4.6 DOM事件流
-------------------------------------------------------------------------
### []( )4.6.1 DOM事件流
> html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。
> 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。
>
> 那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？
比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。
> 当时的2大浏览器霸主谁也不服谁！
> IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流。
> Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流。
>
> 江湖纷争，武林盟主也脑壳疼！！！
>
> 最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —–— 先捕获再冒泡。
> 现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。
DOM 事件流会经历3个阶段：
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
#### []( )4.6.1.1 事件冒泡
代码如下（示例）：
<div class="son">son盒子</div>
</div>
<script>
// onclick 和 attachEvent（ie） 在冒泡阶段触发
// 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略
// son -> father ->body -> html -> document
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function() {
alert('son');
}, false);
// 给father注册单击事件
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
// 给document注册单击事件，省略第3个参数
document.addEventListener('click', function() {
alert('document');
})
</script>
#### []( )4.6.1.2 事件捕获
代码如下（示例）：
<div class="son">son盒子</div>
</div>
<script>
// 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
// document -> html -> body -> father -> son
var son = document.querySelector('.son');
// 给son注册单击事件，第3个参数为true
son.addEventListener('click', function() {
alert('son');
}, true);
var father = document.querySelector('.father');
// 给father注册单击事件，第3个参数为true
father.addEventListener('click', function() {
alert('father');
}, true);
// 给document注册单击事件，第3个参数为true
document.addEventListener('click', function() {
alert('document');
}, true)
</script>
注：addEventListener（）里的第三个参数是false时是冒泡阶段，输入true时是捕获阶段；
### []( )4.6.2事件对象
#### []( )4.6.2.1什么是事件对象
事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。
比如：
1. 谁绑定了这个事件。
2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。
#### []( )4.6.2.2 事件对象的使用
事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。
所以，在事件处理函数中声明1个形参用来接收事件对象。
#### []( )4.6.2.3 事件对象的兼容性处理
事件对象本身的获取存在兼容问题：
1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。
只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。
<div>123</div>
<script>
var div = document.querySelector('div');
div.onclick = function(e) {
// 事件对象
e = e || window.event;
console.log(e);
}
</script>
#### []( )4.6.2.4 事件对象的属性和方法
注：e.target 、 e.preventDefault() 、 e.stopProtagation() 三个事件对象的属性和方法常用，需牢记！！！
#### []( )4.6.2.5 e.target 和 this的区别
* this 是事件绑定的元素（绑定这个事件处理函数的元素） 。
* e.target 是事件触发的元素。
> 常情况下terget 和 this是一致的，
> 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
> 这时候this指向的是父元素，因为它是绑定事件的元素对象，
> 而target指向的是子元素，因为他是触发事件的那个具体元素对象。
<div>123</div>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function(e) {
// e.target 和 this指向的都是div
console.log(e.target);
console.log(this);
});
</script>
事件冒泡下的e.target和this
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// 我们给ul 绑定了事件 那么this 就指向ul
console.log(this); // ul
// e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
console.log(e.target); // li
});
</script>
### []( )4.6.3阻止默认行为
> html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。
<a href="http://www.baidu.com">百度</a>
<script>
// 2. 阻止默认行为 让链接不跳转
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
});
// 3. 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
e.returnValue = false;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
return false;
}
</script>
### []( )4.6.4 阻止事件冒泡
事件冒泡本身的特性，会带来的坏处，也会带来的好处。
代码如下（示例）：
<div class="son">son儿子</div>
</div>
<script>
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function(e) {
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
urn false 也能阻止默认行为 没有兼容性问题
return false;
}
</script>
### []( )4.6.4 阻止事件冒泡
事件冒泡本身的特性，会带来的坏处，也会带来的好处。
代码如下（示例）：
<div class="son">son儿子</div>
</div>
<script>
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function(e) {
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-hHyrXniX-1715021930158)]
[外链图片转存中…(img-MkLL0j2B-1715021930159)]
[外链图片转存中…(img-zRzsdsLr-1715021930159)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
