document.querySelectorAll和document.getElementsByTagName的区别

querySelectorAll()

• 该方法接受的参数是一个选择器，返回的是所有匹配的元素。
• 这个方法返回的是一个NodeList实例(NodeList对象，代表一个有序的节点列表)

document.querySelectorAll()和Node.childNodes返回的都是NodeList对象
如果没有找到匹配元素，NodeList就是空的

//取得div中的所有元素(类似于document.getElementsByTagName('em'))
var ems = document.getElementById('mydiv'). querySelectorAll('em')

//取得类为 selected的所有元素
var selecteds = document.querySelectorAll('.selected');

//取得所有
元素中的元素
var strongs = document.querySelectorAll('p strong');

• NodeList有length属性，表示节点的数量
• NodeList有item方法，这个方法返回节点列表中指定索引的节点，要想取得返回的NodeList中的每一个元素，可以使用item方法，也可以使用方括号语法；比如：

var i,len,strong;
for(i=0;len=strongs.length;i

---

document.getElementsByTagName()

• 该方法获取的是指定名称的元素集合HTMLCollection
• HTMLCollection 是即时更新的（live），当其所包含的文档结构发生改变时，它会自动更新。
• HTMLCollection 元素集合有length属性。表示结合中子元素的数量
• HTMLCollection.item()，根据给定的索引(从0开始)，返回具体的节点
• HTMLCollection.namedItem()，根据 Id 返回指定节点，或者作为备用，根据字符串所表示的 name 属性来匹配。

var elem1,elem2;

//document.forms  是一个HTMLCollection
elem1 = document.forms[0]
elem2 = document.forms.item(0)
alert(elem1 === elem2); // 显示 "true"


elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // 显示 "true"