dom操作中的getElementByClassName()在ie6、7、8中具有兼容性问题,而在高级浏览器中就不存在这种问题。以下通过代码对getElementByClassName()的封装 。
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: pink; ???????????margin: 10px; ???????} ???</style> ???<script> ???????window.onload = function(){ ???????????console.log(getClass("test").length); ???????} ???????function getClass(className){ ???????????//如果浏览器支持着,则直接返回 ???????????if(document.getElementsByClassName){ ???????????????return document.getElementsByClassName(className); ???????????} ???????????//不支持的浏览器 ???????????var ?arr = []; ???????????var dom = document.getElementsByTagName("*"); ???????????for(var i=0; i < dom.length; i++){// ???????????????if(dom[i].className == className){// ???????????????????arr.push(dom[i]);// ???????????????}i ???????????????//改进后的class ???????????????var ?txt = dom[i].split(" ");//["dome","test"] ???????????????for(var j=0; j < txt.length; j++){ ???????????????????if(txt[j] == className){ ???????????????????????arr.push(dom[i]); ???????????????????} ???????????????} ???????????} ???????????return arr; ???????} ???????/* ???????原理,遍历所有的div。通过每个div的className来判断 ????????*/ ???</script></head><body></body><div class="dome"></div><div></div><div class="test"></div><div></div><div class="dome test"></div><div></div><div></div><div></div><div class="dome"></div><div></div></html>
js--封装类名的dom操作
原文地址:http://www.cnblogs.com/jiang-z/p/7471867.html