Dom操作——操作元素，各种事件

Dom操作——操作元素，各种事件

文章目录

  • Dom操作——操作元素，各种事件
    • 一、操作元素
      • 操作内容
      • 操作属性
      • 操作样式
    • 二、各种事件
      • 单击事件
      • onload事件
      • 键盘事件
      • 鼠标事件
      • 焦点事件

一、操作元素

操作内容

1、经验：

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

2、语法：

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

3、案例代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取内容 - innerText</button><button onclick="fun02()">设置内容 - innerText</button><br /><span>用良心做教育</span><br /><button onclick="fun03()">获取内容 - innerHTML</button><button onclick="fun04()">设置内容 - innerHTML</button><br /><span>用良心做教育</span><script type="text/javascript">/*** 知识点：操作内容*/var span01 = document.getElementsByTagName("span")[0];var span02 = document.getElementsByTagName("span")[1];function fun01(){console.log(span01.innerText);}function fun02(){span01.innerText = "<h1>做真实的自己</h1>";}function fun03(){console.log(span02.innerHTML);}function fun04(){//把文本当做html标签设置span02.innerHTML = "<h1>做真实的自己</h1>";}</script></body>
</html>

4、代码效果：

在这里插入图片描述

操作属性

1、语法：

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取属性</button><button onclick="fun02()">设置属性</button><br /><img src="../../img/樱井步.jpg" width="100px" height="100px" /><br /><button onclick="fun03()">获取属性</button><button onclick="fun04()">设置属性</button><br /><img src="../../img/樱井步.jpg" width="100px" height="100px" /><script type="text/javascript">/*** 知识点：操作属性*/var img1 = document.getElementsByTagName("img")[0];var img2 = document.getElementsByTagName("img")[1];function fun01(){console.log(img1.src);console.log(img1.width);console.log(img1.height);}function fun02(){img1.src = "../../img/波多野结衣.jpg";img1.width = "200";img1.height = "200";}function fun03(){console.log(img2.getAttribute("src"));console.log(img2.getAttribute("width"));console.log(img2.getAttribute("height"));}function fun04(){img2.setAttribute("src","../../img/波多野结衣.jpg");img2.setAttribute("width","100%");img2.setAttribute("height","100%");}</script></body>
</html>

3、代码效果：

在这里插入图片描述

操作样式

1、语法：

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><button onclick="fun01()">获取样式</button><button onclick="fun02()">设置样式</button><br /><span>用良心做教育</span><script type="text/javascript">/*** 知识点：操作样式*/var span = document.getElementsByTagName("span")[0]function fun01(){console.log(span.style.color);console.log(span.style.fontSize);}function fun02(){span.style.color = "red";span.style.fontSize = "50px";}</script></body>
</html>

3、代码效果：

在这里插入图片描述

二、各种事件

对事件做出反应

单击事件

1、效果：点击之后，更改标题内容

注意：this代表当前被点击的对象

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1>用良心做教育</h1><script type="text/javascript">var h1 = document.getElementsByTagName("h1")[0];//绑定单击事件h1.onclick = function(){this.innerText = "做真实的自己";}</script></body>
</html>

onload事件

1、概念：onload 一般可以来做一些网页的环境准备工作

2、效果：事件会在页面或图像加载完成后立即发生。

3、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">//页面加载事件：事件会在页面元素和图像加载完成后立即发生window.onload = function(){var h1 = document.getElementsByTagName("h1")[0];h1.onclick = function(){this.innerText = "做真实的自己";}}</script></head><body><h1>用良心做教育</h1>		</body>
</html>

键盘事件

1、监听器：onkeydown、onkeypress、onkeyup

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text" onkeydown="myDown()"onkeypress="myPress()"onkeyup="myUp()"/><script type="text/javascript">function myDown(){//键盘按下事件console.log("down");}function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的console.log("press");}function myUp(){//键盘松开事件console.log("up");}			</script></body>
</html>

3、代码效果：按下键盘控制台会有down输出，松下会有up输出

鼠标事件

1、onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><img src="../../img/波多野结衣.jpg" width="100px" height="100px"onmousedown="myDown()"onmouseup="myUp()"onmousemove="myMove()"onmouseover="myOver()"onmouseout="myOut()"/><script type="text/javascript">function myDown(){//鼠标按下事件console.log("down");}function myUp(){//鼠标松开事件console.log("up");}function myMove(){//鼠标移动事件console.log("move");}function myOver(){//鼠标移入事件console.log("over");}function myOut(){//鼠标移出事件console.log("out");}</script></body>
</html>

3、代码效果：

在这里插入图片描述

焦点事件

1、监听获取焦点和失去焦点

2、代码案例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="text"onfocus="myFocus()"onblur="myBlur()"	/><script type="text/javascript">function myFocus(){//获取焦点事件console.log("focus");}function myBlur(){//失去焦点事件console.log("blur");}</script></body>
</html>

3、代码效果：
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Mysql数据类型解析

Mysql数据类型解析

1、MySQL 数据类型 MySQL 支持多种类型&#xff0c;大致可以分为三类&#xff1a;数值、日期/时间和字符串&#xff08;字符&#xff09;类型。 1.2、查看Mysql编码格式 mysql> show variables like "%char%"; ----------------------------------------------…
阅读更多...
283. 移动零 (Swift版本)

283. 移动零 (Swift版本)

题目描述 最容易想到的解法 从后向前遍历, 发现0就通过交换相邻元素将0移动到最后 class Solution {func moveZeroes(_ nums: inout [Int]) {for index in (0..<nums.count).reversed() {if nums[index] 0 {moveZeroes(&nums, index)}}}func moveZeroes(_ nums: inout …
阅读更多...
为什么 JavaScript 在国外逐渐用于前端+后端开发

为什么 JavaScript 在国外逐渐用于前端+后端开发

这个问题其实没人能给出可证伪的结论&#xff0c;那不如干脆给一个感性的答案: 因为阿里“不争气”。 确切的说&#xff0c;因为阿里的nodejs团队没卷赢&#xff0c;至少暂时还没卷赢&#xff0c;没拿到真正有价值的业务场景&#xff0c;做出真正有说服力的案例项目。刚好我有…
阅读更多...
Qt调用第三方库的通用方式（静态链接库.a或.lib、动态链接库.dll）

Qt调用第三方库的通用方式（静态链接库.a或.lib、动态链接库.dll）

目录 一、前提 二、如何引用静态链接库 三、如何引用动态链接库 四、示例代码资源 在开发项目中经常会存在需要调用第三方库的时候&#xff0c;对于Qt如何来调用第三方库&#xff0c;为了方便自己特意记录下详细过程。 一、前提 1. window 10操作系统 2. 已安装了Qt6.7.…
阅读更多...
水帘降温水温

水帘降温水温

不同环境下的水帘啊&#xff0c;使用水温是不一样的&#xff0c;夏天使用水疗的水有两种&#xff0c;一个是常温的循环水&#xff0c;20~26左右&#xff0c;另外一个呢&#xff0c;就是深井水&#xff0c;重点是啥呢&#xff1f;就是无论我们用哪一种&#xff0c;能够把温度降到…
阅读更多...
【Java数据结构】优先级队列详解（二）

【Java数据结构】优先级队列详解（二）

&#x1f512;文章目录&#xff1a; 1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; 2.PriorityQueue的特性 3.优先级队列的构造 4.如何控制优先级队列是小堆还是大堆 5.PriorityQueue的方法 6. PriorityQueue的自动扩容方式 7.top-k问题——最小…
阅读更多...
6.13作业

6.13作业

自由发挥登录窗口的应用场景&#xff0c;实现一个登录窗口界面 #include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//设置窗口标题this->setWindowTitle("QQ");//设置窗口图标this->setWindowIcon(QIcon("C:/Users/…
阅读更多...
鸿蒙轻内核A核源码分析系列七 进程管理 (1)

鸿蒙轻内核A核源码分析系列七 进程管理 (1)

本文开始继续分析OpenHarmony LiteOS-A内核的源代码&#xff0c;接下来会分析进程和任务管理模块。本文中所涉及的源码&#xff0c;以OpenHarmony LiteOS-A内核为例&#xff0c;均可以在开源站点 https://gitee.com/openharmony/kernel_liteos_a 获取。如果涉及开发板&#xff…
阅读更多...
spring中IOC容器创建流程

spring中IOC容器创建流程

跳转参考地址&#xff1a;https://wuliqun.cn/details?pps53
阅读更多...
【安装笔记-20240613-Linux-在 OpenWrt 的 LuCI界面支持命令行调试】

【安装笔记-20240613-Linux-在 OpenWrt 的 LuCI界面支持命令行调试】

安装笔记-系列文章目录 安装笔记-20240613-Linux-在 OpenWrt 的 LuCI界面支持命令行调试 文章目录 安装笔记-系列文章目录安装笔记-20240613-Linux-在 OpenWrt 的 LuCI界面支持命令行调试 前言一、软件介绍名称&#xff1a;ttyd主页官方介绍特点 二、安装步骤测试版本&#xf…
阅读更多...
两种典型的嵌入式系统架构模式

两种典型的嵌入式系统架构模式

大多数嵌入式系统都具备实时特征&#xff0c;那么&#xff0c;这种嵌入式系统的典型架构可概括为两种模式&#xff0c;即层次化模式架构和递归模式架构。 1.层次化模式架构 为了达到概念一致性&#xff0c;许多系统通过层次化的方法进行搭建。这样做的结果是&#xff1a;位于高…
阅读更多...
Chisel入门——在windows系统下部署Chisel环境并点亮FPGA小灯等实验

Chisel入门——在windows系统下部署Chisel环境并点亮FPGA小灯等实验

Chisel入门——在windows系统下部署Chisel环境并点亮FPGA小灯等实验 一、chisel简介二、vscode搭建scala开发环境2.1 安装Scala官方插件2.2 java版本&#xff08;本人用的是jdk18&#xff09;2.3 下载Scala Windows版本的二进制文件2.4 配置环境变量2.5 scala测试2.6 vscode运行…
阅读更多...
axure制作菜单下拉、隐藏、点击选中效果

axure制作菜单下拉、隐藏、点击选中效果

在高保真原型中&#xff0c;制作导航栏菜单时&#xff0c;需要达到点击下拉按钮&#xff0c;子菜单自动弹出&#xff0c;点击其中一个子菜单项可栏目变为选中状态且跳转到对应的子页面。制作材料可以从antdesign中去下载&#xff0c;以下述网络配置菜单为例。在箭头处添加互动效…
阅读更多...
RedHat8.4离线升级内核（漏洞编号CVE-2024-1086）

RedHat8.4离线升级内核（漏洞编号CVE-2024-1086）

一、背景 针对Linux内核提取权限漏洞 (漏洞编号CVE-2024-1086&#xff09;&#xff0c;整理离线环境的修复方案。本文以离线修复方案为主进行说明&#xff0c;第八章对在线修复方案进行说明。 (一) 漏洞简介 近日&#xff0c;绿盟科技CERT监测网上有研究员公开披露了一个Lin…
阅读更多...
SpringBoot Vue Bootstrap 旅游管理系统

SpringBoot Vue Bootstrap 旅游管理系统

SpringBoot Vue 旅游管理系统源码&#xff0c;附带环境安装&#xff0c;运行说明 源码地址 开发环境 jdk1.8,mysql8,nodejs16,navicat,idea 使用技术springboot mybatis vue bootstrap 部分功能截图预览
阅读更多...
【SQLAlChemy】常见的数据类型有哪些，Column可选的参数有哪些呢？

【SQLAlChemy】常见的数据类型有哪些，Column可选的参数有哪些呢？

常见数据类型与Column参数 常见类型 Integer&#xff1a;整数类型&#xff0c;对应数据库的 int 类型。Float&#xff1a;浮点数类型&#xff0c;对应数据库的 float 类型。它占用 32 位空间。Double&#xff1a;双精度浮点数类型&#xff0c;对应数据库的 double 类型&#…
阅读更多...
【CS.PL】Lua 编程之道: 基础语法和数据类型 - 进度16%

【CS.PL】Lua 编程之道: 基础语法和数据类型 - 进度16%

2 初级阶段 —— 基础语法和数据类型 文章目录 2 初级阶段 —— 基础语法和数据类型2.0 关键字(keywords) &#x1f525;2.1 注释与标识符2.1.1 注释2.1.2 标识符 2.2 变量与赋值2.2.1 所有变量默认是全局变量 ≠ local, 有一个例外2.2.2 local变量是局部变量, 以end作为边界2.…
阅读更多...
创建节约机关怎样向媒体投稿报道宣传？

创建节约机关怎样向媒体投稿报道宣传？

创建节约机关并向媒体投稿报道宣传是一项重要的工作&#xff0c;它不仅能够提升机关的形象&#xff0c;还能促进社会各界对节约型社会的认识和支持。 作为一名新晋信息宣传员,初入职场的我满腔热血,怀揣着用文字传递价值的理想,却在投稿的道路上屡遭波折。面对每月的宣传任务,我…
阅读更多...
表 达式树

表 达式树

》》》可以借助 LINQPad工具 using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Linq.Expressions; using System.Text; using System.Threading.Tasks; using System.Transactions;namespace EFDemo {public cla…
阅读更多...
vite工程化搭建vue项目之自动按需导入

vite工程化搭建vue项目之自动按需导入

背景 当我们在使用vue3组合式开发的时候&#xff0c;大多数情况下我们的代码可能是这样的 <script setup lang"ts"> import { ref, reactive, toRefs, onMounted, computed } from vue; defineProps({}); </script><template><div></di…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023