DOM的节点操作+事件高级+DOM事件流+事件对象
一.节点操作

1.父节点:
- node.parentNode 得到的是离元素最近的父级节点
2.子节点:
- parentNode.childNodes 所有的子节点 包含元素节点 文本节点等等
- parentNode.children (非标准) 获取所有的子元素节点,实际开发常用
- parentNode.firstChild 获取第一个子节点 不管是文本节点还是元素节点
- parentNode.lastChild 获取最后一个子节点 不管是文本节点还是元素节点
- parentNode.firstElementChild 返回第一个子元素节点(兼容性问题,IE9以上才支持)
- parentNode.lastElementChild 返回最后一个子元素节点(兼容性问题,IE9以上才支持)
实际开发: 既没有兼容性问题又返回第一个子元素
- 如果想要第一个子元素节点,可以使用 parentNode.chilren[0]
3.兄弟节点:
- node.nextSibling 下一个兄弟节点 包含元素节点或者文本节点等等
- node.previousSibling 上一个
- node.nextElementSibling 得到下一个兄弟元素节点
- node.previousElementSibling 上一个
4.创建节点
- document.createElement('tagName') 动态创建元素节点
5.添加节点
- node.appendChild(child) node父级 child子级 后面追加元素
- node.insertBefore(child , 指定元素)
6.删除节点
- node.removeChild(child)
7.复制节点(克隆节点)
- node.cloneNode()
- 如果括号参数为空或者里面是false 浅拷贝 只复制标签不复制内容
- 括号内为true 深拷贝 复制标签包括里面的内容
8.三种创建元素方式的区别
- document.write()
- innerHTML
- document.createElement()
区别:
- document.write() 如果页面文档流加载完毕,再调用这句话会导致页面重绘
- innerHTML是将内容写入某个DOM节点,不会导致页面全部重绘
- innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
- createElement()创建多个元素效率稍低一点点,但是结构更清晰
二.事件高级
1.注册事件(绑定事件)
传统注册事件:
- 利用on开头的事件onclick
- 特点:注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数
方法监听注册事件:
- w3c标准 推荐方法
- addEventListener()它是一个方法
- IE9之前的IE不支持此方法,可使用attachEvent()代替
- 特点:同一个元素同一个事件可以注册多个监听器,按注册顺序依次执行
addEventListener()事件监听方式:
eventTarget.addEventListener(type , listener[ , useCapture]);
三个参数:
- type:事件类型字符串,比如click , mouseover ,注意这里不要加on,并且一定是字符串
- listener:事件处理函数,事件发生时会调用该监听函数
- useCapture:可选参数,是一个布尔值,默认是false
attachEvent事件监听方式:只有ie9以前的版本支持
eventTarget.attachEvent(eventNameWithOn , callback);
两个参数:
eventNameWithOn:事件类型字符串,比如onclick , onmouseover 这里要带on
callback:事件处理函数,当目标触发事件时回调函数被调用
2.删除事件(解绑事件)
传统方式删除事件:
- eventTarget.onclick = null
方法监听删除事件:
- eventTarget.removeEventListener(type , listener[ , useCapture]);
- eventTarget.detachEvent(eventNameWithOn , callback);
三.DOM事件流
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程就叫做DOM事件流
DOM事件流分为三个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
注意:

四.事件对象
- event就是一个事件对象,写在我们侦听函数的小括号里面,当作形参来看
- 事件对象只有有了事件才会存在,它是系统给我们自动创建的 不需要我们传递参数
- 事件对象是我们事件的一系列相关数据的集合,跟事件相关的,比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标啊,如果是键盘事件里面就包含的键盘事件的信息,比如判断用户按下了那个键
- 这个事件对象我们可以自己命名,比如event evt e
- 事件对象也有兼容性问题 ie678通过window.event
常见事件对象的属性和方法:

return false也能阻止默认行为,没有兼容性问题
特点:return后面的代码就不执行了 而且只限于传统的注册方式
五.事件委托(代理 委派)
给父节点添加侦听器 , 利用事件冒泡影响每一个子节点
常见的鼠标事件:
禁止鼠标右键菜单: contextmenu 主要用于程序员取消默认的上下文菜单
禁止鼠标选择: selectstart
鼠标事件对象:
MouseEvent
常见的键盘事件:

