基础DOM操作

这个部分代码其实参考jquery的一些函数写法,唯一区别就是调用不用,参数一样. 
比如下面的栗子

//设置对象内容

jquery:$('#xxx').html('hello world');

现在:html(document.getElementById('xxx'),'hello world')

//获取对象内容

jquery:$('#xxx').html();

现在:html(document.getElementById('xxx'))

4-1检测对象是否有哪个类名

function hasClass(obj,classStr){

   var arr=obj.className.split(/\s+/); //这个正则表达式是因为class可以有多个,判断是否包含

   return (arr.indexOf(classStr)==-1)?false:true;

},

4-2添加类名

function addClass(obj,classStr){

   if (!this.hasClass(obj,classStr)){obj.className += " " + classStr};

},

4-3删除类名

function removeClass(obj,classStr){

   if (this.hasClass(obj,classStr)) {

       var reg = new RegExp('(\\s|^)' + classStr + '(\\s|$)');

       obj.className = obj.className.replace(reg, '');

   }

},

4-4替换类名(“被替换的类名”,”替换的类名”)

function replaceClass(obj,newName,oldName) {

   removeClass(obj,oldName);

   addClass(obj,newName);

}

4-5获取兄弟节点

function siblings(obj){

   var a=[];//定义一个数组,用来存o的兄弟元素

   var p=obj.previousSibling;

   while(p){//先取o的哥哥们 判断有没有上一个哥哥元素,如果有则往下执行 p表示previousSibling

       if(p.nodeType===1){

       a.push(p);

       }

       p=p.previousSibling//最后把上一个节点赋给p

   }

   a.reverse()//把顺序反转一下 这样元素的顺序就是按先后的了

   var n=obj.nextSibling;//再取o的弟弟

   while(n){//判断有没有下一个弟弟结点 n是nextSibling的意思

       if(n.nodeType===1){

           a.push(n);

       }

       n=n.nextSibling;

   }

   return a;

},

4-6设置样式

function css(obj,json){

   for(var attr in json){

       obj.style[attr]=json[attr];

   }

}

4-7设置文本内容

function html(obj){

   if(arguments.length==0){

       return this.innerHTML;

   }

   else if(arguments.length==1){

       this.innerHTML=arguments[0];

   }

}

4-8显示隐藏

function show(obj){

   obj.style.display="";

}

function hide(obj){

   obj.style.display="none";

}

 

posted @ 2017-07-31 17:18  水上。。。  阅读(90)  评论(0编辑  收藏  举报