美文网首页
DOM知识结构

DOM知识结构

作者: LuckyS007 | 来源:发表于2017-04-26 20:21 被阅读7次

    链接:http://naotu.baidu.com/file/066f228731f401d54b19d033e660310d?token=c250785699717806
    DOM知识结构:
    分类有五大类

    • 1.元素的操作
    • 2.元素属性的操作
    • 3.表单与表格
    • 4.节点操作
    • 5.定位属性
      1.添加class
    var objId = document.getElementById('oDiv');
    function addClass(obj,add)
            //obj:要添加的对象,className:要添加的class名称,例如:对oDiv要添加一个class=‘box’,那obj就是oDiv,class就是box;
            {
                //如果原来没有class
                if (obj.className=='') {
                    obj.className=add;
                } else{
                    //如果原来有class
                    var arrClassName=obj.className.split(' ');
                    var _index=arrIndexOf(arrClassName,add);
                    if (_index==-1) {
                        //如果要添加的class在原来的class中不存在
                        obj.className+=' '+add;
                    }
                }
            }
    
            function arrIndexOf(arr,v){
                for (var i=0;i<arr.length;i++) {
                    if (arr[i]==v) {
                        return i;
                    }
                }
                return -1;
            }
    

    2.删除class

    function removeClass(obj,className){
                //如果原来有class
                if (obj.className!='') {
                    var arrClassName=obj.className.split(' ');
                    var _index=arrIndexOf(arrClassName,className);
                    //如果有我们要移除的class
                    if (_index!=-1) {
                        //如果要添加的class在原来的class中不存在
                        arrClassName.splice(_index,1);
                        obj.className=arrClassName.join(' ');
                    }
                }
            }
            function arrIndexOf(arr,v){
                for (var i=0;i<arr.length;i++) {
                    if (arr[i]==v) {
                        return i;
                    }
                }
                return -1;
            }
    

    相关文章

      网友评论

          本文标题:DOM知识结构

          本文链接:https://www.haomeiwen.com/subject/gzoizttx.html