注意:

keyCode属性可以判断用户按下哪个键
keyup和keydown事件不区分字母大小写 a和A得到都是65
keypress事件区分字符大小写 a 97 A 65
相关文章:
DOM的节点操作+事件高级+DOM事件流+事件对象
一.节点操作 1.父节点: node.parentNode 得到的是离元素最近的父级节点 2.子节点: parentNode.childNodes 所有的子节点 包含元素节点 文本节点等等parentNode.children (非标准) 获取所有的子元素节点,实际开发常用 parentNode.firstChild 获取…...
云端剪切板,让你的数据同步无界
云端剪切板,让你的数据同步无界! 每个人都应该保护自己的数据,同时使它易于访问和共享。这就是我们的云剪切板网站诞生的原因!无论你在哪里,只要登录我们的网站,就可以随时随地使用你的剪切板数据。 你可…...
Location匹配与Rewrite重写
一、常见的Nginx正则表达式 ^ :匹配输入字符串的起始位置 $ :匹配输入字符串的结束位置 * :匹配前面的字符零次或多次。如“ol*”能匹配“o”及“ol”、“oll”:匹配前面的字符一次或多次。如“ol”能匹配“ol”及“oll”、“oll…...
Docker源码阅读 - goland环境准备
docker 源码分为两部分 cli 和 moby(docker) tips: docker是从moby拷贝过去的;docker整体是一个C-S架构,cli客户端,docker服务端 docker-ce:https://github.com/docker/docker-ce cli:https://…...
数据库信息速递 -- MariaDB 裁员后,前景不确定 (翻译)
开头还是介绍一下群,如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题,有需求都可以加群群内有各大数据库行业大咖,CTO,可以解决你的问题。加群请加 liuaustin3微信号 ,在新加的朋友会分到3群ÿ…...
4.1 Windows终端安全
数据参考:CISP官方 目录 安全安装保护账户安全本地安全策略安全中心系统服务安全其他安全设置软件安全获取 一、安全安装(以安装windows系统为例) 选择合适的版本 商业版本:家庭版、专业版、专业工作站版、企业版特殊版本&…...
win10强制卸载奇安信天擎
1、win r 打开运行 2、输入msconfig进入系统配置面板 3、点击引导,修改安全引导配置项 4、重启系统(桌面会变成纯黑背景,符合预期,莫紧张) 5、删除安装的文件夹 若是安装天擎时选择的自定义安装,则配置…...
npm常用命令
npm -v:查看 npm 版本 npm init:初始化后会出现一个 Package.json 配置文件,可以在后面加上 -y,快速跳到问答界面 npm install:会根据项目中的 package.json 文件自动给下载项目中所需的全部依赖 npm insall 包含 -…...
(一)创建型设计模式:4、原型模式(Prototype Pattern)
目录 1、原型模式的含义 2、C实现原型模式的简单实例 1、原型模式的含义 通过复制现有对象来创建新对象,而无需依赖于显式的构造函数或工厂方法,同时又能保证性能。 The prototype pattern is a creational design pattern in software development. …...
【算法学习】高级班九
这种互为旋变串: 给定两个字符串,判断是否互为旋变串 代码: 打表法: 每一层内的数字不互相依赖,只依赖它下面的层但实际上size会约束L1和L2的值,即L1和L2<N-size 思路:设置一个窗口…...
数据安全加固:深入解析滴滴ES安全认证技术方案
前文分别介绍了滴滴自研的ES强一致性多活是如何实现的、以及如何提升ES的性能潜力。由于ES具有强大的搜索和分析功能,同时也因其开源和易于使用而成为黑客攻击的目标。近些年,业界ES数据泄露事件频发, 以下是一些比较严重的数据泄露案件: 202…...
Typescript第九/十章 前后端框架,命名空间和模块
第九章 前后端框架 9.1 前端框架 Typescript特别适合用于开发前端应用。Typescript对JSX有很好的支持,而且能安全地建模不可变性,从而提升应用的结构和安全性,写出的代码正确性高,便于维护。 9.1.1 React JSX/TSX内容等 详情…...
LLM - argparse 解析脚本参数
目录 一.引言 二.argparse 解析 shell 参数 1.使用步骤 2.python 侧示例 3.shell 侧示例 一.引言 CUDA_VISIBLE_DEVICES0 python src/train_bash.py \--stage pt \--model_name_or_path path_to_your_model \--do_train \--dataset wiki_demo \--template default \--fin…...
谈一谈在两个商业项目中使用MVI架构后的感悟
作者:leobertlan 前言 当时项目采用MVP分层设计,组员的代码风格差异也较大,代码中类职责赋予与封装风格各成一套,随着业务急速膨胀,代码越发混乱。试图用 MVI架构 单向流 形成 掣肘 带来一致风格。 但这种做法不够以…...
ApacheCon - 云原生大数据上的 Apache 项目实践
Apache 软件基金会的官方全球系列大会 CommunityOverCode Asia(原 ApacheCon Asia)首次中国线下峰会将于 2023 年 8 月 18-20 日在北京丽亭华苑酒店举办,大会含 17 个论坛方向、上百个前沿议题。 字节跳动云原生计算团队在此次 CommunityOve…...
Git 代码分支规范
目的 俗话说:没有规矩,不成方圆。遵循一个好的规章制度能让你的工作事半功倍。同时也可以展现出你做事的认真的态度以及你的专业性,不会显得杂乱无章,管理困难。Git分支规范也是一样。当遵循了某种约定的Git分支,在代…...
ATFX汇评:美7月通胀率数据基本符合预期,美指仍无法站稳103关口
ATFX汇评:据美劳工部,美国7月未季调CPI年率,最新值3.2,高于前值3%,低于预期值3.3%,这标志着连续12个月的下降已经停止;7月未季调核心CPI年率,最新值4.7%,低于前值4.8%&am…...
系统架构设计专业技能 · 软件工程(一)【系统架构设计师】
系列文章目录 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA(一)【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估(二)【系统架构设计师】 系统架构设计高级技能 软件可靠性分析与设计…...
C语言 指针的运算
目录 一、介绍 二、指针 整数 、指针 - 整数 二、指针 - 指针 四、指针的关系运算 一、介绍 在C语言中,指针的运算分为三类 1、指针 整数 、指针 - 整数2、指针 - 指针3、指针的关系运算 二、指针 整数 、指针 - 整数 因为数组在…...
【JAVA基础】- 同步非阻塞模式NIO详解
【JAVA基础】- 同步非阻塞模式NIO详解 文章目录 【JAVA基础】- 同步非阻塞模式NIO详解一、概述二、常用概念三、NIO的实现原理四、NIO代码实现客户端实现服务端实现 五、同步非阻塞NIO总结 一、概述 NIO(Non-Blocking IO)是同步非阻塞方式来处理IO数据。…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...
用递归算法解锁「子集」问题 —— LeetCode 78题解析
文章目录 一、题目介绍二、递归思路详解:从决策树开始理解三、解法一:二叉决策树 DFS四、解法二:组合式回溯写法(推荐)五、解法对比 递归算法是编程中一种非常强大且常见的思想,它能够优雅地解决很多复杂的…...
文件上传漏洞防御全攻略
要全面防范文件上传漏洞,需构建多层防御体系,结合技术验证、存储隔离与权限控制: 🔒 一、基础防护层 前端校验(仅辅助) 通过JavaScript限制文件后缀名(白名单)和大小,提…...
写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里
写一个shell脚本,把局域网内,把能ping通的IP和不能ping通的IP分类,并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...
GAN模式奔溃的探讨论文综述(一)
简介 简介:今天带来一篇关于GAN的,对于模式奔溃的一个探讨的一个问题,帮助大家更好的解决训练中遇到的一个难题。 论文题目:An in-depth review and analysis of mode collapse in GAN 期刊:Machine Learning 链接:...
