1、querySelectorAll()方法介绍
先来看看语法：
elementList = document.querySelectorAll(css selectors);
说明：
在利用document.querySelectorAll(selectors)这个方法获取元素时，我们都知道它是HTML5新增的DOM操作的方法。该方法会返回一个元素的集合，而且这个集合可以利用数组的形式来操作，使用起来非常的方便。
但实际上得到集合并不是一个真正意义上的数组，只能说它是一个“伪数组”（或称“类数组”），至于原因呢我会在下面告诉大家。
这个方法其实和getElementsByTagName()方法很类似，返回的都是一个伪数组，大家可以对比着记忆。
注：
其实呢，我还是对querySelectorAll( )这个方法的本质没有搞明白，只知道它是获取元素的方法之一，并且知道它是通过CSS选择器的方式来获取元素的。至于其他的，就不清楚了。
疑问：何为类数组或者伪数组？
querySelectorAll( )这个方法可以根据用户指定的选择器来返回文档中的所有匹配的元素，所以它返回的是一个元素的列表，相当于一个元素的集合，我们可以称之为“类数组”，或者“伪数组”。
问：为什么这么说呢？
答：就是因为它可以利用数组的某些特性，但是并不具备数组所拥有的方法。
类数组的2点特性：
可以使用数组的length属性；
可以利用数组的下标形式进行一些操作；
2、getElementsByTagName()方法介绍
语法：
document.getElementsByTagName(tagname)；
说明：
它也是获取元素的一种方法，利用标签名来获取元素，返回的同样是一组元素，我们称之为“类数组”（即元素的集合）。即它既可以使用数组的length属性，也可以使用数组的下标形式进行操作。
该方法前面除了可以接document外，还可以接其他DOM元素，也可以操作用JavaScript动态创建的DOM元素。
但是，getElementById()方法前面只能接document，就不能操作用JavaScript动态创建的DOM元素。
getElementsByTagName()方法返回元素的顺序是它们在文档中的顺序。
如果把"*"传给 getElementsByTagName()方法，它将返回文档中所有元素的列表。
注：
这个方法平时在代码中很常见，遇见的几率比较大，也比较大众化，基本人人都会使用这个方法。
在学DOM操作的时候，这个方法是重点内容必须得掌握。
两者区别：
动态的NodeLists
NodeList和HTMLCollection是两个特别的对象类型，3级DOM中是这样定义HTMLCollection：
NodeList和NamedNodeMap在DOM中都是动态的，也就是说，改变这些dom结构都会影响到这些NodeList和NamedNodeMap。例如：如果获取一个有子节点的NodeList，然后增加或者删除子节点，这个NodeList也会动态的改变。同样的，在一个tree结构中改变一个node会影响到所有引用这个node的NodeList和NamedNodeMap对象。
getElementsByTagName方法即返回的就是这样的一个NodeList，看下面代码：
静态的NodeLists
querySelectorAll返回的是一个静态的NodeList，下面是 Selectors API
querySelectorAll返回的是一个静态的NodeList。改变一个相关node不会改变这个静态NodeList对象。也就是说这个对象必须在获取的时候就被创建出来。
所以即使querySelectorAll返回的结果和getElementsByTagName是一样的，但是他们还是有着本质的区别。在动态NodeList里return的是一个指针，而静态的NodeList返回时当前的node所有信息。
所以下面这个循环就不是一个死循环：
存在的问题：
首先定义一下伪数组：
这里把符合以下条件的对象称为伪数组：
1，具有length属性
2，按索引方式存储数据
3，不具有数组的push,pop等方法
如
1，function内的arguments。
2，通过document.forms，Form.elements，Select.options，document.getElementsByName()，querySelectorAll( )，document.getElementsByTagName()，childNodes/children等方式获取的集合（HTMLCollection，NodeList）等。
3，特殊写法的对象 ，如：
它们不具有数组的一些方法如push, pop, shift, join等。
那么，就不能用push添加节点，解决办法如下（通过添加节点的方法）：
代码如下：
CSS代码
<style>
html,body{
margin: 0;
padding: 0;
}
div:not(:nth-of-type(2)){
margin:0;
width:500px;
height:100%;
background-color: #f40;
margin-top: 50px;
}
/*ul默认有外边距*/
ul{
width: 300px;
height: 100%;
background-color: #BDBDBD;
list-style: none;
/*清除默认边距*/
margin:0;
padding:0;
margin:20px auto;
margin-bottom:30px;
}
li{
width: 200px;
height: 30px;
line-height: 30px;
margin: 20px auto;
background-color: pink;
}
</style>
JavaScript代码（这才是核心）
//通过id获取添加按钮元素
var oBtnAdd = document.getElementById("btnAdd");
//通过id获取删除按钮元素
var oBtnRemove = document.getElementById("btnRemove");
//通过id获取ul元素
var oUl3 = document.getElementById("list3");
//通过css选择器获取ul中的所有li元素，返回一个类数组
var aLi2 = document.querySelectorAll("#list3 li");
//等添加元素后，为了给li元素增加文本内容做准备
var str = "我是li";
var num = 3;
//for循环给每一个li元素注册鼠标移入移出事件
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();
//给按钮添加点击事件，并实现添加li元素的功能
oBtnAdd.onclick = function(){
num++;
//创建li元素节点
var nLi = document.createElement("li");
//创建文本节点
var textNode = document.createTextNode("我是li" + num);
//将文本节点插入li元素节点中
nLi.appendChild(textNode);
//将组合后的li元素，再放入到ul元素内部子元素的末尾
oUl3.appendChild(nLi);
mHover();//动态添加li元素后，希望给它们也添加上鼠标移入移出事件，此处执行此函数即可实现
}
//给按钮添加点击事件，并实现删除li元素的功能
oBtnRemove.onclick = function(){
//删除新增加的那个li元素
oUl3.removeChild(oUl3.lastElementChild);
num--;
mHover();//如果没有这条语句，那么新增的li元素不会拥有鼠标移入移出事件
}
---------------------
作者：monkeyfly007
来源：CSDN
原文：https://blog.csdn.net/tel13259437538/article/details/79049191
版权声明：本文为博主原创文章，转载请附上博文链接！
网友评论