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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Python 判断文件是否存在的三种方法

    Python 判断文件是否存在的三种方法这里将介绍三种判断文件或文件夹是否存在的方法,分别使用os模块、Try语句、pathlib模块。1.使用os模块os模块中的os.path.exists()方法用于检验文件是否存在。判断文件是否存在import osos.path.exists(test_file.txt)#True

    2022年6月15日
    40
  • java indexeddb_IndexedDB使用与出坑指南

    java indexeddb_IndexedDB使用与出坑指南概述本文通过对 IndexedDB 的使用方法和使用场景进行相关介绍 对常见的问题进行解答 同时 因为 MDN 中的相关文档缺乏相关逻辑性 所以不容易理解 本文将通过项目中常见的数据存储和操作需求来进行内容组织 读者能够通过本文学会在项目中正确的使用 IndexedDB 给应用带来的本地存储能力 并且避免一些常见的问题 原因 开发者需要在本地进行永久存储当我们进行一些较大的 SPA 页面开发时 我们会需要进行一

    2025年6月30日
    3
  • Course Selection CodeChef – RIN

    Course Selection CodeChef – RIN

    2022年3月2日
    45
  • protel 99se 负片打印「建议收藏」

    protel 99se 负片打印「建议收藏」protel99se负片打印首先得有一个做好的pcb做好的pcb做好的pcb   打开做好的PCB1.      点击下面的mechanical1层再点击place->fill将板子都盖住2.      点击file->new 选择PCBPrinter3.      选中左边的multilayercompositeprint 点击edit-

    2022年5月29日
    63
  • flutter 自定义播放器进度条

    flutter 自定义播放器进度条FijkPlayer第三方的一个视频播放器,这是一个大佬基于比利比利播放器封装的,有常用的API可自定义样式pub传送门默认的样式展示:自定义的样式展示:**使用:**fijkplayer:^0.8.4///声明一个FijkPlayerfinalFijkPlayerplayer=FijkPlayer();@overridevoidinitState(){///指定视频地址player.setDataSource(“ht…

    2025年6月12日
    2
  • Tomcat配置环境变量

    Tomcat配置环境变量Tomcat是目前比较流行的开源且免费的Web应用服务器,在我的电脑上第一次安装Tomcat,再经过网上教程和自己的摸索后,将这个过程重新记录下来,以便以后如果忘记了可以随时查看。注意:首先要明确一点,Tomcat与Java密切相关,因此安装使用之前要先安装JDK并设置JDK的环境变量,由于机子上已经安装好了JDK,也设置好了JDK环境变量,因此这里不再过多叙述,只说明我设置好的环境变量:JAV…

    2022年5月4日
    32

发表回复

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

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