选择和操作元素

news2024/11/25 16:24:31

上一篇文档我们介绍了DOM元素和DOM的获取;其实除了获取DOM,我们也可以去替换DOM元素中的文本

document.querySelector('.message').textContent = "🎉Correct Number"

在这里插入图片描述

● 除此之外,我们可以设置那个数字部分

document.querySelector('.message').textContent = '🎉Correct Number';
document.querySelector('.number').textContent = 13;
document.querySelector('.score').textContent = 16;

在这里插入图片描述

注:这样对照着HTML中的class看,可以更加容易看懂!

● 当然除了获取并修改DOM 的文本,我们也可以获取到输入框的值和修改输入框的值

console.log(document.querySelector('.guess').value);

在这里插入图片描述

因为输入框中没有任何的内容,所以我们什么都没有获取!当然我们可以给其赋值

console.log(document.querySelector('.guess').value);
document.querySelector('guess').value = 23;
console.log(document.querySelector('.guess').value);

在这里插入图片描述

但是如果我们需要点击那个CHeck!按钮之后,然后再去获取input的值该怎么做呢?这个按钮的点击时间我们将在下一节课再接着介绍!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【iptables 实战】07 iptables NAT实验

在上一节中,我们将两个网段的机器,通过中间机器的网络转发,能达到互通。再来回顾一下这个网络连接的图 上一节我们在防火墙实验中,设置了主机B的的转发规则,我们先清空主机B的转发规则 [rootlocalhost ~]# iptables…

Linux下基本指令(上)

文章内容: 1. ls 指令 语法: ls [选项][目录或文件] 功能:对于目录,该命令列出该目录下的所有子目录与文件。对于文件,将列出文件名以及其他信息。 单个ls显示当前目录下的文件和目录 常用选项&#…

【Linux】线程详解完结篇——信号量 + 线程池 + 单例模式 + 读写锁

线程详解第四篇 前言正式开始信号量引例信号量的本质信号量相关的四个核心接口生产消费者模型用环形队列实现生产者消费者模型基于环形队列的生产消费模型的原理代码演示单生产者单消费者多生产者多消费者 计数器的意义 线程池基本概念代码 单例模式STL,智能指针和线程安全STL中…

Echarts 教程一

Echarts 教程一 可视化大屏幕适配方案可视化大屏幕布局方案Echart 图表通用配置部分解决方案1. titile2. tooltip3. xAxis / yAxis 常用配置4. legend5. grid6. series7.color Echarts API 使用全局echarts对象echarts实例对象 可视化大屏幕适配方案 rem flexible.js 关于flex…

Linux JumpServer 堡垒机远程访问

文章目录 前言1. 安装Jump server2. 本地访问jump server3. 安装 cpolar内网穿透软件4. 配置Jump server公网访问地址5. 公网远程访问Jump server6. 固定Jump server公网地址 前言 JumpServer 是广受欢迎的开源堡垒机,是符合 4A 规范的专业运维安全审计系统。JumpS…

如何用画图将另一个图片中的成分复制粘贴?

一、画图是什么? 画图是Windows自带的一个附件,可于菜单中的Windows附件文件夹中找到(自带的为2D画图,有需要的可以下载3D画图),可以用来编辑或查看图片,也可以用来绘制图片,并将图…

JAVA面经整理(5)

创建线程池不是说现用先创建,而是要是可以复用线程池中的线程,就很好地避免了大量用户态和内核态的交互,不需要频繁的创建和销毁线程 一)什么是池化技术?什么是线程池? 1)池化技术是提前准备好一些资源,在…

PADS9.5使用记录

目录 一、概述 二、PADS Logic IN4148二极管封装 SOD-123封装 SOD-323封装 SOD-523封装 2N3904 1AM 三极管封装 78L05 7533-1 一、概述 PADS Logic 原理图绘制PADS Layout PCB 封装设计PADS Router 布线 二、PADS Logic …

【python学习第12节 pandas】

文章目录 一,pandas1.1 pd.Series1.2 pd.date_range1.3 pd_DataFrame1.4浏览数据1.5布尔索引1.6设置值1.7操作1.8合并1.8.1concat()函数1.8.2 merge()函数 一,pandas 1.1 pd.Series pd.Series 是 Pandas 库中的一个数据结构&…

2023年【道路运输企业安全生产管理人员】最新解析及道路运输企业安全生产管理人员考试技巧

题库来源:安全生产模拟考试一点通公众号小程序 道路运输企业安全生产管理人员最新解析参考答案及道路运输企业安全生产管理人员考试试题解析是安全生产模拟考试一点通题库老师及道路运输企业安全生产管理人员操作证已考过的学员汇总,相对有效帮助道路运…

leetcode-239-滑动窗口最大值

题意描述: 给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示例: 输入:nums [1,3,-1,…

【C++】单例

设计一个类,只能在堆上创建对象 只能在堆上创建对象,也就是只能通过new操作符创建对象,方式如下: 将析构函数设为私有将释放空间的操作在类内保留一个接口,只能在类内进行调用将构造函数设置为私有,防止外…

计算机组成与结构

目录 一、计算机硬件组成 二、中央处理单元 1、功能 2、CPU的组成 三、校验码 四、体系结构的分类 1、按处理机数量分类 2、Flynn分类 五、指令系统 1、指令 2、寻址方式 3、指令系统 #CISC(复杂指令集计算机) RISC(精简指令集…

阿里云关系型数据库有哪些?RDS云数据库汇总

阿里云RDS关系型数据库大全,关系型数据库包括MySQL版、PolarDB、PostgreSQL、SQL Server和MariaDB等,NoSQL数据库如Redis、Tair、Lindorm和MongoDB,阿里云百科分享阿里云RDS关系型数据库大全: 目录 阿里云RDS关系型数据库大全 …

图解大模型微调系列之:大模型低秩适配器LoRA(原理篇)

关于LORA部分的讲解,我们将分为**“原理篇”和“源码篇”**。 在原理篇中,我们将通过图解的方式,详细分析LoRA怎么用、为什么能奏效、存在哪些优劣势等核心问题。特别是当你在学习LoRA时,如果对“秩”的定义和作用方式感到迷惑&a…

基于Java的库存管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

先做一年的弱电在做网络工程师这个顺序对不对

大家好,我是网络工程师成长日记实验室的郑老师,您现在正在查看的是网络工程师成长日记专栏,记录网络工程师日常生活的点点滴滴 有个同学说他原来是做视频审核的那个工作,我离职了,26岁他看了一些相关视频。他说他现在打…

电流流过电阻时会减小吗?

我相信很多人刚接触电路时都会有这个想法:由于电阻会抵抗或阻碍电荷的流动,假如现在电流往一个方向流动,且电路中只有一个电阻器,那么从电流流出的地方到刚接触电阻中间应该有有高电流,从电阻刚流出到最后应该有低电流…

SpringCloud Alibaba - Sentinel 高级玩法,修改 Sentinel-dashboard 源码,实现 push 模式

目录 一、规则持久化 1.1、什么是规则持久化 1.1.1、使用背景 1.1.2、规则管理的三种模式 a)原始模式 b)pull 模式 c)push 模式 1.2、实现 push 模式 1.2.1、修改 order-service 服务,使其监听 Nacos 配置中心 1.2.2、修…

基于SpringBoot+Vue的企业信息反馈平台

1 简介 企业客户信息反馈的需求和管理上的不断提升,企业客户信息反馈管理的潜力将无限扩大,企业客户信息反馈平台在业界被广泛关注,本平台及对此进行总体分析,将企业客户信息反馈信息管理的发展提供参考。企业客户信息反馈平台对企…