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;

　　}

}

例如:

<ul>

　　<li class="box1 box2">1</li>

　　<li class="box3 box5">1</li>

　　<li class="box4">1</li>

　　<li class="box1 box1">1</li>

</ul>

　　getElementsByClassName(document, 'li', 'box1');

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元素集合。