dom.querySelector和document.getElementById区别

dom.querySelector和document.getElementById区别、document.getElementById可以查询纯数字的iddom.querySelectordocument.querySelectorAll(’[id=“111”]’)在某个dom下寻找相应选择器的元素背景产品反馈项目系统模板复制之后,元素无法拖拽。经排查发现元素继承自move组件。而每个元素绑定的id竟然纯数字;复制模板之后由于项目的复杂性无法统一的对复制出…

大家好,又见面了,我是你们的朋友全栈君。

  1. document.getElementById

    可以查询纯数字的id

  2. dom.querySelector

    document.querySelectorAll(’[id=“111”]’)

    在某个dom下寻找相应选择器的元素

背景

产品反馈项目系统模板复制之后,元素无法拖拽。经排查发现元素继承自move组件。而每个元素绑定的id竟然纯数字;复制模板之后由于项目的复杂性无法统一的对复制出来的模板元素id进行更新。

问题

  1. 一个页面上有多个id相同的dom元素想要拖拽
  2. id为纯数字

解决

  1. 使用dom.queryselector()

    先获取需要拖拽元素的父元素dom,再在父元素中查询相应的dom;减少搜索范围,避免复制的id全页面不唯一无法定位的问题

  2. 如何查询dom

    1. 不更改dom的id

      使用dom.querySelectorAll(’[id=“111”]’)

    2. 更改domId符合规范(对元素的id进行dom+数字的方式进行赋值)

      使用dom.querySelectorAll(’#dom111’)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159599.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 深度图像基础知识(一)

    深度图像基础知识(一)深度图像(depthimage)也被称为距离影像(rangeimage),是指将从图像采集器到场景中各点的距离(深度)作为像素值的图像,它直接反映了景物可见表面的几何形状。深度图像经过坐标转换可以计算为点云数据,有规则及必要信息的点云数据也可以反算为深度图像数据。深度数据流所提供的图像帧中,每一个像素点代表的是在深度感应器的视野中,该特定的(x,y)坐标处物体到离摄像头平面最近的

  • 虚拟存储技术「建议收藏」

    虚拟存储技术「建议收藏」一.实现内存扩充的技术:(1)覆盖技术:在程序运行中,在不同时刻把同一个存储区分配给不同程序段和数据段,实现存储区共享。适用于连续存储(单一连续区分配,分区)如图BDG共享一个存储区(三个进程不同时发生),CEFH同理(2)交换技术(对换技术):1.定义:将内存中某进程的的程序和数据(全部或部分)写入外存的交换区,从而腾出内存空间给其他进程使用。2.相关涉及知识

  • Jquery tmpl的使用

    Jquery tmpl的使用jquerytmpl简介:动态请求数据更新页面非常常用的方法,例如博客评论的分页动态加载,微博的滚动加载和定时请求加载以及ajax请求返回数据等。这些情况下,动态请求返回的数据一般不是已拼好的html就是JSON或XML,总之不在浏览器端拼接数据就在服务器端拼接数据。浏览器端根据JSON生成HTML有个很苦恼的地方就是,结构不复杂的时候还好,结构一复杂,就需要很小心的写出几乎无法维护的javas…

  • 启动马达接线实物图_电动机星三角换接起动原理图解

    启动马达接线实物图_电动机星三角换接起动原理图解采用星三角换接起动,此方式起动为降压起动方式的一种。三角形起动即电动机正常工作时定子接成三角形,起动时接成星形,起动完毕后转速接近额定值时再换成三角形。这样做起动时就把定子每相绕组上的电压降到额定电压的1/√3起动电流降低到1/3额定电流,起动转矩也降低到1/3额定转矩。1、控制电路设计图星三角降压起动2、的讲解:(1)本设计采用220v控制380v电动机工作,电动机定子绕组起动时为星形,在…

  • 浅谈MFCC

    MFCC(Mel-frequencycepstralcoefficients):梅尔频率倒谱系数。梅尔频率是基于人耳听觉特性提出来的,它与Hz频率成非线性对应关系。梅尔频率倒谱系数(MFCC)则是利用它们之间的这种关系,计算得到的Hz频谱特征。主要用于语音数据特征提取和降低运算维度。例如:对于一帧有512维(采样点)数据,经过MFCC后可以提取出最重要的40维(一般而言)数据同时也达到了将维

  • Redis学习——Redis事务[通俗易懂]

    Redis和传统的关系型数据库一样,因为具有持久化的功能,所以也有事务的功能! 面试官:请问Redis支持事务吗?如果支持和传统的关系型数据的事务有什么区别? 应试者:支持,但是是部分支持。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号