如何通过类、id、选择器和属性获取 DOM 元素

Posted 2023-03-06

【中文标题】如何通过类、id、选择器和属性获取 DOM 元素

【英文标题】：How to get DOM elements by class, id, selectors and properties

【发布时间】：2017-04-07 03:49:25

【问题描述】：

如何按类、id、选择器 (div > .my-i) 和 jQuery 中的属性获取 DOM 元素？

例如：

<div class="myClass" style="width:200px">
<span id="pop">test</span>
<div>
  <i>aaa</i>
  <i class="my-i">bbb</i>
  <i class="my-i">ccc</i>
</div>

我需要得到：

按类取值 200px 按 id 显示文本“测试” 全部来自 class="my-i"

最好的方法是什么？

【问题讨论】：

@jonrsharpe，没关系，需要获取那些数据并传输到DB：200px，'test'并通过class="my-i"解析这些html对象

为什么需要它们？这似乎是使用 Angular 的完全错误的方式。您能否提供一些背景信息来避免 XY 问题？ xyproblem.info

@xyproblem.info，我在上面输入了

“这不可能吗？” 没有提供更多上下文。

【参考方案1】：

constructor(private elRef:ElementRef) 

ngAfterViewInit() 
  this.elRef.nativeElement.querySelector('.myClass');

这不适用于 Web Workers 或 Universal，但 Angular2 本身不提供与平台无关的元素来查询元素。

另见angular 2 / typescript : get hold of an element in the template

【讨论】：

@ViewChild() 不支持 CSS 选择器，仅支持模板变量名称或指令/组件类型。

有人知道如何按照 OP 的要求通过 CSS 选择器获取 DOM 元素吗？如上所述，@ViewChild 和 element.nativeElement 不适用于这种情况。

@atconway 有什么问题。我的代码展示了如何使用 CSS 选择器。 “这种情况”是什么意思？ Angular 本身不提供任何东西。如果你想使用 CSS 选择器，你必须使用 ´nativeElement` 或 window。