javascript - 是否可以将具有相同属性的元素与 querySelectorAll 结合起来？

Question

出于好奇，是否可以重构它:

document.querySelectorAll('input[id^=' + tagId + '],select[id^=' + tagId + '],textarea[id^=' + tagId + ']');

像这样更小的东西？

document.querySelectorAll('(input|select|textarea)[id^=' + tagId + ']');

当然这行不通，这就是我问的原因。可能吗？

Answer 1

使用:any伪类；

document.querySelectorAll('[id^=' + tagId + ']:-webkit-any(input, textarea, select)');

现在，您需要为 Chrome 和 Safari 添加 -webkit- 前缀，或为 Firefox 添加 -moz 前缀；没有 IE 支持。这很可能最终以 :matches 的名称被标准化。请参阅 MDN 文档 here .

但是，通过 ID 管理 DOM 元素，就好像它们是某个巨大的全局命名空间中的命名变量一样，是一种反模式。很可能有更好的方法来查找和跟踪元素，而不是在你的代码中分配一堆 ID，然后在你每次按顺序转身时在那里执行 getElementById 或等效的方法再次找到它，更不用说进行类似通配符的搜索了。