教你9天快速掌握java基础
导读： 最近这两天一直在学习的事件委托（或称事件代理），用了两天的时间看完了这篇《js中的事件委托或是事件代理详解》博客，并且将博主提供的案例手动敲了两边，可以说是基本掌握了事件委托的原理和用法。这篇博客对于的讲解还是比较通俗易懂，详细到位的，...
最近这两天一直在学习的事件委托（或称事件代理），用了两天的时间看完了这篇《js中的事件委托或是事件代理详解》博客，并且将博主提供的案例手动敲了两边，可以说是基本掌握了事件委托的原理和用法。这篇博客对于的讲解还是比较通俗易懂，详细到位的，在这里向大家推荐一下，感兴趣的小伙伴们可以自行去里面学习。
下面就来说一说，我在学习过程中碰到的问题。
问题描述（简单明了）
如果一开始你是使用方法来获取元素，然后再利用的操作方法动态添加一些元素的话。
此时，如果再次获取元素列表的长度，你就会发现长度根本没有发生变化，依然是未添加元素之前的长度。
虽然方法确实成功的在页面添加了元素，但是实际上这个元素列表并没有进行实时的更新，刚才添加的新元素没有被放入最开始的元素列表中，还是独自一人在外面徘徊，孤苦伶仃。
以下内容为后来补充的。
，你就会发现长度确实发生变化了。
问题的补充说明
质疑的内容：（如下图所示）
并说道：
把你博客给我下 我研究下兄弟 完了 你多半是看花眼了
随后，我进行了论证与回复：（如下图所示）
*我回复道：
一般来说不重新获取，就比如我们平时使用的时候。重新获取的话，就不是实时更新了。一般我们获取到了某个元素列表，不会再获取第二遍吧。而是直接使用。
随后，我又使用方法验证了一遍：（如下图所示）
最后的对话：（如下图所示）
问题产生的原因
主要有以下4点：
我在写代码的过程中，并没有参照作者的代码同步去写，而是用了前几天刚熟悉的，还没有完全掌握的新方法去写的。即 。
对于这个方法，我只知其然，并不知其所以然。为什么呢？因为我连基础教程的书到现在还没看完，底层的实现根本没机会去接触或者了解。只知道有这样一个方法，而且使用简单快捷，需要用的时候拿来用就行了。
我自己写了好几组列表并给了不同的，所以会存在很多个元素，而方法可以利用选择器进行精准的定位到所要获取的列表中的元素。
但是呢，对方法来说，它还要关心下标中的取值。因为你必须要知道当前要获取的列表中的元素，是整个文档的第几个，数起来比较麻烦。而且我只想给当前的特定的一组元素注册事件，不想关心其他的元素，于是就放弃了这个方法。
其实不用纠结那么多，哪个好用，哪个顺手就用哪个。
1、querySelectorAll()方法介绍
先来看看语法：
说明：
在利用这个方法获取元素时，我们都知道它是新增的操作的方法。该方法会返回一个元素的集合，而且这个集合可以利用数组的形式来操作，使用起来非常的方便。但实际上得到集合并不是一个真正意义上的数组，只能说它是一个，至于原因呢我会在下面告诉大家。这个方法其实和方法很类似，返回的都是一个伪数组，大家可以对比着记忆。
注：
其实呢，我还是对这个方法的本质没有搞明白，只知道它是获取元素的方法之一，并且知道它是通过选择器的方式来获取元素的。至于其他的，就不清楚了。
疑问：何为类数组或者伪数组？
这个方法可以根据用户指定的选择器来返回文档中的所有匹配的元素，所以它返回的是一个元素的列表，相当于一个元素的集合，我们可以称之为，或者。
问：为什么这么说呢？
答：就是因为
类数组的特性：
可以使用数组的属性；可以利用数组的进行一些操作；
2、getElementsByTagName()方法介绍
语法：
说明：
它也是获取元素的一种方法，利用标签名来获取元素，返回的同样是一组元素，我们称之为。即它既可以使用数组的属性，也可以使用数组的下标形式进行操作。
该方法前面除了可以接外，还可以接其他元素，也可以操作用动态创建的元素。
但是，方法前面只能接，就不能操作用动态创建的DOM元素。
方法返回元素的顺序是它们在文档中的顺序。 如果把传给 方法，它将返回文档中所有元素的列表。
注：
这个方法平时在代码中很常见，遇见的几率比较大，也比较大众化，基本人人都会使用这个方法。在学DOM操作的时候，这个方法是重点内容必须得掌握。
我觉得图文并茂才是解决问题的最好办法，那么多文字谁愿意去看呀，要是我，我肯定也不乐意。下面就让我们开始吧。
静态页面
HTML代码
CSS代码（可直接跳过，纯粹是为了更直观的看到各元素所占的区域，方便观察事件委托的相关事件操作）
JavaScript代码（这才是核心）
作者的代码（只放不同的部分）
其实只是获取 元素时选用的方法不同而已。那么，各自都会产生什么效果呢？
我实现的效果：使用querySelectorAll()方法
作者实现的效果：使用getElementsByTagName()方法
看到这里，大家大概应该已经知道是什么原因了吧。没错，就是使用方法的缘故。
我们来简单的分析一下：
问：第一次执行方法是什么时候？
答：未动态添加元素之前，也就是给每一个li元素注册完鼠标移入移出事件之后。
问：那第二次呢？
答：在添加或者删除按钮的点击事件触发后执行，执行的时候，新增的元素已经动态创建完毕。此时，它还会去执行一次方法，给新增的li元素同样注册鼠标移入移出事件，没错吧。
我们再回过头来看一下这个方法，看看for循环中的返回值到底是什么？
我们在方法内部，for循环结束的下一行，添加如下两条语句：
得到如下的返回值：
显而易见，是一个静态的获取元素的方法，在初始的元素被动态改变后，并不能实时的更新其元素列表中的值。这说明，文档结构的改变，并没有影响到中的值。它始终如一的坚持着最初的那份想法，不被外界所动摇。不管外界怎么变化，就是不为之动心，这逼装的我给满分！
为了搞清楚到底是怎么回事？就去问度娘了，因为我现在看的这本基础教程并不能帮我解决这么高深的问题。不出我所料，还真的有人遇到过同样的问题，并且也做了一番小研究，得出了结论。
于是，就找到了如下这几个对我解决问题有帮助的文章：
关于querySelectorAll的一个坑DOM元素querySelectorAll可能让你意外的特性表现说说HTMLCollection、NodeList以及NamedNodeMapJS中typeof与instanceof的区别
首先，我在第一篇文章，看到了这个操作：
于是，就产生了疑问？
疑问一：instanceof 是谁？干嘛用的？
不记得是干嘛用的了？看样子是可以判断对象的类型。最初学的时候还学过，一年都没接触了，早都忘得一干二净了。不过，最近学的立马浮现在我的脑海，这就促使我又去找了它们两个的区别。
区别如下：
相同点：都可以用来判断一个变量是否为空，或者是什么类型的。
不同点：
（1） 用于变量的类型判断，它返回一个字符串，这个字符串代表了它所属的类型。
返回值包括五种基本数据类型和一种复杂数据类型。即和；以及。
（2） 用于判断一个变量是否是某个对象的实例。
疑问二：NodeList 是谁？HTMLCollection 又是谁？
查证后得知：原来它们两个都是对象，且都是一个节点的集合。
相同点：它们两个都是集合对象，返回值都是一个类数组。
不同点：
（1） 是由 和 返回的。它有一个属性，
返回 对象中包含的节点个数。
注： 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
大多数情况下，对象都是一个实时变化（即时更新）的集合。
什么意思呢？就是说，每当文档中的节点树发生变化，则已经存在的对象也会发生相应的变化。
它的底层实现相当于一组元素的快照，并不是对文档进行搜索的动态查询。
这样可以避免使用对象通常会引起的性能问题。
但是，在另外一些情况下，是一个静态的集合。
这也就意味着随后对元素的任何改动都不会影响 集合内的内容。
而方法返回的就是一个静态的。
特别是当你选择如何遍历中的所有项，或缓存列表长度的时候，最好牢记这种区分。
如需详细了解，请点击这里查看Web/API/NodeList。
（2）接口表示一个包含了元素的通用集合。它也有一个属性值，返回集合当中子元素的数目。
中的 是即时更新的；当其所包含的文档结构发生改变时，它会自动更新。
如需详细了解，请点击这里查看Web/API/HTMLCollection。
如需详细了解，请点击这里查看《getElementById返回的是什么？串讲HTML DOM》
做到了随着元素的改变进行动态的变化，而 并不会即时更新元素集合中的值，这就是差异。一个是静态的获取，一个是动态的获取，当然不一样了！
最后我自己也在控制台做了判断，如下图所示：
使用querySelectorAll()方法：
使用getElementsByTagName()方法：
感兴趣的同学可以去 Mozilla 开发者网络 查看相关的文档，这个网站提供了有关开放网络技术的信息，包括、 和万维网及 应用的 。它还记录了 产品的文档。该网站的宗旨是：。
今天晚上有点事耽误了，没能早早把博客写完，写到这么晚也实属无奈。突然发现现在已经是凌晨05:36了，从开始到结束，不知不觉已经过去了3个小时。毕竟今天遗留的问题，最好当天就解决了，千万别拖到明天去执行，后果你懂得。人是越拖延越不想做，越不想做就会变得越懒，每天利用写博客的方式还能时刻提醒自己，激励自己，让自己坚持下来。
虽然刚开始写博客确实很累，但是我又是处女座的，一向对自己比较严格，而且是极度的完美主义者，当然不允许自己的博客敷衍了事，草草结束，该认真还得认真写。今天就写这么多吧，该睡觉了。
等白天睡起来了，再去学点新的东西，反正不管每天能学多少知识，都得完全弄明白并且掌握了，不要只顾着数量而忽略了质量。基础没巩固好，到时候痛苦的是自己，而且还要花费额外的时间再来复习知识点。
所以说，应该严格要求自己，合理分配时间，不要眼高手低，初学阶段就应该多观察多思考多实践，而非走马观花式的，左顾右盼式的学习。尽量做到快速高效的学习，形成自己的一套科学合理的学习方法，建立一套彰显自己风格的有特色的知识体系，这何尝不是一件好事呢？
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 教你9天快速掌握java基础
本文地址： https://pptw.com/jishu/661548.html