前端知识点回顾——Javascript篇(五)

DOM

常用的DOM获取方法：

  • node.children 返回子元素节点，没有兼容性问题，动态获取
  • node.parentNode 获取父节点，没有兼容性问题
  • node.offsetParent 获取最近的定位父节点
  • node.tagName 获取元素节点的标签名

常用的DOM操作：

  • document.createElement(“TagName”) 创建一个元素节点

  • parentNode.appendChild(node) 在父节点内容的最后添加子节点

  • parentNode.insertBefore(insertNode,targetNode) 在目标节点前插入一个节点

  • parentNode.replaceChild(replaceNode,targetNode) 用一个节点替换掉目标节点

  • parentNode.removeChild(Node) 删除某个子节点

  • node.cloneNode(Boolean) 接受一个布尔值作为参数，false时为浅克隆，只复制节点本身；true时为深克隆，节点和它的后代节点全部克隆（但是它们自身的事件是不会克隆过来的）

  • document.createDocumentFragment() 文档碎片，作为中间仓库，把要插入所有的节点先存起来，再一次性插入。

innerHTML 和 appendChild() 方法添加子元素节点的区别

  • node.innerHTML()方法是用字符串的形式添加子元素节点，要注意这样做会覆盖原先存在的节点，导致原节点身上的事件无效

  • appendChild()每次调用会让页面重新渲染，所以调用次数过多会使页面性能下降

因此如果操作的节点身上没有事件的话，推荐使用innerHTML方法；若添加的节点身上带有事件而且数量还挺多的话可以使用文档碎片方法

文档节点的相关属性

以下属性都没有单位，默认为px。

  • client：没有兼容性问题，只读属性

    clientWidth / clientHeight

    在元素上使用，获取的是content大小 + padding大小
    document.documentElement(就是html元素) 使用：文档可视区域的大小，不是总大小（不包含滚动条）
    clientTop / clientLeft

    边框的厚度

  • offset: 没有兼容问题

    offsetWidth / offsetHeight
    在元素上使用，获取的是content大小 + padding大小 + 边框大小
    document.documentElement 使用 : 只能获取可视区域的宽度，但是能获取实际高度
    offsetTop / offsetLeft
    获取元素顶部距离定位父级顶部距离的值，但是不包含定位父级的边框厚度
    获取元素左边距离定位父级左边距离的值，但是不包含定位父级的边框厚度

  • scroll：

    scrollWidth / scrollHeight
    在元素上使用，获取的是content大小 + padding大小
    当元素内容超出，宽度 = content大小 + 左padding大小 + 超出部分的大小 = 左padding + 内容宽度
    如果元素内容超出,并且使用overflow：hidden,宽度 = content大小 + padding大小 + 超出部分的大小 = padding + 内容宽度
    scrollTop / scrollLeft IE5不行，可写属性
    document.documentElement.scrollTop / document.body.scrollTop（不同浏览器会兼容其一种写法，最好两种同时写上）
    document.documentElement.scrollLeft / document.body.scrollLeft
    获取滚动轴x轴或者y轴方向的滚动偏移值

  • inner： 不兼容IE8，了解即可

    innerWidth / innerHeight window专属，获取窗口的可视区域宽高（加上滚动条的宽度）

鼠标属性

事件对象e（IE是window.event）下的鼠标属性：

  • client: 没有兼容问题
    clientX / clientY
    鼠标到可视区域的top和left值（鼠标当前点击鼠标的x和y坐标）
  • page: 不兼容IE8及以下 （用client+scroll替代）
    pageX / pageY
    鼠标到文档顶部的left和top值

阻止事件冒泡

事件冒泡：指的是子类触发了某个事件，若子类的父级存在相同的事件类型也会依次全部触发。

阻止冒泡：只是阻止了事件的冒泡，事件源的事件依然会执行。

事件源.事件 = function(e){
    e = e || window.event;  //兼容ie
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true; //兼容ie
    }
}

DOM2级事件

IE10以上和其他浏览器：

addEventListener(事件名不加on， 事件处理函数, 布尔值)/removeEventListener(事件名不加on， 事件处理函数, 布尔值) 顺序执行，先绑定的先执行

这里布尔值默认为false，表示冒泡。若设置为true则表示捕获，其执行则触发其子元素同类事件执行。

兼容IE10以下：

attachEvent(on+事件名， 事件处理函数)/detachEvent(on+事件名， 事件处理函数) 逆序执行，先绑定的后执行。要特别注意，此时事件处理函数中的this不再指向事件源而是指向window，因此需要用call函数处理。

事件代理（事件委托）

原理是利用事件的冒泡（/捕获）的特性，在子元素触发事件后冒泡被父元素捕捉到，因此在父元素事件对象中的target属性（IE中为e.srcElement）就会指向这个触发事件的子元素。e.currentTarget指向的是添加监听事件的父元素本身。

因此要注意，只有能冒泡的事件才能用事件代理！像onmouseenter和onmouseleave这两个不冒泡的事件是不行的！

阻止默认行为

阻止事件触发时默认会执行的行为。

target.onXXX = function(event){
    event = event || window.event;
    if(event.preventDefault){
        event.preventDefault();  //主流浏览器
    }else{
        event.returnValue = false;  //低版本IE
    }
}

滚轮事件

  • 谷歌和IE浏览器

    滚轮事件 mousewheel (未绑定事件时，在谷歌和IE中这个属性为null，在火狐浏览器中为undefined，可以依此做兼容性处理)

    滚动方向步长 event.wheelDelta 上滚+120 下滚-120

  • 火狐独有

    滚轮事件 DOMMouseScroll 只允许DOM2级事件绑定

    滚动方向步长 event.detail 上滚-3 下滚+3

posted @ 2019-06-13 22:56  simple小前端  阅读(114)  评论(0)  编辑  收藏  举报