JS DOM、点击事件
JS DOM
加载事件onload
js代码执行的时候,需要html&css的支持
onload在页面加载完之后执行
dom:用JS对html标签进行增删改查
元素节点获取
var name = document.getElementById("userName");
var inputs = document.getElementsByTagName(''input);
文本节点获取
需要借助div元素节点在获得其内部的文本节点。
<div>hello<div>
var dvnode = document.getElementsByTagName('div')[0];
divnode.firstChild; //(或者调用lastChild)获得元素div内部的第一个子节点对象,而不是自己这个节点
兄弟节点
firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下一个兄弟节点
previousSibling:获得上个兄弟节点
childNodes:父节点获得内部全部的子节点信息
<script>
window.onload = function() {var ull = document.getElementsByTagName('ul')[0];console.log(ull.childNodes);console.log(ull.firstChild);console.log(ull.firstChild.nextSibling);console.log(ull.lastChild);console,log(ull.lastChild.previousSibling);
}
</script>
父节点
节点名.parentNode
console.log(blue);
console.log(blue.parentNode);
属性值操作
1. 获取属性值
itnode.属性名; //只能操作五c规定的属性值
itnode.getAttribute(属性名); //规定的和自定义的都可以获取
2. 设置属性值
itnode.属性名 = 值; //只能操w3c规定的属性
itnode.setAttribute(名称,值); //规定的和自定义的都可以设置
console.log(baidu.className); //className是class的一个别名,不可以直接访问class属性
Field、Attribute、Property
节点创建和追加
1. 创建
元素节点:document.createElement(tag标签名);
文本节点:document.createTextNode(文本内容);
属性设置:node.setAttribute(名称,值);
2. 追加
父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
节点删除
父节点.removeChild(子节点);
知道子节点的,需要通过子节点找到父节点,然后再删除子节点:
green.parentNode.removeChild(green);
点击事件
通过鼠标、键盘对页面所做的动作就是事件。事件一旦发生需要有事件处理,该处理成为“事件驱动”,事件驱动通常由函数担任
onclick、onmouseover、onmouseout、onkeyup、onkeydown、onblur、onfocus、onsubmit
在标签内些onclick事件
<input id="btnld" type="button" value="Press Me" οnclick="alert('thanks');">
在JS写οnclick=function(){}函数
var btn = document.getElementById('btnld');
btn.onclick = function() {
alert('thanks');
}
相关文章:
JS DOM、点击事件
JS DOM 加载事件onload js代码执行的时候,需要html&css的支持 onload在页面加载完之后执行 dom:用JS对html标签进行增删改查 元素节点获取 var name document.getElementById("userName"); var inputs document.getElementsByTagNam…...
长短期记忆网络(LSTM)预测模型及其Python和MATLAB实现
## 一、背景 长短期记忆(Long Short-Term Memory, LSTM)网络是由 Sepp Hochreiter 和 Jrgen Schmidhuber 在 1997 年提出的一种特殊的循环神经网络(RNN)结构。LSTM 旨在解决传统 RNN 在处理长序列数据时常见的梯度消失和梯度爆炸…...

C语言——操作符详解
目录 1.操作符的分类 2.原码、反码和补码 3.移位操作符 3.1 左移操作符 3.2 右移操作符 4.位操作符 4.1 按位与& 4.2 按位或| 4.3 按位异或^ 编辑 4.4 按位取反~ 4.5 应用题 4.5.1 题目:不能创建临时变量,实现两个整数的交换 4.5.2 …...
【Linux】内核全量函数添加日志打印摸索
1、操作系统在空载时要把函数调用次数非常多的注释掉,这里打印时不能带进程名称,高执行概率函数不同进程执行到的概率也很高,不然操作业务会增加卡死的概率; 2、卡死一般是调用次数太多导致,会卡住操作系统十多秒&…...
24/8/17算法笔记 CQL算法离线学习
离线学习:不需要更新数据 CQL(Conservative Q-Learning)算法是一种用于离线强化学习的方法,它通过学习一个保守的Q函数来解决标准离线RL方法可能由于数据集和学习到的策略之间的分布偏移而导致的过高估计问题 。CQL算法的核心思想…...

C++第十一弹 -- STL之List的剖析与使用
文章索引 前言1. list的介绍2 list的使用2.1 list的构造函数2.2 iterator的使用2.3 list capacity2.4 list element access2.5 list modifiers 3. list的迭代器失效4. list与vector的对比总结 前言 本篇我们旨在探讨对于STL中list的使用, 下一篇我们将会对list进行底层剖析以及…...

物流快递外卖管理平台系统-计算机毕设Java|springboot实战项目
🍊作者:计算机毕设匠心工作室 🍊简介:毕业后就一直专业从事计算机软件程序开发,至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长:按照需求定制化开发项目…...
开源BaaS 平台介绍
以下是几款常见的开源后端平台,它们提供了用户管理、权限验证、文件存储、API 管理等类似的后端功能。 1. Parse Server 简介: Parse 是一个非常流行的开源后端服务平台,它最初由 Facebook 开发,后来开源。它支持用户管理、数据存储、文件存…...

