WebAPI学习之DOM操作

最新推荐文章于 2024-09-11 15:33:18 发布

bug超多的小姐姐

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量140

点赞数

分类专栏： webAPI 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46792892/article/details/113511390

版权

webAPI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在这里介绍的主要是针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作。

WebAPI学习之DOM操作

创建
- 创建元素的三种方式
  - document.write();
  - element.innerHTML
  - document.createElement();
- 区别
  1. document.write()是直接将内容写在页面的内容流中，但是文档流执行完毕，会导致页面全部重绘
  2. innerHTML是将内容写到某个DOM节点，不会导致页面重绘；创建多个元素效率更高（不需要拼接字符串，采取数组形式拼接），结构稍微复杂
  3. createElement()创建多个元素效率稍低一些，但是结构清晰
    综上所述，不同浏览器下，innerHTML效率比CreateElement高
增
- 增加子元素的两种方式
  - 父节点.appendChild(新增子节点)；
  - 父节点.insertBefore(新增子节点，指定子节点);
- 区别
  - appendChild是将新增子元素添加到父元素内部的最后
  - insertBefore是将新增子元素添加到父元素内部的指定子节点的前面
删
- 删除子元素的方式
  - 父节点.removeChild(要删除的子元素)；
改
- 主要修改dom元素的内容、属性、表单的值等
  - 修改元素固有属性，如src，href，title等
  - 修改元素自定义属性，如data-index等
  - 修改普通元素内容：innerHTML，innerText
  - 修改表单元素属性：如value，type，disabled(状态属性)
  - 修改元素的样式：style，className
- 语法格式
  - element.属性名=‘新的内容’
