js 获取元素属性

// 获取元素属性的示例代码

// 假设我们有一个 HTML 元素如下：
// <div id="myDiv" class="example" data-info="some info"></div>

// 1. 使用 getAttribute 方法获取属性值
const element = document.getElementById('myDiv');
const className = element.getAttribute('class'); // 返回 "example"
const dataInfo = element.getAttribute('data-info'); // 返回 "some info"

console.log(`Class: ${className}`); // 输出 Class: example
console.log(`Data Info: ${dataInfo}`); // 输出 Data Info: some info

// 2. 直接访问属性（适用于常见属性）
const id = element.id; // 返回 "myDiv"
const classList = element.className; // 返回 "example"

console.log(`ID: ${id}`); // 输出 ID: myDiv
console.log(`Class List: ${classList}`); // 输出 Class List: example

解释说明：

1. getAttribute 方法：可以用来获取任何属性的值，包括自定义属性（如 data-* 属性）。它是一个通用的方法，适用于所有属性。

2. 直接访问属性：对于一些常见的属性（如 id、className），可以直接通过元素对象访问。这种方式更简洁，但仅限于标准属性。

如果需要获取或操作更多属性，建议使用 getAttribute 和 setAttribute 方法。