DOM 基本操作 - 事件基础


theme: smartblue

一、事件概述

JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。

简单理解: 触发---响应机制。

网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。

事件由三部分组成: 事件源,事件类型,事件处理程序

```

<script>
 //点击一个按钮,弹出对话框
//事件是有三部分组成: 事件源、事件类型、事件处理程序,我们也称为事件三要素
//(1)事件源事件被触发的对象谁按钮
var btn = document.getElementById('btn');
//(2)事件类型如何触发什么事件,比如鼠标点击(onclick)还是鼠标经过 还是键盘按下
//(3)事件处理程序通过一个函数赋值的方式完成
btn.onclick= function(){
    alert("clicked")
}
</script>

```

二、 常见鼠标事件

2024-07-10_22-02-47.png

三、 操作元素

3.1 改变元素内容

element.innerText

从起始位置到终止位置的内容,但它去除 html标签,同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行

```

<div id="div1"></div>
<div id="div2"></div>

<script>
  // 写
  var div1 = document.querySelector("#div1")
  var div2 = document.querySelector("#div2")

  div1.innerText = "<strong>innerText</strong>"
  div2.innerHTML = "<strong>innerHTML</strong>"

  // 读
  console.log(div2.innerText)
  console.log(div2.innerHTML)

</script>

``` innerText和innerHTML的区别

  1. innerText不识别html标签非标准 去除空格和换行
  2. innerHTML 识别html标签 W3C标准 保留空格和换行的

这两个属性是可读写的, 可以获取元素里面的内容

2024-07-10_22-25-31.png

3.2 改变属性内容

1.innerrext、innerHTM 改变元素内容

2.src、href

3.id、alt、title

```

<img src = "./1.jpg">
<button id="btn">change image</button>

<script>
 var btn = document.querySelector("#btn")
 var img = document.querySelector("img")

 btn.onclick = ()=>{
  img.src = "./2.jpg"
 }
</script>

```

3.3 改变表单的属性

利用 DOM 可以操作如下表单元素的属性:

type、value、checked、selected、disabled

```

<input type="text" value="please input">
<button id="change">change value</button>
<button id="disable">change value</button>
<script>
  // 获取元素
  var changeBtn =  document.querySelector("#change")
  var disableBtn =  document.querySelector("#disable")
  var input =  document.querySelector("input")

  // 注册事件,处理程序
  changeBtn.onclick = ()=>{
    input.value = "changed"
  }

  disableBtn.onclick = ()=>{
    input.disabled = true
  }
</script>

```

3.4 改变样式属性

我们可以通过JS 修改元素的大小、颜色、位置等样式.

1.element.style行内样式操作

2.element.className 类名样式操作

```

<button id="change">change</button>
<script>
  // 获取元素
  var changeBtn =  document.querySelector("#change")
  var div =  document.querySelector("div")

  changeBtn.onclick = ()=>{
    div.style.backgroundColor = 'black'
    div.style.width = '250px'
    div.className= 'change div'
  }
</script>

<style>
  div{
    width: 200px;
    height: 200px;
    background-color: red;
  }

  div{
    width: 100px;
    height: 100px;
    background-color: yellow;
  }
</style>

```

注意:

  1. Js 修改 style 样式操作, 产生的是行内样式,css 权重比较高
  2. Js 里面的样式采取驼峰命名法 比如 fontsize、backgroundcolor
  3. className 会直接更改元素的类名,会覆盖原先的类名; 如果想保留原先的类名,可以做多类名选择器

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/791454.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

矩阵分解及其在机器学习中的应用

阵分解是一种广泛应用于数据挖掘和机器学习领域的技术&#xff0c;它通过将一个高维数据集分解为多个低维的数据集&#xff0c;以降低数据的复杂性、提高计算效率&#xff0c;并发现数据中的隐含结构。本文将详细介绍矩阵分解的基本概念、主要方法及其在机器学习中的应用。 一、…

【卡尔曼滤波器】DR_CAN :1_递归算法_做估计 学习笔记

DR_CAN : 1_递归算法_Recursive Processing 学习笔记 DR_CAN 大神 地址 1_递归算法_Recursive Processing 取平均 做估计 前k-1次的平均值 当前估计值 与上次估计值和当前测量值的关系

【Docker系列】Docker 镜像源:优化你的容器化开发流程

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

前端/python脚本/转换-使用天地图下载的geojson(echarts4+如果直接使用会导致坐标和其他信息不全)

解决echarts4如果直接使用天地图下载的geojson会导致坐标和其他信息不全 解决方法是使用python脚本来补全其他信息&#xff1a;center&#xff0c;level&#xff0c;adcode等内容 前提是必须有一个之前使用的json文件&#xff08;需要全一点的数据供echarts使用&#xff09; …

对controller层进行深入学习

目录 1. controller层是干什么的&#xff1f;1.1 controller原理图1.2 controller层为什么要存在&#xff1f;1.2.1 分离关注点1.2.2 响应HTTP请求1.2.3 数据处理与转换1.2.4 错误处理与状态管理1.2.5 流程控制1.2.6 依赖注入与测试 1.3 controller层的优点1.3.1 多端支持1.3.2…

Github 2024-07-11 Go开源项目日报 Top10

