码迷,mamicode.com
首页 > 其他好文 > 详细

getElementById() getElementsByTagName() getElementsByClassName() querySlector() querySlectorAll()区别

时间:2016-11-25 20:24:58      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:classname   htm   break   pre   java   匹配   get   api   参数   

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()区别

标签:classname   htm   break   pre   java   匹配   get   api   参数   

原文地址:http://www.cnblogs.com/CQ-engineer/p/6102636.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!