一、原生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);
}
}