- 注意
  - innerHTML和innerText区别
    - 获取
      innerText会去掉空格和换行、html标签
      innerHTML保留完整内容
    - 设置
      innerText会把html标签当成普通字符
      innerHTML正常显示标签内容
  - 修改表单元素的状态属性
    - 修改状态属性的值应该设置为布尔类型
  - 修改元素的自定义属性
    - 语法格式为 element.setAttribute(‘属性名’，属性值）
  - 修改元素样式注意点
    - 修改单个属性的值可以使用 element.style . 属性名(行内样式，权重高)，css属性名过长要采用驼峰命名，例如backgroundColor（不可以使用‘-’）
    - 修改多个属性的值可以使用 element . className，(新建一个类，添加需要修改的属性),如果修改的属性是在原有属性上添加，修改时要写成 element . className = ‘原有类名新增类名’；
查
- DOM提供的API方法（古法,不提倡）
  - 通过id名获取元素 getElementById（‘id名’）返回值是唯一元素
  - 通过标签名获取元素 getElementByTagName（‘标签名’）返回值是伪数组或空伪数组（所有该标签名的元素的集合）
- H5提供的新方法（提倡）
  - querySelector(‘’)
    - 小括号中是标签名/类名，返回值是符合要求的元素集合中的第一个元素
    - 小括号中内容与css样式选择器一样，例如 querySelector(‘#id名’)
  - querySelectorAll(‘’)
    - 返回值是伪数组或者空伪数组（符合要求的元素集合）
- 利用节点操作获取元素（提倡）
  - 获取离子节点最近的父节点子节点.parentNode
  - 获取父节点的子元素节点集合父元素.children
  - 获取兄弟节点 element.previousElementSibling（前一个兄弟节点）/element.nextElementSibling（后一个兄弟节点）
属性操作
- 固有属性
  - element.属性名
- 自定义属性
  - element.getAttribute(‘属性名’)
  - 一般以data-开头，data-后面若属性名过长，要使用驼峰命名，
  - 访问以data-开头的属性的属性值时还可以使用 element.dataset.属性名或者 element.dataset . [‘属性名’]
  - 例如 data-gift-name = ‘andy’ , 获取该属性值应该写为element.dataset.giftName / element.dataset . [‘giftName’] / element.getAttribute(‘data-gift-name’)
- 移除属性
  - removeAttribute（‘属性名’）
事件操作
- 注册事件（绑定事件）
  - 传统注册事件
    - 同一个元素只能注册唯一的事件
  - 方法监听注册事件
    - 语法：
      element.addEventListener(‘不带on的事件名’, function () {})
    - 注意：
      - 里面的事件类型是字符串，必须加引号，而且不带on
      - 同一个元素，同一个时间可以添加多个监听器(事件处理程序)
- 删除事件（解绑事件）
  - 传统删除事件
    - ```
      var divs = document.querySelectorAll('div')
      //传统删除方式
       divs[0].onclick = function () {
      		alert('say Hi to beautiful girls');
      		divs[0].onclick = null;
       }
```
- 方法监听删除事件
  - removeEventListener（‘不带on的事件名’, function () {}）
  - ```
    //监听事件删除事件时必须使用有名函数且函数名不加小括号
     divs[1].addEventListener('click',fn1)
    //删除事件 removeEventListener
     function fn1() {
            alert('say Hi to beautiful girls');
            divs[1].removeEventListener('click', fn1)
    }
```
- 触发事件
  - 元素对象.事件类型()
  - 通过点击按钮触发文本框获取焦点的事件代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
</head>

<body>
    <input type="text" id="ipt"> <button id='btn'>按钮</button>
    <script>
        //给文本框注册获得焦点事件
        var ipt = document.querySelector('#ipt');
        ipt.onfocus = function () {
            console.log('好嗨哟~');
        }
        /* 单击按钮时，让文本框获得焦点 */
        var btn = document.querySelector('#btn');
        btn.onclick = function () {
            //触发文本框的获得焦点事件 元素对象.事件类型();
            ipt.focus();
        }
    </script>
</body>
</html>

事件流
- 什么是事件流？
  - 事件传播的过程称为事件流，传播的顺序为捕获阶段→目标阶段(执行当前点击的元素)→冒泡阶段
  - 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。
  - 目标阶段：事件到达目标节点。
  - 冒泡阶段：事件在目标节点上被触发后，不会终止，会逐层向上执行，直到追溯到根节点。
    - 事件处理函数只会在一个阶段执行；传统的注册事件方式只会在冒泡阶段发生
    - 通过监听方式注册事件，可以指定在哪个阶段发生
      - 如果第三个参数是true，事件从外向内执行，在捕获阶段发生；
      - 如果第三个参数为false或无参数，事件从内向外执行，在冒泡阶段发生；
- 什么是事件对象？
  - 当事件触发时，会把事件相关的信息记录到一个对象中，这个对象就叫做’事件对象’
- 如何获取事件对象？
  - 事件触发时，事件对象会被自动传给事件处理函数
  - 手动在事件处理函数中定义一个形参来接收(event或e)
- 常见的事件对象属性和方法
  - e.target 事件被触发的导火索，简单说就是鼠标点击触发事的位置
  - e.preventDefault() 事件对象的方法，用来阻止元素默认行为
  - e.stopPropagation() 事件对象的方法，用来阻止事件冒泡
  - e.pageX 鼠标在页面中的X轴坐标（无单位）
  - e.pageY 鼠标在页面中的Y轴坐标（无单位）
  - e.keyCode（获取按键的ASCII码值，类型为number）
事件对象阻止事件冒泡
- 语法：e.stopPropagation()
- 使用范围：要在哪里阻止就在哪里写
事件对象阻止元素默认行为
- 语法：e.preventDefault()
- 使用范围：要阻止哪个元素就在哪里写
事件委托
- 给父节点注册事件，设置监听器，利用冒泡原理影响设置每个子节点
常用的鼠标事件
- 鼠标点击 onclick
- 鼠标移入 onmouseover (鼠标移入元素中触发一次事件) / onmouseenter（不会触发冒泡事件）
- 鼠标移出 onmouseout / onmouseleave（不会触发冒泡事件）
- 鼠标按下 onmousedown
- 鼠标弹起 onmouseup
- 鼠标移动 onmousemove (只要鼠标移动就会触发事件)
常用的键盘事件
- 键盘按键弹起 keyup（按键弹起才会触发）
- 键盘按键按下 keydown / keypress
- 区别
  - keypress不识别功能键，如ctrl、shift、方向键，但是它的keycode属性区分字母大小写
  - 执行顺序 keydown→keypress→keyup
  - keydown和keyup的落子顺序不同
    - keydown 先触发事件再落子
    - keyup 先落子再触发事件