当前位置: 首页 > news >正文

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代码执行的时候&#xff0c;需要html&css的支持 onload在页面加载完之后执行 dom&#xff1a;用JS对html标签进行增删改查 元素节点获取 var name document.getElementById("userName"); var inputs document.getElementsByTagNam…...

长短期记忆网络(LSTM)预测模型及其Python和MATLAB实现

## 一、背景 长短期记忆&#xff08;Long Short-Term Memory, LSTM&#xff09;网络是由 Sepp Hochreiter 和 Jrgen Schmidhuber 在 1997 年提出的一种特殊的循环神经网络&#xff08;RNN&#xff09;结构。LSTM 旨在解决传统 RNN 在处理长序列数据时常见的梯度消失和梯度爆炸…...

C语言——操作符详解

目录 1.操作符的分类 2.原码、反码和补码 3.移位操作符 3.1 左移操作符 3.2 右移操作符 4.位操作符 4.1 按位与& 4.2 按位或| 4.3 按位异或^ ​编辑 4.4 按位取反~ 4.5 应用题 4.5.1 题目&#xff1a;不能创建临时变量&#xff0c;实现两个整数的交换 4.5.2 …...

【Linux】内核全量函数添加日志打印摸索

1、操作系统在空载时要把函数调用次数非常多的注释掉&#xff0c;这里打印时不能带进程名称&#xff0c;高执行概率函数不同进程执行到的概率也很高&#xff0c;不然操作业务会增加卡死的概率&#xff1b; 2、卡死一般是调用次数太多导致&#xff0c;会卡住操作系统十多秒&…...

24/8/17算法笔记 CQL算法离线学习

离线学习&#xff1a;不需要更新数据 CQL&#xff08;Conservative Q-Learning&#xff09;算法是一种用于离线强化学习的方法&#xff0c;它通过学习一个保守的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实战项目

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…...

开源BaaS 平台介绍

以下是几款常见的开源后端平台&#xff0c;它们提供了用户管理、权限验证、文件存储、API 管理等类似的后端功能。 1. Parse Server 简介: Parse 是一个非常流行的开源后端服务平台&#xff0c;它最初由 Facebook 开发&#xff0c;后来开源。它支持用户管理、数据存储、文件存…...

分享一个基于python爬虫的“今日头条”新闻数据分析可视化系统(源码、调试、LW、开题、PPT)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…...

QT自定义信号槽

1.自定义信号槽 使用connect()可以让我们连接系统提供的信号和槽&#xff0c;同时也可以自定义信号槽。 例如以学生和老师构建类同时当老师触发信号下课同学收到信号执行“吃饭”这一动作代码示例 #include "SignalAndSlot.h" //Teacher Student 总框架…...

one-shot 序列图像红外小目标分割

one-shot 序列图像红外小目标分割 IEEE TRANSACTIONS ON GEOSCIENCE AND REMOTE SENSING 代码还未开源 GitHub - D-IceIce/one-shot-IRSTS few-shot&#xff1a;利用少量标注样本进行学习 one-shot: 属于few-shot的特殊情况&#xff0c;只用一个样本进行学习 zero-shot&am…...

JavaScript 单线程防阻塞的原理

JavaScript 是一种单线程语言,这意味着它一次只能执行一个任务。这种设计可能会导致一些问题,比如当遇到耗时的操作时,整个程序可能会被阻塞。为了解决这个问题,JavaScript 使用了事件循环和回调函数的机制,实现了非阻塞式的异步操作。 事件循环 JavaScript 有一个事件队列,用…...

Shell脚本发送邮件的详细步骤与配置方法?

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

如何把Phalcon 集成到PhpStorm里面

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

python从入门到精通:循环语句

目录 前言 1、while循环的基础语法 2、while循环的嵌套 3、for循环的基础语法 range语句&#xff1a; for循环临时变量作用域&#xff1a; 4、for循环的嵌套 5、循环中断&#xff1a;break和continue 前言 循环普遍存在于日常生活中&#xff0c;同样&#xff0c;在程序中…...

Codeforces Round 965 (Div. 2)

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

Win10下载安装Mysql服务

Win10下载安装MySQL 一、官网下载MySQL 1.官网地址&#xff1a; https://www.mysql.com/ 2.在官网首页拉到最下方&#xff0c;点击MySQL Community Server&#xff1a; 3.根据个人电脑的操作系统选择&#xff0c;此处以Windows x64为例&#xff0c;选择第2个&#xff0c;点击…...

MVVM(Model-View-ViewModel)架构模式

在Android开发中&#xff0c;MVVM&#xff08;Model-View-ViewModel&#xff09;架构模式已经成为构建可维护和可扩展应用程序的重要选择。MVVM模式通过分离视图&#xff08;View&#xff09;、模型&#xff08;Model&#xff09;和视图模型&#xff08;ViewModel&#xff09;来…...

C#MVC返回DataTable到前端展示。

很久没写博客了&#xff0c;闭关太久&#xff0c;失踪人口回归&#xff0c;给诸位道友整点绝活。 交代下背景&#xff1a;要做一个行转列的汇总统计&#xff0c;而且&#xff0c;由于是行转列&#xff0c;列的数量不固定&#xff0c;所以&#xff0c;没法使用正常的SqlSugar框…...

HttpUtils工具类(二)Apache HttpClient 5 使用详细教程

目录 一、Apache HttpClient 5介绍 &#xff08;1&#xff09;核心特性 &#xff08;2&#xff09;Apache HttpClient 5 的新特性 &#xff08;3&#xff09;在 Java 项目的主要使用场景及缺点 使用场景&#xff1a; 缺点&#xff1a; 二、在实际项目中的应用 &#xf…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...