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


相关推荐

  • 《Android应用开发揭秘》连载2

    《Android应用开发揭秘》连载2《Android应用开发揭秘》  书名:Android应用开发揭秘作者:杨丰盛出版社:机械工业出版社ISBN:9787111291954出版日期:2010年3月(1版2次)开本:16页码:515版次:1-2定价:69元豆瓣网讨论地址:http://www.douban.com/subject/4200822/China-pub预订地址:http://www.china-pub.

    2022年6月11日
  • 音频编辑大师 3.3 注冊名 注冊码

    音频编辑大师 3.3 注冊名 注冊码

    2021年12月6日
  • Pyinstaller打包exe太大,运行太慢

    Pyinstaller打包exe太大,运行太慢1.背景通过python使用pyqt编写了一个界面程序,并使用pyinstaller将其打包成exe文件2.问题打包的exe文件非常大,有280M,而且更无法忍受的是打开非常非常的慢!!!3.解决办法(1)将import改为from…import…尝试之后,并么有什么用,依然是非常非常的大,非常非常的慢。(2)anaconda的问题看网上有人说是anacon…

    2022年6月20日
  • 谈谈几个 Spring Cloud 常见面试题及答案

    来自:Wbw Belief 链接:blog.csdn.net/qq_41497111/article/details/92067565 全文目录 什么是微服务? 微服务之间如何独立…

    2021年6月23日
  • 汉诺塔问题java代码_汉诺塔问题编程算法

    汉诺塔问题java代码_汉诺塔问题编程算法代码:packagecom.wangyq.datastructrue.arithmetic;importjava.util.Arrays;importjava.util.Stack;/***分治算法-汉罗塔*/publicclassDivideAndConquer{publicstaticvoidmain(String[]args){//定义一个汉罗塔TowerofHanoitowerofHanoi=newT

    2022年10月12日
  • JS 暂时性死区

    JS 暂时性死区JS暂时性死区ES6暂时性死区引用ES6暂时性死区只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。vartmp=123;if(true){tmp=’abc’;//ReferenceErrorlettmp;}上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后…

    2022年6月30日

发表回复

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

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