关于querySelector和getElementById的区一些问题

场景

今天遇到一个比较有意思的bug，通过querySelector选择器选择指定id的元素时，如果这个id中有分号，会报错。

究其根本，就是querySelector选择指定id时，id不能有分号。但是经测试，getElementById方法是可以获取到包含分号的id的元素的。
在实际场景中，很可能出现无法使用getElementById只能使用querySelector的情况，比如，我在tinymce编辑器中的实例editor中，使用getBody()方法获取到的元素上，可以使用querySelector，但是不能使用getElementById，因为tinymce官方没有把getElementById绑定到该api上。
如何解决文章最后会将，让我们先了解一下querySelector和getElementById的区别。

querySelector和getElementById的区别

getElementById 方法：

用途：getElementById 方法是用于通过元素的 ID 属性获取特定 ID 元素的常用方法。
选择器：它仅允许通过指定 ID 名称来选择元素，因此只能选择页面中具有特定 ID 的元素。
返回值：返回具有指定 ID 的元素（或者在没有匹配到对应 ID 的情况下返回 null）。
用法：使用方式为 document.getElementById('idName')，其中 'idName' 是要获取的元素的 ID 名称。

querySelector 方法：

用途：querySelector 方法允许使用 CSS 选择器语法选择元素，从而可以更灵活地选择元素，可以选择任何符合选择器的元素。
选择器：它允许使用更复杂的选择器语法，可以通过类名、标签名、属性、伪类等来选择元素，不限于 ID。
返回值：返回匹配到的第一个元素，如果没有匹配到任何元素则返回 null。
用法：使用方式为 document.querySelector('selector')，其中 'selector' 是任何有效的 CSS 选择器。

区别总结：

getElementById 只能根据 ID 获取元素，而 querySelector 可以使用更灵活的 CSS 选择器来选择元素，例如类名、标签名等。
getElementById 获取的是具有指定 ID 的元素，而 querySelector 获取的是匹配选择器的第一个元素。
querySelector 具有更广泛的用途，但在选择性能方面，getElementById 通常更快，因为它专门针对 ID 进行优化。

解决方法

1.要选择具有特殊字符（比如分号 ;）或其他特殊情况的 ID 的元素，可以考虑使用 CSS 属性选择器来实现。
例如，

// 属性选择器
const element = document.querySelector('[id="your;id"]');

2.或者虽然当前的实例上可能没有getElementById方法， 但是可以获取更大范围的实例，然后使用getElementById。但是注意，如果项目使用iframe嵌入的其他程序，是无法从外部元素访问iframe内部元素的，使用各种编辑器都是这样，引入的编辑器都是在iframe内部的。