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

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事件流分为三个阶段:

  1. 捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段

注意:


四.事件对象

  1. event就是一个事件对象,写在我们侦听函数的小括号里面,当作形参来看
  2. 事件对象只有有了事件才会存在,它是系统给我们自动创建的 不需要我们传递参数
  3. 事件对象是我们事件的一系列相关数据的集合,跟事件相关的,比如鼠标点击里面就包含了鼠标的相关信息,鼠标坐标啊,如果是键盘事件里面就包含的键盘事件的信息,比如判断用户按下了那个键
  4. 这个事件对象我们可以自己命名,比如event  evt  e
  5. 事件对象也有兼容性问题        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群&#xff…...

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. …...

【算法学习】高级班九

这种互为旋变串&#xff1a; 给定两个字符串&#xff0c;判断是否互为旋变串 代码&#xff1a; 打表法&#xff1a; 每一层内的数字不互相依赖&#xff0c;只依赖它下面的层但实际上size会约束L1和L2的值&#xff0c;即L1和L2<N-size 思路&#xff1a;设置一个窗口…...

数据安全加固:深入解析滴滴ES安全认证技术方案

前文分别介绍了滴滴自研的ES强一致性多活是如何实现的、以及如何提升ES的性能潜力。由于ES具有强大的搜索和分析功能&#xff0c;同时也因其开源和易于使用而成为黑客攻击的目标。近些年&#xff0c;业界ES数据泄露事件频发, 以下是一些比较严重的数据泄露案件&#xff1a; 202…...

Typescript第九/十章 前后端框架,命名空间和模块

第九章 前后端框架 9.1 前端框架 Typescript特别适合用于开发前端应用。Typescript对JSX有很好的支持&#xff0c;而且能安全地建模不可变性&#xff0c;从而提升应用的结构和安全性&#xff0c;写出的代码正确性高&#xff0c;便于维护。 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架构后的感悟

作者&#xff1a;leobertlan 前言 当时项目采用MVP分层设计&#xff0c;组员的代码风格差异也较大&#xff0c;代码中类职责赋予与封装风格各成一套&#xff0c;随着业务急速膨胀&#xff0c;代码越发混乱。试图用 MVI架构 单向流 形成 掣肘 带来一致风格。 但这种做法不够以…...

ApacheCon - 云原生大数据上的 Apache 项目实践

Apache 软件基金会的官方全球系列大会 CommunityOverCode Asia&#xff08;原 ApacheCon Asia&#xff09;首次中国线下峰会将于 2023 年 8 月 18-20 日在北京丽亭华苑酒店举办&#xff0c;大会含 17 个论坛方向、上百个前沿议题。 字节跳动云原生计算团队在此次 CommunityOve…...

Git 代码分支规范

目的 俗话说&#xff1a;没有规矩&#xff0c;不成方圆。遵循一个好的规章制度能让你的工作事半功倍。同时也可以展现出你做事的认真的态度以及你的专业性&#xff0c;不会显得杂乱无章&#xff0c;管理困难。Git分支规范也是一样。当遵循了某种约定的Git分支&#xff0c;在代…...

ATFX汇评:美7月通胀率数据基本符合预期,美指仍无法站稳103关口

ATFX汇评&#xff1a;据美劳工部&#xff0c;美国7月未季调CPI年率&#xff0c;最新值3.2&#xff0c;高于前值3%&#xff0c;低于预期值3.3%&#xff0c;这标志着连续12个月的下降已经停止&#xff1b;7月未季调核心CPI年率&#xff0c;最新值4.7%&#xff0c;低于前值4.8%&am…...

系统架构设计专业技能 · 软件工程(一)【系统架构设计师】

系列文章目录 系统架构设计高级技能 软件架构概念、架构风格、ABSD、架构复用、DSSA&#xff08;一&#xff09;【系统架构设计师】 系统架构设计高级技能 系统质量属性与架构评估&#xff08;二&#xff09;【系统架构设计师】 系统架构设计高级技能 软件可靠性分析与设计…...

C语言 指针的运算

目录 一、介绍 二、指针 整数 、指针 - 整数 二、指针 - 指针 四、指针的关系运算 一、介绍 在C语言中&#xff0c;指针的运算分为三类 1、指针 整数 、指针 - 整数2、指针 - 指针3、指针的关系运算 二、指针 整数 、指针 - 整数 因为数组在…...

【JAVA基础】- 同步非阻塞模式NIO详解

【JAVA基础】- 同步非阻塞模式NIO详解 文章目录 【JAVA基础】- 同步非阻塞模式NIO详解一、概述二、常用概念三、NIO的实现原理四、NIO代码实现客户端实现服务端实现 五、同步非阻塞NIO总结 一、概述 NIO&#xff08;Non-Blocking IO&#xff09;是同步非阻塞方式来处理IO数据。…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

前端调试HTTP状态码

1xx&#xff08;信息类状态码&#xff09; 这类状态码表示临时响应&#xff0c;需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分&#xff0c;客户端应继续发送剩余部分。 2xx&#xff08;成功类状态码&#xff09; 表示请求已成功被服务器接收、理解并处…...

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

大模型真的像人一样“思考”和“理解”吗?​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...

window 显示驱动开发-如何查询视频处理功能(三)

​D3DDDICAPS_GETPROCAMPRANGE请求类型 UMD 返回指向 DXVADDI_VALUERANGE 结构的指针&#xff0c;该结构包含特定视频流上特定 ProcAmp 控件属性允许的值范围。 Direct3D 运行时在D3DDDIARG_GETCAPS的 pInfo 成员指向的变量中为特定视频流的 ProcAmp 控件属性指定DXVADDI_QUER…...

XXE漏洞知识

目录 1.XXE简介与危害 XML概念 XML与HTML的区别 1.pom.xml 主要作用 2.web.xml 3.mybatis 2.XXE概念与危害 案例&#xff1a;文件读取&#xff08;需要Apache >5.4版本&#xff09; 案例&#xff1a;内网探测&#xff08;鸡肋&#xff09; 案例&#xff1a;执行命…...