DOMException: Failed to execute 'querySelectorAll' on 'Document' is not a valid selector 報錯處理
問題過程
今天開發(fā)過程中,遇到一個報錯信息:
react-dom.production.min.js:5058 DOMException: Failed to execute 'querySelectorAll' on 'Document': '0bb64d67-b455-4130-9b73-55eda6a1975c8Buu-link-ellipsis' is not a valid selector.
截圖1
字面意思是:querySelectorAll 函數(shù)報錯,這個不是一個有效的選擇器。我在界面中,打開控制臺,可以找到這個 ID 是'0bb64d67-b455-4130-9b73-55eda6a1975c8Buu-link-ellipsis' 的 DOM 元素,但是為什么報錯呢?
問題原因
查了一下資料,MDN 上有明確解釋:HTML中的ID不能以數(shù)字開頭
截圖2
截圖3
**注意:**使用除 ASCII 字母、數(shù)字、
_
、-
和.
以外的字符可能會造成兼容性問題,因為 HTML 4 中不允許使用它們。雖然這個限制在 HTML5 中被解除了,但為兼容性考慮 ID 應(yīng)該以字母開頭。
解決方法
我原來直接把后端傳來的 ID 作為元素的ID,但是后端 slug 創(chuàng)建的 ID 可能是字母開頭,所以前端 HTML 的節(jié)點,對應(yīng)某些第三方庫,可能出錯??梢灾苯邮褂米帜搁_頭的 ID,這樣就正常了。
參考鏈接
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/id
https://www.runoob.com/jsref/prop-html-id.html
https://www.w3school.com.cn/tags/att_standard_id.asp文章來源:http://www.zghlxwxcb.cn/news/detail-699494.html
https://blog.csdn.net/weixin_34111790/article/details/93976227文章來源地址http://www.zghlxwxcb.cn/news/detail-699494.html