querySelectorAll()
- 该方法接受的参数是一个选择器,返回的是所有匹配的元素。
- 这个方法返回的是一个NodeList实例(NodeList对象,代表一个有序的节点列表)
document.querySelectorAll()和Node.childNodes返回的都是NodeList对象
如果没有找到匹配元素,NodeList就是空的
//取得div中的所有<em>元素(类似于document.getElementsByTagName('em'))
var ems = document.getElementById('mydiv'). querySelectorAll('em')
//取得类为 selected的所有元素
var selecteds = document.querySelectorAll('.selected');
//取得所有<P>元素中的<strong>元素
var strongs = document.querySelectorAll('p strong');
- NodeList有length属性,表示节点的数量
- NodeList有item方法,这个方法返回节点列表中指定索引的节点,要想取得返回的NodeList中的每一个元素,可以使用item方法,也可以使用方括号语法;比如:
var i,len,strong;
for(i=0;len=strongs.length;i<len;i++){
strong = strongs[i]; //或者 strong = strongs.item(i)
strong.className = 'important'
}
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"