Javascript 在angularjs中使用$document.querySelectorAll

理想情况下，

$document

是

angular.element（window.document）

的包装器

---

$document.querySelectorAll（）

应该可以工作，但我收到一个错误，说它不是函数。有人能解释一下吗？

如果你想使用

$document

，你应该注入它（你可以用任何其他方式注入它）：

然后可以使用查询选择器（注意

[0]

）：

---

你应该能够使用

document.querySelectorAll(..)

---

省略

$

，因为您不需要jQueryLite，因为您只是在使用DOMAPI。否则，请使用jQuery lite方法

在angular中使用jqlite.find（）方法解决了这个问题

$document.find('tagName.className')

---

您必须使用

angular.element（document.querySelector（）.jqLiteMethods（））

比如说

angular.element(document.querySelector('#dis-caret-drop')).find('.caret').css({'opacity' : 0.4});

这将选择id为'dis-caret-drop'的元素，并搜索类为'caret'的子元素，并将子元素的不透明度更改为0.4
jqLite对象不获取包装对象必须获取的值QuerySelector所有工作您将需要使用
$document[0].querySelectorAll
我的意图从来都不是提供跨浏览器解决方案。这是为了解决为什么
querySelectorAll
在
$document
对象上是
未定义的
。仅供参考，最好不要给出这个建议，因为这不是AngularJS的最佳实践。在文档中：“在AngularJS中，我们总是通过$window服务引用它，因此它可能会被覆盖、删除或模拟以进行测试。”引用
文档时也是如此，因为它可能不会在模拟测试环境中定义。因此，这意味着应该通过
$window.document.querySelectorAll
或通过
$document[0].querySelectorAll
访问它。如果OP有兴趣使用
querySelectorAll
或来自DOM API的任何方法，则无需注入
$document
。它是全局可用的
文档
对象上的一种方法。这只是普通的javascript。注入
$document
然后从中提取
document
是不必要的步骤。我建议OP在注入
$document
时使用jQuery lite方法。否则，请坚持使用普通的旧
文档
。这一点很好。这也是一种选择。但是jqLite
find（）
仅通过标记名可用。为了按id或按类进行搜索，应该使用DOM API。是什么让您认为您只能按标记名进行查询。任何有效的CSS选择器都应该可以工作。您正在查看错误的文档。在jqLite（不是jQuery）上，使用
find（）
，只能使用标签进行搜索，请参阅文档：按设计，这不适用于“.className”。您可以在它的“tagName.className”上找到相应的注释，因此它仍然会搜索标记，文档中也有这样的说明。我已经在我的代码中使用了它，效果很好
$document.find('tagName.className')

angular.element(document.querySelector('#dis-caret-drop')).find('.caret').css({'opacity' : 0.4});