节点操作与事件对象

YQi
185 阅读3分钟

节点操作

查找节点

  1. 父节点查找：parentNode 属性，返回最近一级的父节点 找不到返回为null。

    语法：子元素.parentNode

  2. 兄弟关系查找：

    下一个兄弟节点：nextElementSibling 属性

    上一个兄弟节点：previousElementSibling 属性

  3. 子节点查找：

    childNodes：获得所有子节点，包括文本节点(空格,换行)、注释节点等。

    children （重点）：仅获得所有元素节点，返回的还是一个伪数组。

增加节点

  1. 创建节点：document.createElement('标签名');

  2. 追加节点：

    插入到父元素的最后：父元素.appendChild(要插入的元素)

    ​ appendChild：只能插入一个元素。 append：能插入多个元素。

    插入到父元素的前面：父元素.inserBefore(插入的元素, 在哪个元素前面)

  3. 克隆节点：cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值。语法：元素.cloneNode(布尔值)

    若为true，则代表克隆时会包含后代节点一起克隆--深拷贝。 若为false，则代表克隆时不包含后代节点--浅拷贝。

删除节点

  • 语法

    删除指定的元素：父元素.removeChild(要删除的元素)

    删除自己：父元素.remove( )

时间对象

实例化

  • 获得当前时间：let date = new Date( )
  • 获得指定时间：let date = new Date('1949-10-01')

时间对象方法

​ 转换为实际开发中常用的格式

1649313205487.png

时间戳

  • 指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。

    <script>
    //三种方式获取时间戳
    let date = new Date();
    
    console.log(date.getTime());

    console.log(+new Date()); 

    console.log(Date.now());
</script>

事件对象

获取事件对象

  • 什么是事件对象

    也是个对象，这个对象里有事件触发时的相关信息。

  • 如何获取事件对象

    在事件绑定的回调函数的第一个参数就是事件对象。 一般命名为event、ev、e

    <script>
  document.addEventListener('click',function(e) {
           
  })
</script>

事件对象常用属性

  • type：获取当前的事件类型
  • clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
  • key：用户按下的键盘键的值

事件流

事件捕获和事件冒泡

  • 事件冒泡概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。

  • 事件捕获概念：从DOM的根元素开始去执行对应的事件 (从外到里)。

    代码：DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

阻止事件流动

  • 因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素。若想把事件就限制在当前元素内，就需要阻止事件流动。阻止事件流动需要拿到事件对象。

    • 语法：事件对象.stopPropagation()

  • 鼠标经过事件：

    mouseover 和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果(推荐)

  • 阻止默认行为，比如链接点击不跳转，表单域的不提交。

    • 语法：e.preventDefault()

事件委托

  • 事件委托是利用事件流的特征解决一些开发需求的知识技巧。
  • 优点：给父级元素加事件（可以提高性能）
  • 原理：事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发。
  • 实现：事件对象.target可以获得真正触发事件的元素。

事件绑定-取消绑定

  • addEventListener 可以绑定多个同名事件。
  • removeEventListener 可以取消对应的事件类型和事件处理函数。
  • 无法取消 addEventListener 事件 对应的匿名函数。
avatar
文章
阅读
粉丝