根据Github Trendings的统计,今日(2024-07-11统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Go项目10Solidity项目1Python项目1frp: 一个开源的快速反向代理 创建周期:2946 天开发语言:Go协议类型:Apache License 2.0Star数量:75872 …

【链表】- 环形链表 II

1. 对应力扣题目连接 环形链表 II 2. 实现思路 a. 链表图示&#xff1a; b. 检测链表中是否存在环&#xff0c;即&#xff1a;会相交 思路&#xff1a; 使用 Floyd 的龟兔赛跑算法&#xff08;Floyd’s Tortoise and Hare algorithm&#xff09;&#xff0c;即快慢指针法&…

ChatGPT提问获取高质量答案的艺术PDF下载书籍推荐分享

ChatGPT高质量prompt技巧分享pdf&#xff0c; ChatGPT提问获取高质量答案的艺术pdf。本书是一本全面的指南&#xff0c;介绍了各种 Prompt 技术的理解和利用&#xff0c;用于从 ChatGPTmiki sharing中生成高质量的答案。我们将探讨如何使用不同的 Prompt 工程技术来实现不同的目…

AI网络爬虫021:下载m3u8视频文件

文章目录 一、介绍二、输入内容三、输出内容一、介绍 要下载m3u8视频文件,首先得找到m3u8地址,按下F12键,看网络-fetch/xhr,然后找网址中包括m3u8的地址,再预览或者看下相应 https://1304688195.vod2.myqcloud.com/9d058fb7vodtranscq1304688195/1194c6da1253642699220090…

CDGA|数据治理:如何建立健全数据伦理和隐私保护机制?

随着数字化时代的到来&#xff0c;数据已成为推动社会进步和企业发展的重要资源。然而&#xff0c;随之而来的数据伦理和隐私保护问题也日益凸显。建立健全的数据治理体系&#xff0c;特别是强化数据伦理和隐私保护机制&#xff0c;已成为当务之急。 数据治理的重要性 数据治理…

完美解决AttributeError: ‘list‘ object has no attribute ‘shape‘的正确解决方法,亲测有效!!!

完美解决AttributeError: ‘list‘ object has no attribute ‘shape‘的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 亲测有效 完美解决AttributeError: ‘list‘ object has no attribute ‘shape‘的正确解决方法&#xff0c;亲测有效&#xff0…

详细分析Java中的@EventListener事件监听器(附Demo)

目录 前言1. 基本知识2. Demo 前言 Java的基本知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&#xff09;Spring框架从入门到学精&#xff08;全&#xff09; 1. 基本知识 用于标注一个方法为事件监听器 事件监听器方…

不坑盒子是干啥的?

不坑盒子是一款专为提升办公效率设计的插件&#xff0c;它兼容Microsoft Office和WPS Office&#xff0c;支持Word、Excel、PPT等常用办公软件。这款插件自2024年初开始受到关注&#xff0c;其主要目的是为了让用户在日常办公中能够更加便捷地完成任务&#xff0c;从而提高工作…

【UNI-APP】阿里NLS一句话听写typescript模块

阿里提供的demo代码都是javascript&#xff0c;自己捏个轮子。参考着自己写了一个阿里巴巴一句话听写Nls的typescript模块。VUE3的组合式API形式 startClient&#xff1a;开始听写&#xff0c;注意下一步要尽快开启识别和传数据&#xff0c;否则6秒后会关闭 startRecognition…

MapReduce底层原理详解:大案例解析(第32天)

系列文章目录 一、MapReduce概述 二、MapReduce工作机制 三、Map&#xff0c;Shuffle&#xff0c;reduce阶段详解 四、大案例解析 文章目录 系列文章目录前言一、MapReduce概述二、MapReduce工作机制1. 角色与组件2. 作业提交与执行流程1. 作业提交&#xff1a;2. Map阶段&…

六、数据可视化—Echars(爬虫及数据可视化)

六、数据可视化—Echars&#xff08;爬虫及数据可视化&#xff09; Echarts应用 Echarts Echarts官网&#xff0c;很多图表等都是我们可以 https://echarts.apache.org/zh/index.html 是百度自己做的图表&#xff0c;后来用的人越来越多&#xff0c;捐给了orange组织&#xf…

Django项目创建的准备工作【3】

【 一 】建立数据库 创建库: 命令&#xff08;指定编码&#xff09; 创建用户: 并授权 用户: luffy: 密码xxxxxx , 只授予luffy库权限 使用mysql创建lufy数据库 root账号和密码--->万一泄露---》整个数据库就不安全了。 创建个用户&#xff0c;这个用户只对当前项目 库 有…

不同材质酒店智能开关的功能特点详解

在当今的酒店行业中&#xff0c;智能开关已成为提升客户体验和管理效率的重要设备。而不同材质的智能开关&#xff0c;不仅在外观上各具特色&#xff0c;其功能特点也有所差异。 玻璃材质智能开关&#xff1a; 玻璃材质的智能开关给人一种时尚、简约且高端的感觉。其表面光滑&a…

前端面试39(关于git)

针对前端开发者的Git面试题可以覆盖Git的基础概念、常用命令、工作流程、团队协作、以及解决冲突等方面。以下是一些具体的Git面试 Git基础知识 什么是Git&#xff1f; Git是一个分布式版本控制系统&#xff0c;用于跟踪计算机文件的更改&#xff0c;并协调多个人共同在一个项…