分享一个基于python爬虫的“今日头条”新闻数据分析可视化系统(源码、调试、LW、开题、PPT)
💕💕作者:计算机源码社 💕💕个人简介:本人 八年开发经验,擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等,大家有这一块的问题可以一起交流&…...
QT自定义信号槽
1.自定义信号槽 使用connect()可以让我们连接系统提供的信号和槽,同时也可以自定义信号槽。 例如以学生和老师构建类同时当老师触发信号下课同学收到信号执行“吃饭”这一动作代码示例 #include "SignalAndSlot.h" //Teacher Student 总框架…...

one-shot 序列图像红外小目标分割
one-shot 序列图像红外小目标分割 IEEE TRANSACTIONS ON GEOSCIENCE AND REMOTE SENSING 代码还未开源 GitHub - D-IceIce/one-shot-IRSTS few-shot:利用少量标注样本进行学习 one-shot: 属于few-shot的特殊情况,只用一个样本进行学习 zero-shot&am…...
JavaScript 单线程防阻塞的原理
JavaScript 是一种单线程语言,这意味着它一次只能执行一个任务。这种设计可能会导致一些问题,比如当遇到耗时的操作时,整个程序可能会被阻塞。为了解决这个问题,JavaScript 使用了事件循环和回调函数的机制,实现了非阻塞式的异步操作。 事件循环 JavaScript 有一个事件队列,用…...

Shell脚本发送邮件的详细步骤与配置方法?
Shell脚本发送邮件的进阶技巧?怎么配置Shell脚本发信? 使用Shell脚本发送邮件是一种高效的自动化手段,特别是在需要定期发送报告、通知或警告信息时。AokSend将详细介绍Shell脚本发送邮件的步骤与配置方法,帮助您更好地掌握这一技…...

如何把Phalcon 集成到PhpStorm里面
一 背景 按照上一篇文章里面写的Phalcon 创建项目过程中的一些坑, 最终我们在终端可以基于Phalcon命令创建对应的开发项目。但在这个过程中,存在一个问题:那就是写代码的时候,发现Phalcon对应的依赖提示都没有,如下: 从上面这个截图来看,就能发现,Phalcon的啥…...

python从入门到精通:循环语句
目录 前言 1、while循环的基础语法 2、while循环的嵌套 3、for循环的基础语法 range语句: for循环临时变量作用域: 4、for循环的嵌套 5、循环中断:break和continue 前言 循环普遍存在于日常生活中,同样,在程序中…...

Codeforces Round 965 (Div. 2)
前言 有人在过七夕,我在打 cf ,还有某人独自一人在学校机房,凌晨一点骑上共享单车回宿舍欣赏沿途的秋风扫落叶。 Standings:2166 题目链接:Dashboard - Codeforces Round 965 (Div. 2) - Codeforces A. Find K Distin…...

Win10下载安装Mysql服务
Win10下载安装MySQL 一、官网下载MySQL 1.官网地址: https://www.mysql.com/ 2.在官网首页拉到最下方,点击MySQL Community Server: 3.根据个人电脑的操作系统选择,此处以Windows x64为例,选择第2个,点击…...
MVVM(Model-View-ViewModel)架构模式
在Android开发中,MVVM(Model-View-ViewModel)架构模式已经成为构建可维护和可扩展应用程序的重要选择。MVVM模式通过分离视图(View)、模型(Model)和视图模型(ViewModel)来…...

C#MVC返回DataTable到前端展示。
很久没写博客了,闭关太久,失踪人口回归,给诸位道友整点绝活。 交代下背景:要做一个行转列的汇总统计,而且,由于是行转列,列的数量不固定,所以,没法使用正常的SqlSugar框…...
HttpUtils工具类(二)Apache HttpClient 5 使用详细教程
目录 一、Apache HttpClient 5介绍 (1)核心特性 (2)Apache HttpClient 5 的新特性 (3)在 Java 项目的主要使用场景及缺点 使用场景: 缺点: 二、在实际项目中的应用 …...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战
在现代战争中,电磁频谱已成为继陆、海、空、天之后的 “第五维战场”,雷达作为电磁频谱领域的关键装备,其干扰与抗干扰能力的较量,直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器,凭借数字射…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...

Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗? 在ComfyUI中实现图生视频并延长到5秒,需要结合多个扩展和技巧。以下是完整解决方案: 核心工作流配置(24fps下5秒120帧) #mermaid-svg-yP…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践
01技术背景与业务挑战 某短视频点播企业深耕国内用户市场,但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大,传统架构已较难满足当前企业发展的需求,企业面临着三重挑战: ① 业务:国内用户访问海外服…...
SQL进阶之旅 Day 22:批处理与游标优化
【SQL进阶之旅 Day 22】批处理与游标优化 文章简述(300字左右) 在数据库开发中,面对大量数据的处理任务时,单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”,深入探讨如何通过批量操作和游标技术提…...