querySelector() — Shadow DOM vs Light DOM

同学们，今天我们来聊聊在LWC组件里怎么用JavaScript选择和操作页面上的元素，也就是querySelector和querySelectorAll这两个标准的DOM API。 首先记住一个前提：如果你要查找的元素是在组件的影子DOM里，也就是那些有自己隔离样式的内部元素，那么调用的时候一定要用this.template打头。比如，this.template.querySelector('.my-class')，这就会限定查找范围只在你这个组件的影子树里面，不会跑到外面去。 那要是你的组件用的是轻量DOM呢？就直接用this，比如this.querySelector('.my-class')，它会在组件的整个模板内搜索，但要注意，轻量DOM的查询有时候可能会搜到你直接模板之外的元素，所以写选择器的时候最好精确一点，别用太宽泛的规则。 好，下面这五个注意事项，大家一定要记牢，不然会遇到很多莫名其妙的bug。 第一，元素顺序没有保证。也就是说你执行查询得到的结果列表，元素出现的顺序不一定跟它们在模板里的书写顺序一致，千万别写依赖特定顺序的逻辑。 第二，条件渲染的元素不会出现在结果里。比如你用了if:true或if:false指令，在条件不满足时，对应的元素压根就不会被创建到DOM里，自然也就查不到。 第三，千万不要用ID选择器。因为在LWC渲染时，你写的id属性值会被自动转换成全局唯一的标识符，你代码里写的那个ID在运行时早就变了，根本匹配不上。 第四，轻量DOM查询可能越界，刚才提到过，这里再强调一下：如果你的选择器不够具体，可能会选中组件外面的一些元素，导致预期之外的行为。 第五，在Lightning Buttons组件下使用querySelectorAll可能会造成内存泄漏。这是历史遗留问题，如果你还在用旧版引擎LWC，要特别小心。最好的解决方式是迁移到Lightning Web Security，也就是LWS，或者改用refs引用来获取元素，避免直接查询。 最后给大家推荐一个学习资源：官方的lwc-recipes代码库里面有个miscDomQuery组件，它用实例演示了querySelectorAll的正确用法，大家可以拉下来跑一跑，看看效果。 好了，掌握这些，你就能安全高效地在LWC里和DOM打交道了。下节课我们会详细讲refs的使用，那是一个更好、更推荐的元素访问方式。