JS之DOM API

一. 12中获取节点的方法

   

console.log(document.getElementById("dd").childNodes); //某节点全部子节点
    console.log(document.getElementById("dd").children);  //某元素的全部子元素
    console.log(document.getElementById("dd").parentNode); //某节点的父节点
    console.log(document.getElementById("dd").parentElement); //某元素的父元素
    /*
    * 前四个火狐谷歌IE都支持
    * 后面八个所有子节点IE8都当做子元素处理
    *
    *
    * */
    console.log(document.getElementById("dd").firstChild); //某节点的第一个子节点
    console.log(document.getElementById("dd").firstElementChild); //某元素的第一个子元素
    console.log(document.getElementById("dd").lastChild); //某节点的最后一个子节点
    console.log(document.getElementById("dd").lastElementChild); //某元素的最后一个子元素
    console.log(document.getElementById("dd").previousSibling); //某节点前一兄弟节点
    console.log(document.getElementById("dd").previousElementSibling); //某元素前一兄弟元素
    console.log(document.getElementById("dd").nextSibling); //某节点后一兄弟节点
    console.log(document.getElementById("dd").nextElementSibling); //某元素后一兄弟元素

二.IE8中子元素获取方式兼容性处理   

 function getfirstElementChild(ele){
        if(typeof ele.firstElementChild!="undefined"){
            return ele.firstElementChild;
        }else {
            var obj=ele.firstChild;           // 获取第一个子元素兼容性写法
            while(obj.nodeType!=1){
                obj=obj.nextSibling;
            }
            return obj;
        }
    }
    console.log(getfirstElementChild(my$("dd")));

    function getlastElementChild(ele){
        if(typeof ele.lastElementChild!="undefined"){
            return ele.lastElementChild;
        }else {
            var obj=ele.lastChild;           // 获取最后一个子元素兼容性写法
            while(obj.nodeType!=1){
                obj=obj.previousSibling;
            }
            return obj;
        }
    }
    console.log(getlastElementChild(my$("dd")));

    function getpreviousElementSibling(ele){
        if(typeof ele.previousElementSibling!="undefined"){
            return ele.previousElementSibling;
        }else {
            var obj=ele.previousSibling;           // 获取前一个子元素兼容性写法
            while(obj.nodeType!=1){
                obj=obj.previousSibling;
            }
            return obj;
        }
    }
    console.log(getpreviousElementSibling(my$("dd")));

    function getnextElementSibling(ele){
        if(typeof ele.nextElementSibling!="undefined"){
            return ele.nextElementSibling;
        }else {
            var obj=ele.nextSibling;           // 获取后一个子元素兼容性写法
            while(obj.nodeType!=1){
                obj=obj.nextSibling;
            }
            return obj;
        }
    }
    console.log(getnextElementSibling(my$("dd")));

三.innerText和textContent兼容性处理

 function setInnerText(element,text){
        if(typeof element.textContent=="undefined"){

            element.innerText=text;
        }else{

        element.textContent=text;}
    }
    function getInnerText(element){
        if(typeof element.textContent=="undefined"){
            return element.innerText;
        }else
            return element.textContent;
    }

四.三种操作元素的方式

        my$("dv").insertBefore(obj,my$("dv").firstChild);        //在第一个元素前面追加元素
        my$("dv").removeChild(my$("dv").firstChild);             //删除子元素                                 
        my$("dv").removeChild(my$("dv").firstChild);             //删除全部子元素                                         

五.为事件添加处理函数和清除处理函数的兼容性代码

function addEventListener(element,type,fn){  //fn只能用自定义函数传值不能直接用匿名函数
        if(element.addEventListener){
            element.addEventListener(type,fn,false);
        }
        else{
            if(element.attachEvent){
                element.attachEvent(type,fn);
            }
            else{
                element["on"+type]=fn;
            }
        }
    }
    /*
    *
    * 事件处理函数的清除remove
    *
    * */
    function removeEventListener(element,type,fn){
        if(element.removeEventListener){
            element.removeEventListener(type,fn,false);
        }else if (element.attachEvent){
            element.attachEvent(type,fn);
            }else {
                element["on"+type]=null;
                }
    }

六.封装scroll函数

function GetScroll() {
        this.left=window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
        || 0;
        this.top = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop
        || 0;
        this.mm =1;
    }

七.变速动画函数封装

function animateC(element,json,fn){
    clearInterval(element.itd);
    element.itd=setInterval(function(){
        var tag=true;
        for(var key in json){
            if(key=="opacity"){
                var current=getStyle(element,key)*100; //获得当前元素属性值
                var target=json[key]*100;
                var step=(target-current)/10;  //设置元素移动步数
                step=step>0?Math.ceil(step):Math.floor(step);
                current+=step;
                //当当前元素left<target时步数为正否则为负
                element.style[key]=current/100;
            }else if(key=="z-index"){
                element.style.zIndex=json[key];
            }else {//普通属性值
                var current=parseInt(getStyle(element,key));//获得当前元素属性值
                var target=json[key];
                var step=(target-current)/10;  //设置元素移动步数
                step=step>0?Math.ceil(step):Math.floor(step);
                current+=step;
                //当当前元素left<target时步数为正否则为负
                element.style[key]=current+"px";
            }
            if(current!=target)
                tag=false;
        }
        if (tag) {
            clearInterval(element.itd);
            if(fn){
                fn();
            }
        }//清除定时器

    },10);
}

八.匀速动画函数封装

function animateD(element, json, fn) {
    var itd = setInterval(function () {
            var tag = true;
            for (var key in json) {
                if (key == "z-index") {
                    element[key] = json[key];
                }  else {
                    var current = element[key]; //获得当前元素left值
                    var bushu = 10;  //设置元素移动步数
                    var target = json[key];
                    current += current < target ? bushu : -bushu; //当当前元素left<target时步数为正否则为负
                    if (Math.abs(target - current) >= Math.abs(bushu)) {  //当当前元素left与target差值大于步数时
                        element.style.left = current + "px"; //赋值元素left为current
                    } else {
                        element.style.left = target + "px"; //赋值元素left为target
                    }
                }
                if (current != target)
                    tag = false;
            }
            if (tag) {
                clearInterval(itd);
                if (fn)
                    fn();
            }
        }
    );
}

九.获取当前元素的pageX和pageY的兼容性处理

function PageXY(e)  {
    this.getEvt=function(){
        return e || window.event;
    }
    this.getScrollX=function(){
        return e.scrollLeft? e.scrollLeft:window.pageXOffset || (window.documentElement&&window.documentElement.scrollLeft) ||
        document.body.scrollLeft || 0;  //e.scrollLeft-->谷歌适用
    }
    this.getScrollY=function(){
        return e.scrollTop? e.scrollTop:window.documentElement&&window.documentElement.scrollTop ||
        window.pageYOffset || document.body.scrollTop || 0;
    }
    this.getPageX=function () {
        return e.pageX? e.pageX:this.getEvt(e).clientX +this.getScrollX(e);
    }

    this.getPageY=function () {
        return e.pageY? e.pageY:this.getEvt(e).clientY +this.getScrollY(e);
    }
};

 

转载于:https://my.oschina.net/u/3937325/blog/1922550