js--封裝類名的dom操作
阿新 • • 發佈：2017-09-04
type get oct charset function itl height strong lan
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操作