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)


相关推荐

  • python与java的区别(java 和python)

    java和python区别Python或Java,哪个更好?这个问题在全球开发者社区引发了许多激烈的讨论。初学者开发人员可能对应该掌握两者中的哪一个有所怀疑。初创公司和公司可能想知道哪种方案在他们的下一个项目中会更好。这两种语言都可以以相同的效率解决许多任务,这不足为奇。但是,在某些情况下,一个人可以击败另一个人。在本文中,我们将基于多个方面来分析它们的优缺点。对于那…

  • 计算距离矩阵的方法_矩阵的欧式距离

    计算距离矩阵的方法_矩阵的欧式距离给定一个 N 行 M 列的 01 矩阵 A,A[i][j] 与 A[k][l] 之间的曼哈顿距离定义为:dist(A[i][j],A[k][l])=|i−k|+|j−l|输出一个 N 行 M 列的整数矩阵 B,其中:B[i][j]=min1≤x≤N,1≤y≤M,A[x][y]=1dist(A[i][j],A[x][y])输入格式第一行两个整数 N,M。接下来一个 N 行 M 列的 01 矩阵,数字之间没有空格。输出格式一个 N 行 M 列的矩阵 B,相邻两个整数之间用一个空格隔开。数据范围

  • MySQL5.7版本sql_mode=only_full_group_by问题解决办法

    MySQL5.7版本sql_mode=only_full_group_by问题解决办法在服务器数据库查询使用了GROUPBY居然报出了1055-Expression#1ofSELECTlistisnotinGROUPBYclauseandcontainsnonaggregatedcolumn’csc_risk.a.DefaultDate’whichisnotfunctionallydependentoncolumnsin…

  • android 复制控件,Android长按复制文本功能[通俗易懂]

    android 复制控件,Android长按复制文本功能[通俗易懂]安卓一般能用到长按复制的控件Textview,Editext,可能也有WebView在开始之前先说一个我遇到的一个坑:viewGroup中有一个这个属性android:descendantFocusability=”blocksDescendants”这个属性有三个值:beforeDescendants:viewgroup会优先其子类控件而获取到焦点afterDescendants:viewgro…

  • Docker安装RabbitMQ并安装延时队列插件

    Docker安装RabbitMQ并安装延时队列插件一、RabbitMQ简介RabbitMQ是由erlang语言开发,基于AMQP(AdvancedMessageQueue高级消息队列协议)协议实现的消息队列,它是一种应用程序之间的通信方法,消息队列在分布式系统开发中应用非常广泛。二、docker安装RabbitMQ1、搜索镜像dockersearchrabbitmq2、拉取并运行容器dockerrun-dit–namerabbitmq-eRABBITMQ_DEFAULT_USER=guest-eR

发表回复

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

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