【JavaScript】17.文档对象模型补充

Composition
233 阅读8分钟

这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

文档对象模型补充

01.操作元素

（1）获取元素的另一种方法

  • 利用节点层级关系获取元素

    页面中所有内容都是节点

  • 基本属性：

    • nodeType、nodeName、nodeValue：节点类型、节点名称、节点值

      元素节点：nodeType为1

      属性节点：nodeType为2

      文本节点：nodeType为3（文本节点包括文字、空格、换行等）

  • 父级节点：

    • parentNode

      得到离元素最近的父级节点，如果没有则返回null

  • 子级节点：

    • childNodes

      获得所有子节点，包含元素节点、文本节点

    • children

      获取所有的子元素节点

    • firstChild和lastChild

      获取第一个（最后一个）子节点，不管是文本节点还是元素节点

    • firstElementChild和lastElementChild

      获取第一个（最后一个）子元素节点，有兼容性问题 ，IE9以上才支持

    • parentNode.children[0] 和 parentNode.children[parentNode.children.length - 1]

      返回第一个（最后一个）子元素，没有兼容性问题

      parentNode.children返回的是一个伪数组，

      parentNode.children.length - 1：表示最后一个子元素

  • 兄弟节点：

    • nextSibling和previousSibling

      获取下一个（上一个）兄弟节点，包含元素节点或者文本节点等等

    • nextElementSibling和previousElementSibling

      获取下一个（上一个）兄弟元素节点，兼容性问题，IE9以上才支持

    • 解决兼容性问题：自己封装一个函数

      通过判断 nodeType 值，使用第一种方法实现

（2）动态操作元素节点

  • 创建元素节点

    • document.createElement(" ");

    动态创建元素节点

  • 添加元素节点

    • parentNode.appendChild("child");

    在父元素parentNode的末尾，追加一个子元素child

    • parentNode.insertBefore("child", "指定元素");

    在父元素parentNode中，将子元素child添加到指定的其它子元素的前面

  • 删除元素节点

    • parentNode.removeChild("child");

  • 复制元素节点

    • node.cloneNode();

    返回调用该方法的节点的一个副本

    如果括号为空，或者false，则为 浅拷贝 ，只复制标签不复制里面的内容

    如果括号为true，则为 深拷贝 ，会同时复制标签和里面的内容

（3）三种动态创建元素方法的区别

document.write、element.innerHTML、document.createElement()

  • 关于document.write() ：

    • document.write是直接将内容写入页面的内容流，
    • 如果是在文档流执行完毕后，执行 document.write，则会导致页面内容全部重绘

  • 关于element.innerHTML：

    • 创建多个元素的效率高，但结构稍微复杂
    • 但通过拼接字符串的方法添加元素到页面中效率很低（字符串的不可变性）
    • 因此，可以通过**数组的方法push()**添加元素，效率最高

  • 关于document.createElement()：

    • 创建多个元素的效率低，但结构更清晰
    • 通过appenChild（）直接追加子元素到父元素末尾，效率高

02.关于页面元素的【事件】

（1）基本概念

  • 基本事件组成

    • 事件三要素：
      • 事件源：被触发事件的对象
      • 事件类型：如何触发事件，如：点击、滑过、键盘输入等
      • 事件处理程序：完成什么事件
    • 关于this
      • this指向的是事件函数的调用者

  • 基本事件执行过程

//1. 首先获取事件源元素
var btn = document.getElementById("btn")
//2. 然后 绑定事件（注册事件）
//3. 最后添加事件处理程序
div.onclick = function(){
    alert("触发事件")
}

（2）元素注册事件的两种方式

  • 传统注册方式

    • 利用on开头的事件，如：onclick
    • 唯一性：同一个元素的同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

  • addEventListener事件监听

    • 语法结构：eventTarget.addEventListener(type, listener, useCapture);

      • 将指定的监听器注册到eventTarget（目标对象）上

      • type：事件类型字符串，如click、mousemover

      • listener：事件处理函数，事件发生时，会调用该监听函数

      • useCapture：可选参数，是一个布尔值，默认false

  • 注册事件

eventTarget.addEventListener("type", function)
//为目标函数绑定 type 事件，该事件的处理函数是 function

（3）删除事件的方式

  • 传统方式删除事件

    • eventTarget.onclick = null

  • removeEventListener删除事件

    • eventTarget.removeListener
    eventTarget.removeListener("type",function)
//移除目标对象的 type 事件，该事件绑定 function 处理函数

