ul.removeChild(this.parentNode);
}
}
}
}
</script>
[]( )1.3 复制克隆节点
-------------------------------------------------------------------------
![在这里插入图片描述](https://img-blog.csdnimg.cn/65a6fb91936548f2bf47e9ba2544c62e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
<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 案例:动态生成表格
----------------------------------------------------------------------------
![在这里插入图片描述](https://img-blog.csdnimg.cn/faf54bbbb36043d3abfd213a97cf5088.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/a07f8ef766c14666a8ea1b607a53177e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
代码如下(示例):
[]( )二、创建元素的三种方式
==========================================================================
![在这里插入图片描述](https://img-blog.csdnimg.cn/7be3d6df23a24e16ab11c0cd96a554cf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
[]( )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 注册事件的两种方式
----------------------------------------------------------------------------
![在这里插入图片描述](https://img-blog.csdnimg.cn/6651698a9d804d1eafdc448696b26a13.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
[]( )4.2 事件监听
-----------------------------------------------------------------------
**addEventListener()事件监听(IE9以后支持)
![在这里插入图片描述](https://img-blog.csdnimg.cn/17f7cd01d9dc4f778c81f2f72668e225.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/93eaf28a2c1e496683863a0d64c78c2e.png)
注:addEventListener()中的第三个参数是布尔型变量默认是flase,如果输入true,是阻止事件冒泡的意思(后面即将学习stopProtagation());**
**attachEventListener()事件监听(IE9以后支持)**
![在这里插入图片描述](https://img-blog.csdnimg.cn/9adbd31eb4204568a5c66233401efe91.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/6cfa988df6d045e6ac4d7da55cc65746.png)
代码如下(示例):
传统注册事件
方法监听注册事件
ie9 attachEvent
注:主要记住传统的用on绑定事件和addElementListener()两种方式注册侦听事件;
[]( )4.3 事件监听兼容性解决方案
------------------------------------------------------------------------------
封装一个函数,函数中判断浏览器的类型:
![在这里插入图片描述](https://img-blog.csdnimg.cn/8d8ffbb071ee499bbab70181b4627435.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
[]( )4.4 删除事件(解绑事件)
-----------------------------------------------------------------------------
![在这里插入图片描述](https://img-blog.csdnimg.cn/99a86a4748e64c2389be261e8f965806.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
<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 删除事件的兼容性解决方案(解绑事件)
-------------------------------------------------------------------------------------
![在这里插入图片描述](https://img-blog.csdnimg.cn/51021e16be0c4a9a8c64467ecfdbc9e1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
[]( )4.6 DOM事件流
-------------------------------------------------------------------------
### []( )4.6.1 DOM事件流
> html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。
> 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。
>
> 那么是先执行父元素的单击事件,还是先执行div的单击事件 ???
![在这里插入图片描述](https://img-blog.csdnimg.cn/d15252640dfb4ad9a5f0c16930b19926.png)
比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。
![在这里插入图片描述](https://img-blog.csdnimg.cn/34c93b274d584f66bf5f93c11371923d.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/c71e177d8db445eea4ceceddab1fff99.png)
> 当时的2大浏览器霸主谁也不服谁!
> IE 提出从目标元素开始,然后一层一层向外接收事件并响应,也就是冒泡型事件流。
> Netscape(网景公司)提出从最外层开始,然后一层一层向内接收事件并响应,也就是捕获型事件流。
>
> 江湖纷争,武林盟主也脑壳疼!!!
>
> 最终,w3c 采用折中的方式,平息了战火,制定了统一的标准 —–— 先捕获再冒泡。
> 现代浏览器都遵循了此标准,所以当事件发生时,会经历3个阶段。
DOM 事件流会经历3个阶段:
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段
我们向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点( 最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。
![在这里插入图片描述](https://img-blog.csdnimg.cn/33b686f63ba7468e8e1a18eb33a0db2c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_17,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-blog.csdnimg.cn/1ac2b92322af4e0288eda1a226d2730d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
#### []( )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个形参用来接收事件对象。
![在这里插入图片描述](https://img-blog.csdnimg.cn/5b3d29120bc243ba927c4068208dd3be.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
#### []( )4.6.2.3 事件对象的兼容性处理
事件对象本身的获取存在兼容问题:
1. 标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取到。
2. 在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。
![在这里插入图片描述](https://img-blog.csdnimg.cn/697100e170d04f0c8101dfb4430552e6.png)
只要“||”前面为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 事件对象的属性和方法
![在这里插入图片描述](https://img-blog.csdnimg.cn/571a0bdc646943e1b2318b6353d0f516.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5YmN56uv5bCP5LqM,size_20,color_FFFFFF,t_70,g_se,x_16)
注: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 阻止事件冒泡
事件冒泡本身的特性,会带来的坏处,也会带来的好处。
![在这里插入图片描述](https://img-blog.csdnimg.cn/9344e7fd1f5f437e8ab79cf763cab615.png)
代码如下(示例):
<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 阻止事件冒泡
事件冒泡本身的特性,会带来的坏处,也会带来的好处。
![在这里插入图片描述](https://img-blog.csdnimg.cn/9344e7fd1f5f437e8ab79cf763cab615.png)
代码如下(示例):
<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开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!