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


相关推荐

  • SQL中declare_hive变量赋值

    SQL中declare_hive变量赋值平时写SQL查询、存储过程都是凭着感觉来,没有探究过SQL的具体语法,一直都是按c#那一套往SQL上模仿,前几天项目中碰到一个问题引起了我对declare定义变量的作用域的兴趣。大家都知道c#中的局部变量,在if中如果我们定义一个变量的话他的作用到if结束为止,if外是不识别这个变量的,else里都不能使用,简单的写一下。

    2022年8月20日
    6
  • MySQL的字段类型_mysql数据库字段类型

    MySQL的字段类型_mysql数据库字段类型前言:要了解一个数据库,我们必须了解其支持的数据类型。MySQL支持大量的字段类型,其中常用的也有很多。前面文章我们也讲过int及varchar类型的用法,但一直没有全面讲过字段类型,本篇文章我们将把字段类型一网打尽,讲一讲常用字段类型的用法。常用的字段类型大致可以分为数值类型、字符串类型、日期时间类型三大类,下面我们按照分类依次来介绍下。1.数值类型数值类型大类又可以分为整型、浮点型、…

    2022年9月6日
    2
  • linux抓包命令详解_抓包后如何分析

    linux抓包命令详解_抓包后如何分析抓包

    2022年10月10日
    0
  • nmap命令教程详解

    nmap命令教程详解-sP:ping扫描(不进行端口扫描)-sT:进行TCP全连接扫描-sS:进行SYN半连接扫描-sF:进行FIN扫描-sN:进行Null扫描-sX:进行Xmas扫描-O:进行测探目标主机版本(不是很准)-sV:可以显示服务的详细版本-A:全面扫描-p:指定端口扫描-oN:会将扫描出来的结果保存成一个txt文件-oX:会将扫描出来的结果保存成一个xml文件[-T1]-[-T5]:提高扫描速度.详细分析1)、主机发现nmap-sP192.168.1

    2022年5月28日
    43
  • 推荐一个非常实用的博客群发工具[通俗易懂]

    推荐一个非常实用的博客群发工具[通俗易懂]http://sns.juziyue.com/webinvite.php?u=30603这是注册地址,名字叫菊子曰,支持很多blog…

    2022年7月13日
    16
  • 高级I/O函数之sendfile函数[通俗易懂]

    高级I/O函数之sendfile函数[通俗易懂]sendfile函数在两个文件描述符之间传递数据(完全在内核中操作),从而避免了内核缓冲区和用户缓冲区之间的数据拷贝,效率很高,被称为零拷贝。函数定义为:#include<sys/sendfile.h>ssize_tsenfile(intout_fd,intin_fd,off_t*offset,size_tcount);in_fd参数是待读出内容的文件描述符,out…

    2022年5月10日
    33

发表回复

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

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