前端-js基础-DOM2

#博学谷IT学习技术支持

目录

事件基础

事件概述：网页中每个元素都可以产生某些可以触发JavaScript 的事件

事件三要素：事件源(谁)、事件类型(什么事件)、事件处理程序(做啥)

执行事件的步骤

常见的鼠标事件

操作元素

改变元素内容 element.innerHTML

表单元素的属性操作

样式属性操作

排他思想

自定义属性的操作

获取属性值

设置属性值

移除属性

H5自定义属性

---

• 事件基础

  • 事件概述：网页中每个元素都可以产生某些可以触发JavaScript 的事件

  • 事件三要素：事件源(谁)、事件类型(什么事件)、事件处理程序(做啥)

    

  • 执行事件的步骤

    • 获取事件源
    • 注册事件（绑定事件）
    • 添加事件处理程序（采取函数赋值形式）

  • 常见的鼠标事件

    

  • 案例：点击按钮弹出警示框

    

• 操作元素

  

  • 改变元素内容 element.innerHTML

    • innerText 不识别html标签 非标准 去除空格和换行
    • innerHTML 识别html标签 W3C标准 保留空格和换行的 （常用）
  • 常见元素的属性操作

  • 表单元素的属性操作

    • 可操作的属性：type、value、checked、selected、disabled
    • disabled —— 禁用

  • 样式属性操作

    • element.style ——行内样式操作
    • element.className——类名样式操作

  • 排他思想

    • 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法
    • 所有元素全部清除样式（干掉其他人）
    • 给当前元素设置样式（留下自己）
    • ⚠️ 顺序不能颠倒
    • 案例：百度换肤
    • 案例：表格鼠标进入行变色
    • 案例：表单全选、取消全选

  • 自定义属性的操作

    • 获取属性值

      • element.属性 获取内置属性值（元素本身自带的属性）
      • element.getAttribute('属性')； 主要获取自定义的属性

    • 设置属性值

      • element.属性 = ‘值’ 设置内置属性值
      • element.setAttribute(‘属性’ ，‘值’)； 主要设置自定义的属性

    • 移除属性

      • element.removeAttribute('属性')；
    • 案例：tab 栏切换 （重点案例）

  • H5自定义属性

    • 自定义属性的目的：为了保存并使用数据，有些数据可以保存袋页面中，而不用保存到数据库中
    • getAttribute('属性') 获取属性
    • H5规定自定义属性data- 开头作为属性名并赋值