dom.querySelector和document.getElementById区别

、

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’)