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’)

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java基础—java.io.FileNotFoundException: D:\\AAA(拒绝访问。)

    java.io.FileNotFoundException: D:\AAA(拒绝访问)

    2022年2月24日
    66
  • libtorch-resnet18

    libtorch-resnet18与大家分享一下自己在学习使用libtorch搭建神经网络时学到的一些心得和例子,记录下来供大家参考首先我们要参考着pytorch版的resnet来搭建,这样我们可以省去不必要的麻烦,上代码:1、首先是pytorch版残差模块classResidualBlock(nn.Module):def__init__(self,inchannel,outchannel,stride=1,shortcut=None):super(ResidualBlock,self).__

    2022年5月23日
    38
  • 学生成绩管理系统(C语言)「建议收藏」

    学生成绩管理系统(C语言)「建议收藏」思路学生成绩管理系统,首先要初始化系统,开始一个新的学生成绩系统初始化记录学生姓名,学号,院系,然后输入学生各科成绩,数学,英语,语文成绩。记录完各课成绩以后,可查看学生平均成绩和是否及格,成绩查询其中有学号查询,姓名查询,院系查询,还有全部输出,可以清晰的看到及格人数,按照分数高低排列,最后还可以添加和删除学生成绩,或者更改学生成绩,避免人为录入成绩错误。基本函数1.结构体structStudent定义一个结构体struct,结构体的关键字,students定义的结构体对象。学…

    2022年6月20日
    34
  • Karate-让WebService的测试变的更简单![通俗易懂]

    Karate-让WebService的测试变的更简单![通俗易懂]karate的github项目地址:https://github.com/intuit/karatekarate是唯一一个将API测试自动化、模拟和性能测试结合到一个统一框架当中的开源工具。除了强大的JSON和XML断言之外,你还可以并行运行测试来提高运行速度——这对于HTTPAPI测试非常的重要。karate可以轻松的构建和重用复杂的有效请求负载并动态的响应数据构建更多的请求。负载和模…

    2025年7月13日
    3
  • JVM内存分配与管理详解

    JVM内存分配与管理详解概述了解C++的程序员都知道,在内存管理领域,都是由程序员维护与管理,程序员用于最高的管理权限,但对于java程序员来说,在内存管理领域,程序员不必去关心内存的分配以及回收,在jvm自动内存管理机制的帮助下,不需要想C++一样为每一个new操作去编写delete/free代码,这一切交给jvm,但正是这一切都交给了jvm,一旦出现内存泄漏与溢出,如果不了jvm,那么对于程序的编写与调试将会非常

    2022年6月1日
    57
  • java并发编程实战wwj———————-第一阶段————–27-28-29-30

    java并发编程实战wwj———————-第一阶段————–27-28-29-30代码:chapter9sleep:是Threa的方法,sleep不释放锁,sleep不用synchronized,不需要被唤醒。wait:所有对象的方法,wait释放锁,用synchronized,要被唤醒。如何使用这个案例:切换m1和m2方法。packagechapter9;importjava.util.stream.Stream;/************…

    2022年9月27日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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