Javascript getElementsByTagName() 和 querySelectorAll()方法

以前对于getElementsByTagName()这个方法的认识是选取指定的元素所组成的数组,今天在用的时候发现选出来的并不是一个数组,而是一个对象。

querySelectorAll()方法选择出来的是一个NodeList集合

Javascript getElementsByTagName() 和 querySelectorAll()方法_第1张图片

这是它所支持的方法,可以在chrome的console里看到,数组的操作方法对它并不适用,如果想操作NodeList里面的内容,需要遍历内部的元素。

一般用数组的操作方法无法修改里面的内容,所以可以将其转换为数组,再进行修改。

var imgs = [].slice.apply(document.getElementsByTagName('img'));

imgs.splice(1,1);

console.log(imgs);

这样就可以修改NodeList的内容了。

如果直接修改会改变DOM的内容。

var img =document.getElementsByTagName("img");

var len = img.length;

for(var i =0; i < len; i++) {    

    img[i].parentNode.removeChild(img[i]);

}

这样就会删除DOM里的内容,需谨慎操作。

你可能感兴趣的:(Javascript getElementsByTagName() 和 querySelectorAll()方法)