DOM进阶知识

最新推荐文章于 2022-08-04 00:25:14 发布

LinearLaw

最新推荐文章于 2022-08-04 00:25:14 发布

阅读量383

点赞数 1

文章标签： JavaScript dom

本文链接：https://blog.csdn.net/LinearLaw/article/details/62214785

版权

DOM进阶

offset系列

需求：使用element.style.left是无法获取值的，只能给style.left赋值；
    因此需要用offset获取该元素在页面中的位置；

（1）、offsetLeft：
    表示自己的左上角相对于一个叫做offsetParent的水平偏移量；

    1、标准流、浮动、非脱标定位
        offsetParent是谁？body；
        永远是指某个元素距离body的左上角的水平偏移量；

    2、脱标定位
        absolute
            offsetParent是谁？元素相对谁定位，offsetParent就是谁；
            这个元素距离offsetParent的水平偏移量；
        fixed
            offsetParent是谁？null；
            指这个元素距离浏览器可视区域的左上角的水平偏移量；

两种情况：
    标准流、浮动、非脱标定位
        offsetLeft = 自己的margin
                        + offsetParent的margin、padding、border；
    脱标定位
        offsetLeft = 自己的left + margin-left；

（2）、offsetTop
跟offsetleft是一样；

    tips:使用offsetTop和offsetLeft获取当前元素的定位值，
        再将该值赋予新的值，最后将新的值赋给style.top或style.left;
        var currentTop = box.offsetTop;
        currentTop+=100;
        box.style.top=currentTop;


（3）、offsetWidth
其实就是一个元素的实际大宽度；
（4）、offsetHeight
其实就是一个元素的实际大高度；

    tips:自封装动画函数需要用到offsetTop；

scroll系列

1   scrollLeft
    指元素里面的内容滚动出去的水平距离;
2   scrollTop
    指元素里面的内容滚动出去的垂直距离;

3   scrollWidth
    如果元素的宽度大于内容的宽度;
    返回元素的宽度 （不包括滚动条）;
    否则就是就是元素里面内容的宽度;

4   scrollHeight
    如果元素的高度大于内容的高度
    返回元素的高度（不包括滚动条）
    否则就是元素里面内容的高度

tips:scrollTop和scrollLeft需要做兼容处理;
    document.onscroll = function () {
            console.clear();

            这个方式在ie下无法获取到正确的scrollTop;
        console.log(document.body.scrollTop);

            在ie底下，认为滚动条不是body的，而是html的;
        console.log(document.documentElement.scrollTop);

            这个方式是谷歌、火狐、高版本的ie支持;
        console.log(window.pageYOffset);
    }

获取计算过后的样式

1、getComputedStyle
    作用：获取元素的所有计算过后的样式对象；

    用法：window.getComputedStyle(element,pseudoElt)；
        element         :    目标元素；
        pseudoElt       :    伪元素；

    返回值：包含了所有计算过后的样式的对象；
    注意点：如果没有获取伪元素，第二个参数要写null为了兼容，ie8底下不支持；

2、currentStyle
    作用：获取元素的所有计算过后的样式对象；

    用法：element.currentStyle；
    得到的是ie8下面的一个包含了计算过后的样式的对象，ie8支持；

        tips：多属性动画函数需要用到getComputedStyle；

client系列

1、（没用）clientTop（只读取）
        某个元素顶部边框的宽度；
        其实这货没什么用...

2、（没用）clientLeft（只读取）
        一个元素的左边框的宽度；
        也没什么用...

        如果元素的文本方向(direction)是从右向左（RTL, right-to-left），
        并且由于内容溢出导致左边出现了一个垂直滚动条，
        则该属性包括滚动条的宽度不包括左外边距和左内边距；

3、  clientWidth（只读取）
        表示元素的内部宽度；
        该属性包括内边距，但不包括垂直滚动条（如果有的话）、边框和外边距；

            clientWidth = 左右paddig + 内容的宽度（width）；

        tips：不能把滚动条的宽度计算进来；

4、  clientHeight（只读取）
        返回元素内部的高度(单位像素)；
        包含内边距，但不包括水平滚动条、边框和外边距；

        clientHeight的计算方式和clientWidth是一样的；

