遍历dom元素下面的子元素的方法,vue中原始标签的ref得到是该元素的dom及下面包含的子dom,与组件ref是引用不同

 研究到这个的目的来源是 想用div 遍历方式 替代之前的table tr td 那种框选功能,觉得div灵活,可以随便在外面套层,td与tr之间就不能加div加了布局就乱,然后使用之前的原理(

  const cellList = tableIdR.value.querySelectorAll('td');

  cellList.forEach((cell) => { const initRow = parseInt(cell.getAttribute('initrow'), 10)

),发现这样遍历不好使。然后进一步找ref得到的是啥、dom节点要怎样遍历。

ref放在自定义组件上得到的是组件的引用,
放到原生元素如div 等上面得到的是旗下包含的dom节点

 <div class="squ1"  ref="tableIdR" :id="tableId"><el-row class="t1"  v-for="rindex of rowNum" :key="rindex" :id="rindex" :ref="rindex"><div v-for="cindex of colNum" :key="cindex" :ref="getCellSeq(rindex,cindex)":id="getCellSeq(rindex,cindex)":SampleID="getObjectSampleID(rindex,cindex)":initRow="rindex":initCol="cindex"@mousedown="handleMouseDown"@mouseup="handleMouseUp"@contextmenu="openContextMenu($event)"@dblclick = "openEditEnable(rindex,cindex,true)":style="{width:widthp,height:heightp,fontSize: fontSize}">{{ rindex }}{{ cindex }}</div></el-row></div></div>const tableId = 'tableIdR'// 下面是遍历ref是 ’tableIdR‘的原生dom下的子元素dom,ref放在自定义组件上得到的是组件的引用,
放到原生元素如div 等上面得到的是旗下包含的dom节点,如下面截图
const clearBorderStyles = (tableId) => {console.log('vue新方法 tableIdR 打印原生元素的ref内容  ',tableIdR)Array.from(tableIdR.children).forEach((child) => {console.log('下一级元素: ',child); // 输出每个子元素Array.from(child.children).forEach((childSub) => {console.log('下二级元素: ',childSub); // 输出每个子元素});});

 

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

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

相关文章

【反转链表 II】python刷题记录

印象中&#xff0c;这是遍历r2了&#xff0c;还好没放弃。 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def reverseBetween(self, head: Optional…

C# struct里面的class是值类型还是引用类型

最近在接连的面试一些候选者&#xff0c;我发现很多候选者对于基础还是一知半解 很多人知道struct是值类型&#xff0c;class是引用类型 但是我补一句&#xff0c;如果一个struct里面有个class是值类型还是引用类型 很多面试者就答不出来了&#xff0c;其实这是个很简单的问题…

了解Selenium中的WebElement

Selenium中到处都使用WebElement来执行各种操作。什么是WebElement&#xff1f;这篇文章将详细讨论WebElement。 Selenium中的WebElement是一个表示网站HTML元素的Java接口。HTML元素包含一个开始标记和一个结束标记&#xff0c;内容位于这两个标记之间。 HTML元素的重命名 …

Spring Boot与微服务架构:快速开发指南

引言 随着微服务架构的兴起,越来越多的企业选择将应用拆分成一系列小型、独立且松耦合的服务。Spring Boot作为Spring Framework的扩展,提供了快速开发微服务的能力。本文将深入探讨如何使用Spring Boot快速开发微服务,包括服务发现、配置管理等关键技术。 微服务架构概述…

SCADA系统易用性的重要性

对于中小企业而言&#xff0c;SCADA系统的易用性至关重要&#xff0c;因为它直接影响到系统的实施效率、员工的接受程度和培训成本。一个易用的SCADA系统可以减少员工对新技术的学习曲线&#xff0c;加快系统的部署速度&#xff0c;并降低长期的维护成本。此外&#xff0c;易用…

音视频入门基础:H.264专题(15)——FFmpeg源码中通过SPS属性获取视频帧率的实现

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…

Parameter index out of range (2 > number of parameters, which is 1【已解决】

文章目录 1、SysLogMapper.xml添加注释导致的2、解决方法3、总结 1、SysLogMapper.xml添加注释导致的 <!--定义一个查询方法&#xff0c;用于获取日志列表--><!--方法ID为getLogList&#xff0c;返回类型com.main.server.api.model.SysLogModel,参数类型为com.main.se…

Unity UGUI 之 坐标转换

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本&#xff0c;请注意分别 前置知识&#xff1a;…

大模型-鲁棒性总结-2024-7-21

大语言模型-鲁棒性总结 文章目录 大语言模型-鲁棒性总结1.大语言模型的鲁棒性概述2.自然噪声的鲁棒性2.1.真实标签任务的性能2.2.开放式任务的表现 3.评估分布外&#xff08;OOD&#xff09;任务的弹性3.1.OOD检测3.2.OOD泛化 1.大语言模型的鲁棒性概述 大语言模型&#xff08…

牛客JS题(三)文件扩展名

注释很详细&#xff0c;直接上代码 涉及知识点&#xff1a; 正则表达式可选链操作符 题干&#xff1a; 我的答案 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /></head><body><script>/*** 可能…

快速上手,spring boot3整合task实现定时任务

在已经上线的项目中&#xff0c;定时任务是必不可少的。基于spring boot自动装配的原理&#xff0c;我们要集成task定时任务还是非常简单的。只需要简单的两步就可以实现。 1、创建一个spring boot项目&#xff0c;并在项目的启动类&#xff08;也不一定非要是启动类&#xff…

AI测试入门:认识AI大语言模型(LLM)

AI测试入门&#xff1a;认识AI大语言模型&#xff08;LLM&#xff09; 前言一、大语言模型的概述1. 什么是大语言模型&#xff1f;2. 大语言模型的历史发展 二、大语言模型的工作原理1. Transformer架构自注意力机制 2. 预训练与微调预训练微调 三、大语言模型的应用场景1. 文本…

LabVIEW 实现用户授权与管理多项测试项目

在使用 LabVIEW 开发测试软件时&#xff0c;用户授权和项目管理是一个重要的功能。为了确保系统安全性、灵活性和可扩展性&#xff0c;可以设计一个用户管理系统&#xff0c;允许管理员增加或减少用户的测试项目权限。以下是一个详细的实现方案&#xff0c;包括用户授权管理、项…

Modbus RTU协议 与 Modbus TCP/IP协议的区别

前面讲解Modbus协议时提到了多种协议类型&#xff0c;今天来讲讲Modbus RTU和Modbus TCP/IP协议的区别。 Modbus RTU和Modbus TCP/IP协议的本质都是Modbus协议&#xff0c;都是通过Modbus寄存器地址来交换数据的&#xff0c;那么它们之间有什么区别呢&#xff1f;今天我们从以…

buu做题(7)

[BJDCTF2020]Mark loves cat 开始的界面没啥东西, 看了下源码好像也没啥东西 用dirsearch扫描一下 有git 泄露 用工具githack下载源码 <?phpinclude flag.php;$yds "dog"; $is "cat"; $handsome yds;foreach($_POST as $x > $y){$$x $y; }f…

前端静态资源的动态访问

静态资源打包规则 Vite脚手架在打包代码的时候&#xff0c;会把源代码里对于静态资源的访问路径转换为打包后静态资源文件的路径。主要的区别是文件指纹&#xff0c;即打包后的文件会带上一个hash值&#xff0c;用于区分不同版本的文件。 文件指纹的作用 当前端项目更新之后&…

el7升级Apache修复漏洞

1、Apache安全漏洞 Apache HTTP Server拒绝服务漏洞&#xff08;CVE-2018-1303&#xff09;Apache HTTP Server 安全漏洞&#xff08;CVE-2018-17199&#xff09;Apache HTTP Server 内存破坏漏洞&#xff08;CVE-2017-9788&#xff09;Apache httpd 信息泄露漏洞&#xff08;C…

GNSS相关资料

常识 GNSS(二)&#xff0c;自动驾驶定位团队的“保护伞”&#xff1a;https://owwjm7oycuv.feishu.cn/docx/BAfsdC34zoN6htx4uUycbvknnub#CiWXdRZfWoqrzmxRptJcH7MYnug GNSS伪距差分和RTK&#xff1a;https://zhuanlan.zhihu.com/p/680687517 关于GNSS技术介绍&#xff08;一&…

江科大/江协科技 STM32学习笔记P6

文章目录 LED闪烁&LE流水&蜂鸣器一、操作STM32的GPIO步骤二、RCC库函数什么是AHB与APB&#xff1f; 三、GPIO库函数GPIO初始化选择IO接口工作方式 四、四种方法实现LED闪灯 LED闪烁&LE流水&蜂鸣器 一、操作STM32的GPIO步骤 1、使用RCC开启GPIO的时钟 2、使用…

CV Method:YOLOv10 vs YOLOv8

文章目录 前言一、介绍二、YOLOv8 and YOLOv10 Comparison1.模型结构YOLOv8&#xff1a;YOLOv10&#xff1a; 2. 推理和时延3. 检测表现4. 参数利用5. 关键比较 总结 前言 YOLOv10已经开源一段时间了&#xff0c;经过我实际使用测试&#xff0c;也确实性能更好一些&#xff0c…