操作DOM，偏移量，各种事件

binbinXu
131 阅读3分钟
  1. 操作DOM

    常规意义上的操作DOM，就是增删改查 创建元素节点：document．createElement（＇li＇）; 创建文本节点：document。createTextNode（'文本内容'）; （节点创建完成之后，页面不显示） 增加DOM： 增加到指定父节点的最后：父节点元素.appendChild(增加的节点)； 增加到指定父节点的最后2：父节点元素.insertBefore(增加的节点，插入到那个节点前(如果传递的是null的话是插入到父节点最后)); 增加到父节点最前面：父节点元素.insertBefore(增加的节点,父节点.firstElementChild); 删除DOM：父节点元素.removeChild(要删除的节点); 修改节点：父节点元素.replaceChild(新的节点，要被修改的节点)

  2. 克隆DOM

    想要复制的节点.cloneNode(参数布尔值) 参数为 false 不克隆子节点; 默认值 参数为 true 克隆子节点;

  3. 获取元素偏移量

    元素.offset offset后可跟方位词，例：offsetLeft,offsetY;

  4. 获取元素尺寸

    方法1：offsetXXX （XXX为宽或高） 得到的值 = 实际设置的宽（高） + padding + border； 方法2：clientXXX （XXX为宽或高） 得到的值 = 实际设置的宽（高）+ padding；

  5. 获取浏览器窗口尺寸

    方法1：window.innerXXX （XXX为宽或高）计算时 会包含浏览器滚动条; 方法2：document.documentElement.clientXXX （XXX为宽或高）计算时 不计算滚动条; （个人理解：前者的对象是浏览器窗口，而后者是html）;

  6. JS的事件

    事件，在某一时刻，用户（在页面）做了某一件事，需要给出的反馈。 事件三要素：1，事件源；2，事件类型；3，事件处理函数 DOM 0级事件绑定 事件源.on事件类型 = 事件处理函数；（弊端：无法绑定多个同类型事件，后面新写的事件会覆盖原有的事件） DOM 2级事件绑定（事件监听） 事件源.addEventListener('事件类型'，事件处理函数， )

  7. 浏览器事件

    滚动事件：window.onload = function(){} 当页面所有资源加载完毕时执行；

  8. 鼠标事件

    onclick：左键单击 ondblclick：双击事件（300ms内连续点击两次鼠标） oncontextmenu：鼠标右键单击 onmousedown：鼠标按下 onmouseup：鼠标抬起 onmouseout：鼠标移出1 onmouseover：鼠标移入1 和鼠标移出1两个方法 移入和移出元素的子元素时都会触发； onmousemove：鼠标移动 onmouseenter：鼠标移入2 onmouseleave：鼠标移出2 和鼠标移入2两个方法 都只会在移入（出）元素时触发；

  9. 键盘事件

    document 或者 input document.on键盘事件的事件类型 = function(){}; onkeyup：键盘抬起 onkeydown：键盘按下 onkeypress：键盘按下抬起事件

  10. 表单事件

    onfocus：获得焦点 onblur：失去焦点 onchange：文本框内容改变 oninput：文本框输入内容

  11. 事件对象

    当事件触发时，携带一些信息； 放在事件处理函数的参数位置；

  12. 获取鼠标位置
    var oDiv = document.querySelector('div')
oDiv.onclick = function (e) {
    // 1. 获取 相对于 事件源 的鼠标坐标点
    console.log('====================================')
    console.log('相对于事件源 X 轴', e.offsetX)
    console.log('相对于事件源 Y 轴', e.offsetY)
    // 2. 获取相对于 页面 的坐标点
    console.log('====================================')
    console.log('相对于页面的 X 轴', e.pageX)
    console.log('相对于页面的 Y 轴', e.pageY)
​
    // 3. 获取相对于 浏览器窗口 的坐标点
    console.log('====================================')
    console.log('相对于浏览器窗口的 X 轴', e.clientX)
    console.log('相对于浏览器窗口的 Y 轴', e.clientY)
}
  13. 获取键盘事件

    e.key ===>返回按下的按键 e.keyCode ===>返回按下的按键的进制码（注：keyCode 已经移除，但是很多主流浏览器还支持使用）

        var inp = document.querySelector('#inp')
    inp.onkeyup = function (e) {
        console.log(e)
        if (e.ctrlKey && e.key == 'a') {
            console.log('此时按下了 ctrl健 和 a键')
        }
    }
avatar
文章
阅读
粉丝