zoukankan      html  css  js  c++  java
  • 基础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";

    }

     

  • 相关阅读:
    CSS字体和文本
    【操作系统学习】操作系统概念(一)
    宜家通信 会员管理 表结构搭建
    【优化框架】优化断言,断言返回结果是否包含特定字符串
    【Faker库】faker库(随机生成数据)使用总结转载
    Python+selenium 【第七章】Unittest学习
    Python+selenium 【第六章】UI自动化框架操作测试对象
    Python+selenium 【第五章】UI自动化元素等待
    【Jenkins】python项目集成jenkins并配置allure报告 mac/windows方法一致
    Python+selenium 【第八章】开源项目实战
  • 原文地址:https://www.cnblogs.com/BaoWeiHome/p/7264191.html
Copyright © 2011-2022 走看看