一、原生JavaScript支持6种方式获取元素
document.getElementById('id');
document.getElementsByName('name');
document.getElementsByTagName('tag');
document.getElementsByClassName('className');
document.querySelector("#id");
document.querySelector(".className");
document.querySelector("p");
document.querySelectorAll("div");
二、getElementsByClassName的兼容性问题
非IE6,7,8可以直接用自带的属性getElementsByClassName，如果需要考虑兼容，就需要自己写了。
比如实现点击class="click-enable"的td时，分别打印该td中数字的整数和小数部分，尝试用js实现，考虑兼容性。
大概思路，是将你要获取class元素父级下的所有元素都取出来，再循环查找className，满足的元素存到数组中，然后返回。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>原生JavaScript获取类名</title> </head> <body> <table id="list"> <tr> <td class="click-enable">1.1</td> <td>1.2</td> <td class="click-enable">1.3</td> <td>1.4</td> </tr> <tr> <td class="click-enable">2.1</td> <td>2.2</td> <td class="click-enable">2.3</td> <td>2.4</td> </tr> <tr> <td class="click-enable">3.1</td> <td>3.2</td> <td class="click-enable">3.3</td> <td>3.4</td> </tr> </table> <script type="text/javascript"> window.onload = function () { var tagName = getClassName("list", "click-enable"); for(var i=0;i<tagName.length;i++){ var kk=tagName[i].innerHTML; var bb=kk.split('.'); var x=bb[0]; var y=bb[1]; document.write("整数部分:"+x+" 小数部分:"+y+'</br>'); } } function getClassName(oParent, className) { var oParent = oParent ? document.getElementById(oParent) : document; //判断浏览器是否支持getElementsByClassName，如果支持就直接用。 if (document.getElementsByClassName){ return oParent.getElementsByClassName(className); }else{ var aEle = oParent.getElementsByTagName('*'); //获取指定元素 var arr = []; //这个数组用于存储所有符合条件的元素 for(var i = 0; i < aEle.length; i++){ //遍历获得的元素 if (aEle[i].className == className){ //如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll arr[arr.length] = aEle[i]; //方法2：arr.push(aEle[i]); } //方法3 //if(aEle[i].className.indexOf(className) != -1){ // arr[arr.length] = aEle[i]; //} } return arr; } } </script> </body> </html>
三、querySelectorAll的兼容性问题
querySelector和querySelectorAll方法是 W3C Selectors API 规范中定义的。他们的作用是根据CSS 选择器规范，便捷定位文档中指定元素。但ie6，ie7不支持。
if (!document.querySelectorAll) { document.querySelectorAll = function (selectors) { var style = document.createElement('style'), elements = [], element; document.documentElement.firstChild.appendChild(style); document._qsa = []; style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}'; window.scrollBy(0, 0); style.parentNode.removeChild(style); while (document._qsa.length) { element = document._qsa.shift(); element.style.removeAttribute('x-qsa'); elements.push(element); } document._qsa = null; return elements; }; } if (!document.querySelector) { document.querySelector = function (selectors) { var elements = document.querySelectorAll(selectors); return (elements.length) ? elements[0] : null; }; }
或者
function getId(strid){ if ('querySelector' in document) { document.querySelector("#" + strid); } else {//IE6 document.getElementById(strid); } }