当前位置: 首页 > 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数据。…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

适应性Java用于现代 API:REST、GraphQL 和事件驱动

在快速发展的软件开发领域&#xff0c;REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名&#xff0c;不断适应这些现代范式的需求。随着不断发展的生态系统&#xff0c;Java 在现代 API 方…...

深度解析云存储:概念、架构与应用实践

在数据爆炸式增长的时代&#xff0c;传统本地存储因容量限制、管理复杂等问题&#xff0c;已难以满足企业和个人的需求。云存储凭借灵活扩展、便捷访问等特性&#xff0c;成为数据存储领域的主流解决方案。从个人照片备份到企业核心数据管理&#xff0c;云存储正重塑数据存储与…...

C++中vector类型的介绍和使用

文章目录 一、vector 类型的简介1.1 基本介绍1.2 常见用法示例1.3 常见成员函数简表 二、vector 数据的插入2.1 push_back() —— 在尾部插入一个元素2.2 emplace_back() —— 在尾部“就地”构造对象2.3 insert() —— 在任意位置插入一个或多个元素2.4 emplace() —— 在任意…...