引言
在 Web 开发中，经常需要通过 JavaScript 操作 DOM 元素获取元素属性的值。Angular 是前端开发中广泛使用的一种框架，它提供了一些便捷的方法来获取 DOM 元素及其属性，下面将介绍一些常用的方法。
通过 ViewChild 获取 DOM 元素
在 Angular 中，通过 ViewChild 修饰符可以获取组件模板中的 DOM 元素，具体实现方式如下：
-- -------------------- ---- -------
------ - ---------- ---------- ---------- - ---- ----------------
------------
--------- -----------
--------- -
------- --------- ------------------------- -----------
--
--
------ ----- ------------ -
---------------------- ------- -----------
---------- ---- -
-------------------------------------------------
-
-上述代码中，我们创建了一个按钮 button，给它加了一个 "myButton" 的 # 标识符，这个标识符相当于给这个按钮起了一个名字。然后，我们通过 ViewChild 修饰符拿到了这个按钮元素的引用，并保存在 button 变量中，通过 nativeElement 属性即可获取原生 DOM 元素。
通过 Decorator 获取 DOM 属性
除了获取 DOM 元素之外，有时也需要获取 DOM 元素的属性，例如元素的宽度、高度等。在 Angular 中，通过 Decorator 可以获取 DOM 元素的属性，具体实现方式如下：
-- -------------------- ---- -------
------ - ---------- ------------ - ---- ----------------
------------
--------- -----------
--------- -
---- -------------------- - -----
---------------------- - ------
------
--
--
------ ----- ------------ -
------ ------ - --
------- ------ - --
------------------------------ ---
----------- ---- -
---------- - ------------------
----------- - -------------------
-
-上述代码中，我们创建了一个 div 元素，并使用了两个属性绑定语法，分别绑定了 width 和 height 属性。然后，我们通过 HostListener 注解监听窗口大小变化事件，获取窗口的宽度和高度，从而实现动态改变 div 元素的属性。
总结
通过 ViewChild 和 Decorator 这两种方式，我们可以轻松地获取 DOM 元素及其属性，而不必手动操作 DOM，从而提高开发效率。值得注意的是，获取 DOM 元素和属性要尽量避免直接操作 DOM，尽可能地利用 Angular 的语法糖进行操作，这样可以提高代码可读性，减少出错率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648edad048841e9894d43178