Ke's blog
·
以数字开头的 ID 在 querySelector 中的处理
💡
原文中文，约1700字，阅读约需4分钟。
📝
内容提要
在HTML5中，数字ID合法但可能引发问题，使用querySelector选择时会抛出错误。最佳实践是使用有意义的ID或getElementById方法。若需使用数字ID，可通过CSS转义、属性选择器或CSS.escape方法解决。
🎯
关键要点
- 在HTML5中，数字作为ID是合法的，但可能引发问题。
- 使用querySelector选择数字ID时会抛出SyntaxError: DOM Exception 12错误。
- 最佳实践是使用有意义的ID，如message1或item2。
- 可以使用getElementById方法直接访问数字ID，无需转义。
- CSS转义可以解决数字ID的问题，例如使用#\31。
- 属性选择器可以避免直接使用ID选择器，但略显繁琐。
- CSS.escape方法可以自动处理动态生成的ID的转义问题。
- 可以创建自定义函数来处理转义，以支持旧浏览器。
❓
延伸问答
为什么在HTML5中使用数字作为ID可能会引发问题？
虽然数字ID在HTML5中是合法的，但使用querySelector选择时会抛出SyntaxError: DOM Exception 12错误，因为CSS选择器不支持以数字开头的ID。
如何避免使用数字ID带来的问题？
最佳实践是使用有意义的ID命名，如message1或item2，以避免与数字ID相关的问题。
使用getElementById方法有什么优势？
getElementById方法可以直接处理数字ID，无需转义，使用简单且高效。
如何使用CSS转义来处理数字ID？
可以通过CSS转义，例如使用#\31来选择ID为1的元素，这样可以避免错误。
属性选择器在处理数字ID时有什么特点？
属性选择器可以避免直接使用ID选择器，虽然有效，但使用起来略显繁琐。
CSS.escape方法如何简化数字ID的处理？
CSS.escape方法可以自动处理动态生成的ID的转义问题，使代码更加简洁。
➡️