5、  clientX（只读取）
        事件发生时所处的可视区域的坐标；
        可视区域：就是整个浏览器的大小；
        MouseEvent.clinetX属性指的是鼠标事件的响应位置的x坐标；

6   clientY（只读取）
        事件发生时所处的可视区域的坐标；
        MouseEvent.clinetY属性指的是鼠标事件的响应位置的y坐标；

        tips:btn.onclick = function (event){}；
                event就是事件对象，但是这个方式在ie8不支持；
            兼容写法：event = window.event || event；

三大系列

client（坐标）、scroll（滚动条）、offset（属性值）；

兼容：
    event.client;           （ie8以上支持）
    window.event.clientX;   （ie8以下支持）

pageX、pageY     指代元素相对于整个页面的坐标；

    tips：client指的是当前屏幕显示的区域；
        page指的是整个html页面；

缓动动画：

注册事件

（1）、注册事件兼容写法
    function addListener(element,event,fn){
        if (element.attachEvent){
            element.attachEvent(“on”+event,fn);
        }else {
            element.addEventListener(event,fn,false);
        }
    }
（2）、移除事件绑定的处理程序
    1、on的方式
            方法：事件源.on+事件名 = null；

    2、removeEventListener
            语法：事件源.removeEventListener(事件名,处理程序,在哪个阶段)；
            例子：btn.removeEventListener(“click”,clickHandel,false)；
            细节：
                如果你在不同的阶段分别绑定了两个函数，要分开移除；
                移除的是使用addEventListener绑定的处理程序；
            兼容：ie8不支持；

    3、detachEvent
            语法：事件源.detachEvent(on+事件名,处理程序)；
            例子：btn.detachEvent(“onclick”,clickHandle)；
            细节：移除的是使用attachEvent绑定的处理程序；
            兼容：ie6-ie10支持，其余不支持；
（3）、事件的三个阶段
    事件的三个阶段分为：事件捕获阶段、事件目标阶段、事件冒泡阶段；

    要知道事件的阶段，需要通过一个属性：event.eventPhase；
    当eventPhase的值为1的时候，是事件捕获阶段，为2的时候是事件的目标阶段，为3的时候是冒泡阶段；

    事件在出现的时候只会包含两个阶段：
            a)  捕获和目标
            b)  冒泡和目标

        tips：冒泡和捕获不会同时出现；

    三个阶段的异同：事件在触发的时候，是有一个过程的；

（4）、清除默认事件和冒泡事件

    tips:子元素和父元素注册了同样的事件，如果子元素触发了事件，那么父元素也会触发；
        有时候不需要这样的效果，这个效果也不好控制，所以要阻止事件冒泡；


    function stopBubble(e){
        if(e && e.stopPropagation){
            e.stopPropagation();            //谷歌和火狐的写法
        }else{
            window.event.cancelBubble = true;   //ie和谷歌的写法；
        }
    }

    function stopDefault(e){
        if(e && e.preventDefault){
            e.preventDefault();
        }else{
            window.event.returnValue = false;
        }
        return false;
    }

（5）、事件类型
    得到的是不带on的事件名称；
    eg:
        box.onmouseup = function (e) {
            console.log(e.type);
        }

正则表达式（RegExp）

（1）、表示法
    var reg = new RegExp('abc');
    var reg = new RegExp(/abc/);    （通常会用这种形式）；

    var reg = /abc/;

        reg.text("需要检测的字符串")；   判断该字符串是否符合该正则表达式，返回布尔值；

        string.match(RegExp);   返回一个数组，数组里包含匹配结果，没有结果返回null；

        RegExp.exec(string);    与match作用相同；

（2）、元字符

    .       除以\n之外的所有单个字符；
    \       转义字符；

    |       左右表达式出现一次即true，为了避免歧义需要加()；
        eg：1a||b32，写成1(a||b)32;

    ()      优先级，分组

（3）、量词
    ？       某个字符出现0-1次；
    +       一次或多次；
    *       0-n次；
    {n}     n为正整数，出现n次；
    {n, }   
    {n,m}   

（4）、范围
    [0-9]   
    [a-z]
    [A-Z]   (支持连写)

    \d      数字，digital;
    \D      非数字;
    \s      空白字符，space;
    \S      非空白字符;
    \w      单词，word;
    \W      非单词；

    ^       开头;
    $       结尾;

    汉字编码    [\u4e00-\u9fa5];