var oBtnAdd = document.getElementById("btnAdd");
var oBtnRemove = document.getElementById("btnRemove");
var oUl3 = document.getElementById("list3");
var aLi2 = document.querySelectorAll("#list3 li");
var str = "我是li";
var num = 3;
function mHover(){
for (var i = 0; i < aLi2.length; i++) {
aLi2[i].onmouseover = function(){
this.style.backgroundColor = "yellow";
aLi2[i].onmouseout = function(){
this.style.backgroundColor = "skyblue";
mHover();
oBtnAdd.onclick = function(){
num++;
var nLi = document.createElement("li");
var textNode = document.createTextNode("我是li" + num);
nLi.appendChild(textNode);
oUl3.appendChild(nLi);
mHover();
oBtnRemove.onclick = function(){
oUl3.removeChild(oUl3.lastElementChild);
num--;
mHover();
作者的代码（只放不同的部分）
var aLi2 = document.getElementsByTagName('li');
var aLi2 = document.querySelectorAll("#list3 li");
其实只是获取 li元素时选用的方法不同而已。那么，各自都会产生什么效果呢？
我实现的效果：使用querySelectorAll()方法
作者实现的效果：使用getElementsByTagName()方法
三、案情分析：
看到这里，大家大概应该已经知道是什么原因了吧。没错，就是使用querySelectorAll()方法的缘故。
我们来简单的分析一下：
问：第一次执行mHover()方法是什么时候？
答：未动态添加元素之前，也就是给每一个li元素注册完鼠标移入移出事件之后。
问：那第二次呢？
答：在添加或者删除按钮的点击事件触发后执行，执行的时候，新增的li元素已经动态创建完毕。此时，它还会去执行一次mHover()方法，给新增的li元素同样注册鼠标移入移出事件，没错吧。
我们再回过头来看一下mHover()这个方法，看看for循环中oLi2.length的返回值到底是什么？
我们在mHover()方法内部，for循环结束的下一行，添加如下两条语句：
console.log(aLi2);
console.log(aLi2.length);
得到如下的返回值：
- 显而易见，
querySelectorAll()是一个静态的获取元素的方法，在初始的DOM元素被动态改变后，并不能实时的更新其元素列表中的值。 - 这说明，文档结构的改变，并没有影响到
NodeList中的值。它始终如一的坚持着最初的那份想法，不被外界所动摇。不管外界怎么变化，就是不为之动心，这逼装的我给满分！
四、寻根问底
为了搞清楚到底是怎么回事？就去问度娘了，因为我现在看的这本JavaScript基础教程并不能帮我解决这么高深的问题。不出我所料，还真的有人遇到过同样的问题，并且也做了一番小研究，得出了结论。
于是，就找到了如下这几个对我解决问题有帮助的文章：
- 关于querySelectorAll的一个坑
- DOM元素querySelectorAll可能让你意外的特性表现
- 说说HTMLCollection、NodeList以及NamedNodeMap
- JS中typeof与instanceof的区别
首先，我在第一篇文章，看到了这个操作：
1 var test=document.querySelectorAll('.x');
3 test instanceof NodeList
5 test instanceof HTMLCollection
7
于是，就产生了疑问？
疑问一：instanceof 是谁？干嘛用的？
instance of？不记得是干嘛用的了？看样子是可以判断对象的类型。最初学JavaScript的时候还学过，一年都没接触了，早都忘得一干二净了。不过，最近学的typeof立马浮现在我的脑海，这就促使我又去找了它们两个的区别。
区别如下：
相同点：都可以用来判断一个变量是否为空，或者是什么类型的。
不同点：
（1）typeof 用于变量的类型判断，它返回一个字符串，这个字符串代表了它所属的类型。
返回值包括五种基本数据类型和一种复杂数据类型。即number、boolean、string、undefined和null；以及object。
（2）instance of 用于判断一个变量是否是某个对象的实例。
疑问二：NodeList 是谁？HTMLCollection 又是谁？
查证后得知：原来它们两个都是对象，且都是一个节点的集合。
相同点：它们两个都是集合对象，返回值都是一个类数组。
（1）NodeList 是由 Node.childNodes 和 document.querySelectorAll 返回的。它有一个length属性，
返回 NodeList对象中包含的节点个数。
注：Node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
大多数情况下，NodeList对象都是一个实时变化（即时更新）的集合。
什么意思呢？就是说，每当文档中的节点（DOM）树发生变化，则已经存在的NodeList对象也会发生相应的变化。
它的底层实现相当于一组元素的快照，并不是对文档进行搜索的动态查询。
这样可以避免使用NodeList对象通常会引起的性能问题。
但是，在另外一些情况下，NodeList是一个静态的集合。
这也就意味着随后对DOM元素的任何改动都不会影响NodeList 集合内的内容。
- 而
document.querySelectorAll()方法返回的就是一个静态的NodeList。
特别是当你选择如何遍历NodeList中的所有项，或缓存列表长度的时候，最好牢记这种区分。
如需详细了解NodeList，请点击这里查看Web/API/NodeList。
（2）HTMLCollection接口表示一个包含了元素的通用集合。它也有一个length属性值，返回集合当中子元素的数目。
HTML DOM中的 HTMLCollection 是即时更新的；当其所包含的文档结构发生改变时，它会自动更新。
如需详细了解HTMLCollection，请点击这里查看Web/API/HTMLCollection。
如需详细了解HTML DOM，请点击这里查看《getElementById返回的是什么？串讲HTML DOM》
五、总结：
HTMLCollection 做到了随着DOM元素的改变进行动态的变化，而 NodeList 并不会即时更新元素集合中的值，这就是差异。一个是静态的获取，一个是动态的获取，当然不一样了！
最后我自己也在控制台做了判断，如下图所示：
使用querySelectorAll()方法：
使用getElementsByTagName()方法：
感兴趣的同学可以去 Mozilla 开发者网络 查看相关的Web文档，这个网站提供了有关开放网络技术(Open Web)的信息，包括HTML、CSS 和万维网及 HTML5 应用的 API。它还记录了 Mozilla 产品的文档。该网站的宗旨是：源于开发者，服务开发者。
六、结束语
Write By Monkeyfly以下内容均为原创，如需转载请注明出处。一、前提 最近这两天一直在学习JavaScript的事件委托（或称事件代理），用了两天的时间看完了这篇《js中的事件委托或是事件代理详解》博客，并且将博主提供的案例手动敲了两边，可以说是基本掌握了事件委托的原理和用法。这篇博客对于JavaScript的事件委托的讲解还是比较通俗易懂，详细到位的，在这里向大
一、getElementsByClassName()方法不足之处
在之前的学习中，我们了解到，可以根据元素的 class 属性值查询一组元素节点对象，即：getElementsByClassName()，但是这个方法不支持 IE8 及以下的浏览器。
在我们的实际开发中，会特别的受限，为了兼容 IE8 及以下的浏览器，我们可以采用一种新的方法，这种方法在我们的实际开发中也很常用，因此我们要熟练掌握...
对于在浏览器上运行JS程序，最核心的库就是DOM API 库DOM可以看作文档对象模型，HTML中会把每个html标签看作成一个JS中可操作的对象。操作这个对象，就可以影响界面的显示。其中获取网页元素是DOM的基础。当一个网页加载好后，会自动生成一个全局变量，叫做document，这其中有些方法和属性，让我们来操作网页内容。
在JS中的很多代码都是通过事件来触发。eg：鼠标点击页面，会产生鼠标点击事件等等。事件的三要素：
获取操作元素的内容
通过对象内的属性 innerHTML来实现。
需要注意，input
它们俩是有区别的：
1.querySelector返回满足条件的第一个元素（node），而querySelectorAll返回满足条件的所有元素（nodelist）；
2.在都没有满足条件的元素情况下：querySelector返回null，而querySelectorAll返回空的数组[]。
1.querySelector
返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹...
querySelectorAll与querySelector的区别:
querySelectorAll : 找出所有匹配的节点并返回数组.
querySelector : 找到一个后就返回节点对象。
1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。
3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果
找出body标签下的第一..
document.
querySelectorAll与常规获取的区别一、document.
querySelectorAll获取节点
方法二、常规获取DOM节点
方法2.分析区别总结
<!--body里面的代码-->
<li>洪山区</li>
<li id="wuchang">武昌区</li>
<li>汉阳区</li>
querySelectorAll 是 JavaScript 中的一个方法，它用于获取文档中符合指定 CSS 选择器的所有元素，并返回一个 NodeList 对象。
querySelectorAll 方法的语法如下：
elementList = parentNode.querySelectorAll(selectors);
其中，parentNode 表示要查询的父元素节点，selectors 表示一个或多个 CSS 选择器，多个选择器之间用逗号分隔。
querySelectorAll 方法返回的是一个 NodeList 对象，它类似于数组，可以使用索引值访问其中的元素，也可以使用 forEach 等方法遍历其中的元素。
例如，要获取文档中所有 class 为 "myClass" 的元素，可以使用以下代码：
var elements = document.querySelectorAll(".myClass");
这样就可以获取到所有符合条件的元素，存储在 elements 变量中。
nginx启动失败之nginx: [emerg] invalid number of arguments in "root" directive in nginx/nginx.conf:41
106491
nginx启动失败之nginx: [emerg] invalid number of arguments in "root" directive in nginx/nginx.conf:41
Zhang_9368:
百度地图JavaScript API 学习之浏览器定位
wwtx2048:
