为何使用ViewChild无法访问原生元素的class属性，其他属性却可正常访问？

嘿，我一眼就看出问题所在啦——你用nativeElement.class去访问类属性，但JavaScript里class是保留关键字，DOM元素对象根本没有这个属性！这就是为啥你能正常拿到style、调用click，唯独class返回undefined的原因。

正确的访问方式 #

DOM API给我们提供了两个替代方案：

1. 用className获取完整类名字符串
   这是直接对应HTML中class属性的字符串形式，适合一次性获取所有类名：

console.log(this.myButton.nativeElement.className); // 会输出 "foo"

2. 用classList操作单个类（更推荐）
   classList是一个DOMTokenList对象，支持增、删、查、改单个类，比直接操作字符串灵活多了：

// 检查元素是否包含某个类
console.log(this.myButton.nativeElement.classList.contains('foo')); // 输出 true

// 获取第一个类名
console.log(this.myButton.nativeElement.classList[0]); // 输出 "foo"

// 还能动态添加/移除类
this.myButton.nativeElement.classList.add('new-class');
this.myButton.nativeElement.classList.remove('foo');

为啥style和click没问题？ #

因为style、click这些名字不是JavaScript的保留关键字，DOM元素对象直接提供了对应的接口：

• style对应元素的行内样式，是一个可以直接读写的CSSStyleDeclaration对象
• click是元素的内置点击方法，调用它就相当于手动点击了按钮

内容的提问来源于stack exchange，提问作者sql_dummy