（4）DOM事件流

  • 基本概念

    • 事件流是指：从页面中接收事件的顺序
      • 事件发生时，会在元素节点之间，按照特定的顺序传播，这个传播过程即DOM事件流

  • 阶段概述

    • 捕获阶段

      • 从 DOM 最顶层的节点开始，然后逐级向下传播，到目标元素接收的过程

      • 在逐级向下传播（沉底）中，如果有祖先元素绑定了相同类型事件（如点击事件），那么在触发目标后代元素事件时（点击后），会按照沉底的顺序（从上到下），依次触发事件（点击的事件）

    • 当前目标阶段

    • 冒泡阶段

      • 事件开始时，从目标事件元素开始接收，然后逐级向上传播，到DOM最顶层的节点，这一过程

      • 在逐级向上传播（冒泡）中，如果有祖先元素绑定了相同类型事件（如点击事件），那么在触发目标后代元素事件时（点击后），会按照冒泡的顺序（从下到上），依次触发事件（点击的事件）

  • 其它需要注意

    • onclick等on开头的事件，只会触发冒泡阶段
      • 【注意】onblur、onfocus、onmouseenter、onmouseleave是没有冒泡阶段的
    • addEventListener可以触发多个阶段
      • useCapture：参数值为true，则为捕获阶段
      • useCapture：参数值为false，则为冒泡阶段

（5）事件对象

  • 基本概念

    • 事件发生后，跟事件相关的一系列信息数据集合，都会存放在一个事件对象event里面

      • event对象，代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等

    • 事件对象只有在有事件时才会存在，它是系统给自动创建的，即不需要传参进去

      eventTarget.onclick = function(event){ ... }

      这个事件对象我们可以自己命名，如 event 、 evt、 e

    • 事件对象的兼容性问题

      • IE6、7、8，只会识别 window.event

      兼容： e = e || window.event;

（6）事件对象的常用属性和方法

  • 返回触发事件的对象：谁触发的事件，就返回谁，语法：e.target

  • 返回的是绑定事件的对象：谁绑定的事件，就返回谁，语法：this

  • 返回触发事件的类型：用什么方式触发，就返回什么类型，语法：e.type

  • 阻止默认事件

    • 高版本：e.preventDefault()：

    • 低版本（IE6、7、8）：e.returnValue

    e.onclick = function(e) {
    // 普通浏览器 e.preventDefault()  方法
     e.preventDefault()
    // 低版本浏览器 ie678  returnValue  属性
     e.returnValue
    // 我们可以利用return false 也能阻止默认行为 
    // 没有兼容性问题
    return false
}

  • 阻止事件冒泡

    • 标准写法：e.stopPropagation()

    • 非标准写法：e.cancelBubble = true

      if(e && e.stopPropagation){
    e.stopPropagation()
}else{
    window.event.cancelBubble = true
}

（7）事件委托（代理、委派）

  • 不需要给每个子节点单独设置事件监听器，而是把事件监听器设置再其父节点上，即把事件委托给了父节点

    因为事件冒泡，点击子节点后，事件会冒泡到父节点上，同样会触发事件，然后可以通过e.target找到是哪一个子节点触发的事件（点击了谁）

    事件委托的作用：只操作了一次DOM

03.鼠标事件

（1）基本事件

  • onclick：鼠标点击事件

  • onfocus：获得焦点事件

  • onblur：失去焦点事件

  • onmouseover：鼠标经过事件

    • 经过子元素也会触发父元素的事件

  • onmouseenter：鼠标经过事件（不会冒泡）

    • 只有经过盒子本身才触发

  • onmouseout：鼠标离开事件

    • 经过子元素也会触发父元素的事件

  • onmouseleave：鼠标离开事件（不会冒泡）

    • 只有经过盒子本身才触发

  • 阻止链接跳转

    <a href="javascript:void(0);"> 点击不跳转 </a>

<a href="javascript:;"> 点击不跳转 </a>

  • 禁用鼠标右键菜单：contextmenu

    e.addEventListener("contextmenu", function(e) {
    e.preventDefault()
})

  • 禁止鼠标选中：selectstart

    e.addEventListener("selectstart", function(e) {
    e.preventDefault()
})

（2）鼠标事件对象

  • 鼠标坐标

    • e.clientX和e.clientY

    得到鼠标相对于 client可视窗口区域的坐标

    • e.pageX和e.pageY————（主要）

    得到鼠标相对于页面文档的坐标

    • e.screenX和e.screenY

    得到鼠标相对于电脑屏幕的坐标

  • 鼠标移动

    • mousemove

    只要鼠标移动，就触发事件

    document.addEventListener('mousemove', function(e) {
   console.log("X坐标:" + e.pageX + ",Y坐标:" + e.pageY)
})

04.键盘事件

（1）基本事件

  • keyup ：按键弹起的时候触发 ，松开键盘时只触发一次

  • keydown ：按键按下的时候触发，可识别功能键

    • 按下不松开会一直触发

  • keypress ：按键按下的时候触发，不可识别功能键，如ctrl、shift、 左右箭头等

    键盘事件的响应顺序：keydown → keypress → keyup

    【注意】三者的区别与应用场景

（2） 键盘事件对象

  • e.keycode：返回对应按键的ASCII码值

    可以判断用户按下了哪一个键

    • keyup、keydown不区分字母大小写，且以大写状态显示键值

    • keypress可以区分字母大小写

本人前端小菜鸡，如有不对请谅解

avatar
文章
阅读
粉丝