JS之DOM（二）

一、DOM节点的操作

1.增加：

　　(1). document.creatElement('标签名');创建元素节点

　　(2). document.creatTextNode('文本内容')；创建文本节点

　　(3). document.creatComment('注释内容');　　创建注释节点

　　(4). document.DocumentFragment();添加文本碎片

2.插入

　　(1). dom.appendChild('domName'); 向Dom添加子节点

　　　　document.body.append('domName');向body下添加子节点

　　(2). Parent.insertBefore(a, b);/*insert a before b*/

3.删除

　　(1). Parent.removeChild('子节点标签名');剪切子节点，并返回

4.替换

　　(1). Parent.replaceChild(new, origin);用new 来替换orign，且orign返回

二、Element的一些属性

　　1. dom.innerHTML 返回dom的内容，返回类型为字符串，可读可写本

for(var i = 0; i < 3; i++){
    div.innerHTML += '<span>i</span>';
}

　　2.dom.innerText(火狐不兼容)/dom.textContent(老版本IE不好用)，注意：影响操作赋值语句，会影响标签，修改覆盖

三、Element的一些方法

　　1.dom.setAttribute('特证名', '修改后内容')；设置特征（包括自定义的）；

　　 div.setAttribute('id', 'demo');

　　2.dom.getAttribute('特证名')；获取特征值

　　注意：ＪＳ改变样式，以改变class为优先选择

利用上述一、二、三的内容可以动态的向html文档添加内容

四、日期对象 Date（）

　　1.计算机纪元时间：1970.1.1

五、计时器

　　1、setInterval(执行函数，间隔时间)；每间隔设定时间，执行一次要求的函数

var i = 0;
    window.setInterval(function(){
    i++;
    console.log(i);
    console.log(this);// => window,++
},1000 );

　　特点：(1).耗性能，执行时间有误差不准，（因为放入执行队列后不一定执行）

　　　　 (2).setInterval()存在返回值　　

　　　　　(3). 函数参数部分传入字符串(函数体)也可执行

setInterval('i++;console.log(i)',1000);

　　2.clearInterval(setInterval的返回值); 停止setInterval函数的执行

　　　　　var i = 0;
        var timer = window.setInterval(function(){
            i++;
            console.log(i);
            if(i == 10){
                clearInterval(timer);
            }
        },1000 );// => 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
　　　　　　setInterval()返回值为该方法第几次定义的数字；

　　3.setTimeout(function(){},time);//间隔time后执行该函数一次

　　4.learTimeout()；终止setTimeout

六、DOM基本操作

　　1.查看滚动条的滚动距离

　　　　（1）window.pageXOffset/pageYOffset
　　　　　　　　　横轴和竖轴
　　　　　　IE8及IE8以下不兼容
　　　　（2）a. document.body.scrollTop/document.body.scrollLeft
　　　　　　b. document.documentElement.scrollTop/document.documentElement.scrollLeft;
　　　　　　任何一个浏览器a和b两种方法必有一个不能用，无值，所以：两种方法求和即可解决这种问题
　　　　（3）封装结局兼容和第二个问题

　　　　　　function getScrollOffset() {
                if(window.pageXOffset) {
                    return {
                        w: window.pageXOffset,
                        h: window.pageYOffset
                    }
                }
                var dis = {
                    w: document.body.scrollLeft + document.documentElement.scrollLeft,
                    h：document.body.scrollTop + document.documentElement.scrollTop;
                }
            }

　　2.　（1）window.innerWidth/window.innerHight,可视区域宽高，IE8及IE8以下不兼容
　　　　（2）标准模式下：document.documentElement.clientWidth/document.documentElement.clientHeight
　　　　 (3)怪异模式下：document.body.clientWidth/document.body.clientHeight
　　　　　　（怪异模式下，老版本语法规则兼容，方法：将上方<!DOCTYPE html>去掉）
　　　　　　　document.compatMode 在控制台查看是否为怪异模式,返回'BackCompat',则为怪异模式，返回'CSS1Compat',则为非怪异模式
　　　　(4)可视区封装域宽高，解决兼容和不同模式下问题

　　　　　　function setViewportOffset() {
                 if(window.innerWidth){
                     return {
                         w: window.innerWidth,
                         h: window.innerHeight
                     }
                 }
                 if(document.compatMode == 'BackCompat'){
                     return{
                         w: document.body.clientWidth,
                         h: document.body.clientHeight
                     }
                 }else {
                     return {
                         w: document.documentElement.clientwidth,
                         h: ocument.documentElement.clientHeight
                     }
                 }
             }

　　3.查看元素尺寸
　　　　（1）elementNode.getBoundingClientRect();
　　　　　　返回的left和top，为左上角坐标，right和bottom为右下角坐标，相对浏览器；
　　　　　　height和width在老版本并未实现
　　　　　　返回结果为一个对象且非实时
　　　　（2）封装，解决老版本不兼容问题

　　　　Element.prototype.getElementOffset = function(){
                var objData = this.getBoundingClientRect();
                if(objData.width) {
                    return {
                        w: objData.width,
                        h: objData.height
                    }
                }else{
                    return {
                        w: objData.right - objData.left,
                        h: objData.top - objData.bottom
                    }
                }
            }

　　　　（3）elementNode.offsetWidth/offsetHeight/offsetLeft/offsetTop/,查看该元素宽高
　　　　　　dom.offsetLeft/offsetTop 对于无定位父级的元素，返回相对整个文档的坐标，对于有定位父级的元素，返回相对于最近定位父级元素的坐标
　　　　　　offsetParent 返回最近的定位的父级，body调用返回null
　　　（4）封装获得返回元素右下角相对于浏览器原点的坐标

　　　　Element.prototype.getScrollOffset = function () {
                if(!this.offsetParent){
                    return{
                        w: this.offsetWidth,
                        h: this.offsetHeigth
                    }
                }
                var width = this.offsetWidth,
                    height = this.offsetHeight,
                    tar = this;
                while(tar.offsetParent != null){
                    tar = tar.offsetParent;
                    width += this.offsetWidth;
                    height += this.offsetHeight;
                }
                return {
                    w:  width + tar.offsetWidth,
                    h: height + tar.offsetHeight
                }
            }

　　4.让滚动条滚动
　　　　1.scrollTo(x,y);滚动到x，y的距离，每次都相对于浏览器原点
　　　　2.scroll（x，y）;和 1方法同
　　　　3.scrollBy();滚动到x，y的位置，每次都相对于当前滚动条的位置，之前数据累加

posted @ 2016-03-07 12:50 Walker-lyl 阅读(365) 评论(0) 收藏举报

刷新页面返回顶部

学如逆水行舟，不进则退。

JS之DOM（二）

公告