首页 > 代码库 > getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别
getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别
1. getElementById() getElementsByTagName() javascript原生的方法,这两个不会有兼容性问题。
2. getElementsByClassName()是HTML5的DOM API ,IE8以下不支持(不支持HTML5的浏览器)。
对于现代浏览器,document.getElementsByClassName( ‘wrap‘ )获取的是DOM中所有class为wrap的元素
在IE8以下,可以模拟实现这种效果
function getElementsByClassName(oParent, tagName, className) {
if(document.getElementsByClassName ){ //现代浏览器
return oParent.getElementsByClassName(className );
}else{ //IE8以下
var aEls = oParent.getElementsByTagName(tagName);
var arr = [];
for (var i=0; i<aEls.length; i++) {
var arrClassName = aEls[i].className.split( ‘ ‘ );
for (var j=0; j<arrClassName.length; j++) {
if ( arrClassName[j] == className ) {
arr.push(aEls[i]);
break;
}
}
}
return arr;
}
}
3. querySelector() querySelectorAll()也是HTML5的DOM API ,IE8以下不支持(不支持HTML5的浏览器)。
querySlector() 接受一个css选择器作为参数,然后返回DOM中匹配的第一个元素。
querySelectorAll()接受一个css选择器作为参数,然后返回DOM中匹配的元素的集合。
document.querySlector(‘.wrap‘)获取的是DOM中第一个class为wrap的元素。
document.querySlector(‘p‘)获取的是DOM中第一个p元素。
document.querySelectorAll(‘.wrap‘)获取的是DOM中class为wrap的元素集合。
document.querySelectorAll(‘p‘)获取的是DOM中p元素集合。
getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别