Javascript 角度2+；使用.getElementsByCassName（）返回空选择，尽管存在

我可能有一个相当简单的问题，但我找不到答案。我也搜索了以前的问题，但似乎不起作用

我的模板上有一个

div

中的大量文本，一些部分用

span

包装，这些部分具有类突出显示。现在我只想在按下按钮时将它们全部选中。我需要所有的跨度，以后再做一些事情

我试过：

const elm = (this.el as any).getElementsByClassName('.highlight');
console.log('elmens: ', elm);
for (let i = 0; i < elm.length; i++) {
  console.log('HTML ELM: ', elm[i]);
}

这两者都只返回一个空选择，尽管它们存在。我甚至在浏览器控制台上试过。我知道我可能会使用jQuery，但我不想将它用于如此简单的任务

也许你知道我做错了什么

我正在使用：

• 角度：7.0.0
• 角度cli:7.0.2
• 打字稿：3.1.3

---

可能您的子视图未初始化，您尝试在元素呈现到浏览器之前使用DOM。尝试使用角度挂钩，然后调用代码。像

ngAfterViewChecked() {

   ...
   const elm = (this.el as any).getElementsByClassName('.highlight');
   console.log('elmens: ', elm);
   for (let i = 0; i < elm.length; i++) {
     console.log('HTML ELM: ', elm[i]);
   }
   ...

}

ngAfterViewChecked（）{
...
const elm=（this.el与any.getElementsByClassName（'.highlight'）；
console.log（'elmens:'，elm）；
for（设i=0；i

我希望避免在angular框架中使用此技术，因为不建议以这种方式与DOM交互。他们有适当的选择。和DOM交互可能会带来性能影响，这是一种糟糕的做法

相反，您可以研究使用

@viewchildren

解决此问题。 文件

在您的例子中，

跨越了

<span #myNewId>text</span> 
<span #myNewId>text snippet 2</span> 

这将为您提供所有相同的功能，而无需直接与DOM交互

myspan

将是一个用

#myNewID

标记的跨距数组

这还应允许您访问与问题相关的元素，因为它们与类中的变量绑定。

我将使用：

const elements= (<HTMLCollection>document.getElementsByClassName('your_class_name_without_dot'));

console.log(elements)

const elements=（document.getElementsByClassName（'your_class_name_，不带点'）；
console.log（元素）

那么问题是，什么时候触发逻辑。在视图渲染之后或之前？“这些[span]具有class.highlight”-它们真的存在吗？他们不是更喜欢突出显示类

吗？前导点表示CSS类选择器，但getElementsByClassName与此无关。感谢您的回答。我改变了描述。我想我已经找到了正确的答案。如果你试图让元素尽早（不是在适当的钩子中）出现，它们还没有出现。您还可以检查其他钩子：您还可以检查
ngAfterViewInit（）
hook我确信我已经初始化了视图，因为这只在用户输入时发生。不过，我想我找到了答案。通常我也会这么做的。谢谢！但我有动态生成的内容。这就是我无法为其指定模板引用的原因。但是谢谢你花时间回答这个问题。欢迎你，我会阅读一下Angular和DOM。我认为您可以使用refs并在生成内容时应用#，只需在尝试与viewChildren交互之前检查viewChildren是否存在，但如果您的问题得到解决，则一切正常。非常感谢。我不知道我必须去掉这个点。。。。然而，它现在起作用了，尽管它似乎并没有找到所有的东西。
@ViewChildren('myNewId')public mySpans: ElementRef;

const elements= (<HTMLCollection>document.getElementsByClassName('your_class_name_without_dot'));

console.log(elements)