DOM id&class操作
在javascript中用className来获取元素的class,但实际中最好把它封装成一个方法方便以后我们二次利用。
第一种:
第二种:
方法一:获取单个相同的class
function getByClass(clsName){
var elements=document.getElementsByTagName(‘*‘),
eles=[];
/*当className相等时添加到数组中*/
for(var i=0,l=elements.length;i<l;i++){
if(elements[i].className==clsName){
eles.push(elements[i]);//向eles数组后面添加elements[i]元素
}
}
return eles;
}
window.onload=function (){
var aBox=getByClass(“box”);
for(var i=0;i<aBox.length;i++){
alert(aBox[i].innerHTML);
}
};
方法二:通过正则表达式获取多个class*/
function getByClass(clsName){
var elements=document.getElementsByTagName(‘*‘),
eles=[];
/*正则表达式*/
var re=new RegExp(“\\b” + sClass + “\\b”,”g”);
for(var i=0,l=elements.length;i<l;i++){
/*字符串search方法判断是否存在匹配*/
if(elements[i].className.search(re) != -1){
eles.push(elements[i]);
}
}
return eles;
};
方法三:通过数组获取多个class
function getByClass(clsName){
var elements=document.getElementsByTagName(‘*‘),
eles=[];
for(var i=0;i<elements.length;i++){
/*将每个className拆分*/
var arr=elements[i].className.split(/\s+/);
for(var j=0;j<arr.length;j++){
/*判断拆分后的数组中有没有满足的class*/
if(arr[j]==clsName){
aResult.push(elements[i]);
}
}
}
return eles;
};
优化代码:由于document.getElementsByTagName(‘*‘)很浪费资源,所以我们可以做下代码优化。
function getByClass(clsName,parent){
var oParent=parent?document.getElementById(parent):document,
eles=[],
elements=oParent.getElementsByTagName(‘*‘);
for(var i=0,l=elements.length;i<l;i++){
if(elements[i].className==clsName){
eles.push(elements[i]);
}
}
return eles;
}
删除dom
//删除id
for(i=0;i<150;i++){
var idObject = document.getElementById(‘sidebar’);
if (idObject != null)
idObject.parentNode.removeChild(idObject);
}
//通过class获取元素
paras = document.getElementsByClassName(‘paginator’);
for(i=0;i<paras.length;i++){
//删除元素 元素.parentNode.removeChild(元素);
if (paras[i] != null)
paras[i].parentNode.removeChild( paras[i]);
}