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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/85155.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

clion run qt 问题汇总

一、Error copying file “D:/soft/QT/5.15.2/mingw81_64/bin/Qt5Cored.dll” to “D:/work/Ccode/qtproject/cmake-build-debug-qtmingw”.报错 查看路径下确实没有Qt5Cored.dll,只有Qt5Core.dll 注释掉cmakelist中的这三行 重新执行后成功 二、使用CLion编辑u…

前端探索之旅

目录 简介:内容大纲:第一章 前端开发简介1.1 前端开发的定义和作用1.2 前端开发的职责1.3 前端开发的技能要求1.4 前端开发的发展前景总结: 第二章 HTML基础2.1 HTML基本结构2.2 常见HTML标签和元素 第三章 CSS基础3.1 CSS基本语法3.2 常见CSS选择器3.3 常见CSS属性…

MySQL之 show profile 相关总结

MySQL之 show profile 相关总结 MySQL官网show profile介绍:https://dev.mysql.com/doc/refman/8.0/en/show-profile.html 1. 简介 show profile 和 show profiles 命令用于展示SQL语句的资源使用情况,包括CPU的使用,CPU上下文切换&#xf…

nvm下载node导致npm报错无法使用

有个依赖库需要更新下node,用nvm下载后项目跑不起来了,npm -v 还报错 其实一开始是npm下载不来,然后换了淘宝镜像后还是报错 然后就只能手动下载下了 进入node.js官网 https://nodejs.org/en/download 下载后注意要安装在你nvm目录中&#x…

windows安装apache-jmeter-5.6.2教程

目录 一、下载安装包(推荐第二种) 二、安装jmeter 三、启动jmeter 一、下载安装包(推荐第二种) 1.官网下载:Apache JMeter - Download Apache JMeter 2.百度云下载:链接:https://pan.baidu.…

【算法挨揍日记】day01——双指针算法_移动零、 复写零

283.移动零 283. 移动零https://leetcode.cn/problems/move-zeroes/ 题目: 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 …

Xcode升级导致关联库报错

想办法找到对应的库 然后到 Build Phases -- LinkBinary With Libraries中点击,选择对应的framework即可,就像我工程的报错 Undefined symbol: _OBJC_CLASS_$_ADClient _OBJC_CLASS_$_ASIdentifierManager 缺失的库是AdSupport.framework 添加后再次编…

【服务平台】Rancher运行和管理Docker和Kubernetes,提供管理生产中的容器所需的整个软件堆栈

Rancher是一个开源软件平台,使组织能够在生产中运行和管理Docker和Kubernetes。使用Rancher,组织不再需要使用一套独特的开源技术从头开始构建容器服务平台。Rancher提供了管理生产中的容器所需的整个软件堆栈。  完整软件堆栈 Rancher是供采用容器的团…

Git全栈体系(五)

第八章 IDEA 集成 GitHub 一、设置 GitHub 账号 如果出现 401 等情况连接不上的,是因为网络原因,可以使用以下方式连接: 然后去 GitHub 账户上设置 token。 点击生成 token。 复制红框中的字符串到 idea 中。 点击登录。 二、分享工程…

数据结构顺序表

今天主要讲解顺序表,实现顺序表的尾插,头插,头删,还有尾删等操作,和我们之前写的通讯录的增删查改有类似的功能。接下来让我们开始我们的学习吧。 1.线性表 线性表(linear list)是n个具有相同特…

allegro中不可选时,如何对find进行可选操作

allegro出现不可选时,只能尝试其他单一的操作,但这样效率不高;可以通过菜单栏Display下拉菜单点击Element,即可实现FIND下选择需要调整的选项。

022 - STM32学习笔记 - 扩展外部SDRAM(一) - 初识SDRAM和FMC

022 - STM32学习笔记 - 扩展外部SDRAM(一) - 初识SDRAM和FMC 之前学习了I2C读写EEPROM和SPI读写FLASH,学完之后在学习一种新的存储介质–SDRAM。 一、初识SDRAM 我们知道在stm32内部是有一定大小的SRAM(256Kb)和FLA…

【Cartopy】库的安装和瓦片加载(天地图、高德等)

原文作者:我辈李想 版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。 Cartopy基础入门 【Cartopy】库的安装和天地图瓦片加载 【Cartopy】【Cartopy】如何更好的确定边界显示 【Cartopy】【Cartopy】如何丝滑的加载Geojso…

100G光模块的应用案例分析:电信、云计算和大数据领域

100G光模块是一种高速光模块,由于其高速率和低延迟的特性,在电信、云计算和大数据领域得到了广泛的应用。在本文中,我们将深入探讨100G光模块在这三个领域的应用案例。 一、电信领域 在电信领域,100G光模块被广泛用于构建高速通…

机器学习深度学习——卷积的多输入多输出通道

👨‍🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——从全连接层到卷积 📚订阅专栏:机器学习&&深度学习 希望文章对你们有所帮…

4用opencv玩转图像2

opencv绘制文字和几何图形 黑色底图 显示是一张黑色图片 使用opencv画圆形 #画一个圆 cv2.circle(imgblack_img,center(400,400),radius100,color(0,0,255),thickness10) 画实心圆 只需要把thickness-1。 cv2.circle(imgblack_img,center(500,600),radius50,color(0,0,255),t…

Spark(39):Streaming DataFrame 和 Streaming DataSet 输出

目录 0. 相关文章链接 1. 输出的选项 2. 输出模式(output mode) 2.1. Append 模式(默认) 2.2. Complete 模式 2.3. Update 模式 2.4. 输出模式总结 3. 输出接收器(output sink) 3.1. file sink 3.2. kafka sink 3.2.1. 以 Streaming 方式输出数据 3.2.2. 以 batch …

R语言4_安装BayesSpace

环境Ubuntu22/20, R4.1 你可能会报错说你的R语言版本没有这个库,但其实不然。这是一个在Bioconductor上的库。 同时我也碰到了这个问题,ERROR: configuration failed for package systemfonts’等诸多类似问题,下面的方法可以一并解决。 第…

数据结构刷题训练——链表篇(二)

目录 前言 1.题目一:链表分割 1.1 思路 1.2 分析 1.3 题解 2. 题目二:相交链表 2.1 思路 2.2 分析 2.3 题解 3. 题目三:环形链表 3.1 思路 3.2 分析 3.3 题解 总结 前言 本期继续分享链表相关的OJ题目,在这个专栏博客…

elasticsearch简单入门语法

基本操作 创建不同的分词器 ik_smart: 极简分词 ; ik_max_word: 最细力再度分词 基本的rest命令 methodurl地址描述PUTlocalhost:9200/索引名称/类型名称/文档id创建文档(指定文档id)POSTlocalhost:9200/索引名称/类型名称创建文…