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)
上一篇 2022年7月15日 下午4:00
下一篇 2022年7月15日 下午4:00


相关推荐

  • Markdown中Latex 数学公式基本语法

    Markdown中Latex 数学公式基本语法Markdown中Latex数学公式基本语法公式排版分为两种排版:-行内公式:用\或者$包裹公式-独立公式:用\$包裹公式。例如:$\sum_{i=0}^{n}i^2$表示∑ni=0i2\sum_{i=0}^{n}i^2$$\sum_{i=0}^{n}i^2$$表示∑i=0ni2\sum_{i=0}^{n}i^2一下

    2022年6月16日
    40
  • idea控制台乱码解决办法

    idea控制台乱码解决办法IDEA 控制台乱码问题文章目录 IDEA 控制台乱码问题为了节省大家时间 直接展示下我的编码配置方案我的编码配置原则我的编码配置另外说一下几个重要但是和乱码无关的配置乱码原因解决方式我为什么推荐控制台使用 GBK 我的编码设置思想第一种解决方案的弊端 end 附加技巧如何找出具体乱码原因

    2026年3月18日
    2
  • CSS变量

    CSS变量今天的问题是如何实现一个主题切换功能 比如我们有黑白两个主题 常规的做法是编写两个 CSS 主题文件 light css theme light background color fff color 444 theme lighta color 444 black css theme black background color 000

    2026年3月19日
    1
  • 补码(为什么按位取反再加一):告诉你一个其实很简单的问题

    补码(为什么按位取反再加一):告诉你一个其实很简单的问题首先 阅读这篇文章的你 肯定是一个在网上已经纠结了很久的读者 因为你查阅了所有你能查到的资料 然后他们都会很耐心的告诉你 补码 就是按位取反 然后加一 准确无误 毫无破绽 但是 你搜遍了所有俯拾即是而且准确无误的答案 却仍然选择来看这篇毫不起眼的文章 原因只有一个 只因为你还没有得到你想要的东西 nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp 因为你想要的 不是 1 1 2 而是 1 1 为什么等于 2 当然 我们不讨论

    2026年3月26日
    2
  • python三种基本数据类型有哪些_python中有哪些基本数据类型

    python三种基本数据类型有哪些_python中有哪些基本数据类型python的基本数据类型有哪些?下面一一给大家介绍:1、数字—>int类当然对于数字,Python的数字类型有int整型、long长整型、float浮点数、complex复数、以及布尔值(0和1),这里只针对int整型进行介绍学习。在Python2中,整数的大小是有限制的,即当数字超过一定的范围不再是int类型,而是long长整型,而在Python3中,无论整数的大小长度为多少,…

    2022年5月7日
    79
  • ads1115多片并联

    ads1115多片并联单引脚实现 4 片选择 很特别的一个东西特此记录一般来说应该只能连接 2 片 一个选择引脚 不过此种方法却实现了 4 片选择 特此记录 anlog2021 年 11 月 12 日

    2026年3月18日
    2

发表回复

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

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