本文链接：https://blog.csdn.net/weixin_70037637/article/details/137523341

前面我们已经学习了如何获取节点，以及节点通常所包含的属性，接下来我们来仔细研究元素Element
我们知道，一个元素除了有开始标签、结束标签、内容之外，还有很多的属性（attribute）,像Class这些就属于全局属性

在这里插入图片描述

浏览器在解析HTML元素时，会将对应的attribute也创建出来放到对应的元素对象上
- 比如id、class就是全局的attribute，会有对应的id、class属性
- 比如href属性是针对a元素的，type、value属性是针对input元素的

attribute的分类

属性attribute的分类：
- 标准的attribute：某些attribute属性是标准的，比如id、class、href、type、value等
- 非标准的attribute：某些attribute属性是自定义的，比如abc、age、height等

在这里插入图片描述

attribute的操作

对于所有的attribute访问都支持如下的方法：

elem.hasAttribute(name) — 检查特性是否存在

elem.hasAttribute(name)：假设有一个 <div> 元素，我们要检查其 class 属性是否存在

const div = document.querySelector('div');
if (div.hasAttribute('class')) {
  console.log('该元素具有 class 属性');
} else {
  console.log('该元素不具有 class 属性');
}

elem.getAttribute(name) — 获取这个特性值

elem.getAttribute(name)：假设有一个 <img> 元素，我们要获取其 src 属性的值

const img = document.querySelector('img');
const srcValue = img.getAttribute('src');
console.log(`该图片的地址为：${srcValue}`);

elem.setAttribute(name, value) — 设置这个特性值
- elem.setAttribute(name, value)：假设有一个 <input> 元素，我们要将其 value 属性的值设置为 hello world
```
const input = document.querySelector('input');
input.setAttribute('value', 'hello world');
console.log(`该输入框的值为：${input.value}`);
```
elem.removeAttribute(name) — 移除这个特性
- elem.removeAttribute(name)：假设有一个 <a> 元素，我们要移除其 href 属性
```
const a = document.querySelector('a');
a.removeAttribute('href');
console.log('已经移除了 href 属性');
```

attributes：attr对象的集合，具有name、value属性

attributes：假设有一个 <div> 元素，我们要获取其所有属性的名称和值

const div = document.querySelector('div');
const attrs = div.attributes;
for (let i = 0; i < attrs.length; i++) {
  console.log(`属性名：${attrs[i].name}，属性值：${attrs[i].value}`);
}

在这里插入图片描述

attribute具备以下特征：
- 它们的名字是大小写不敏感的（id 与 ID 相同）
- 它们的值总是字符串类型的，而这其实算一个缺陷。
  - 类型转换：当我们使用 DOM 操作修改某个属性的值时，需要将其转换为字符串类型，然后再赋值。这可能会导致一些类型转换的问题，例如当我们将一个数字类型的属性设置为字符串类型的值时，可能会丢失一些精度。而如果该属性本身就是一个字符串类型，我们在对其进行操作时也需要注意类型转换的问题。
  - 性能问题：由于属性和特性的值总是字符串类型，因此当我们需要对其进行一些数值计算时，需要先将其转换为数值类型，这可能会导致一些性能问题。在某些情况下，如果我们能直接使用数值类型的属性和特性，可能会更加高效。

元素的属性（property）

对于标准的attribute，会在DOM对象上创建与其对应的property属性：
1. 对于标准的 HTML 属性（例如 class、id、name 等），它们会在 DOM 元素对象上创建对应的 JavaScript 对象属性，这些 JavaScript 对象属性通常被称为 DOM 元素的 property 属性。这样，我们就可以使用 JavaScript 对象的属性访问方式来访问 DOM 元素的属性，例如 element.className 可以用于获取元素的 class 属性的值，element.id 可以用于获取元素的 id 属性的值，等等。
2. 这种特性使得我们可以像操作普通 JavaScript 对象一样来操作 DOM 元素，更加方便地对其进行修改和查询。但需要注意的是，并不是所有的 HTML 属性都会被映射为 DOM 元素的 property 属性，例如 data-* 属性和自定义属性就不会被自动映射。对于这些属性，我们可以使用 getAttribute() 和 setAttribute() 方法来操作它们。
3. 需要注意的是，DOM 元素的 property 属性和 attribute 属性的值并不总是相等的。当我们使用 element.propertyName 的方式来访问属性时，获取到的是该属性在元素对象上对应的 property 属性的值，而不是 attribute 属性的值。当我们修改了元素的 property 属性时，attribute 属性的值也会被相应地修改。但是，当我们修改了元素的 attribute 属性时，property 属性的值不会自动更新，需要手动进行同步。

举个例子来说明 DOM 元素的 property 属性和 attribute 属性的区别和联系：

<div id="myDiv" class="myClass" data-custom="customValue"></div>

我们可以使用以下代码来访问和修改元素的属性：

const div = document.getElementById('myDiv');

// 获取元素的 id 和 class 属性值，使用属性访问方式
console.log(div.id);    // 输出：myDiv
console.log(div.className);   // 输出：myClass

// 获取元素的自定义属性值，使用 getAttribute() 方法
console.log(div.getAttribute('data-custom'));   // 输出：customValue

// 修改元素的 id 和 class 属性值，使用属性赋值方式
div.id = 'newId';
div.className = 'newClass';

// 修改元素的自定义属性值，使用 setAttribute() 方法
div.setAttribute('data-custom', 'newValue');

在上述代码中，我们使用属性访问方式来获取和修改元素的 id 和 class 属性值，使用 getAttribute() 和 setAttribute() 方法来获取和修改元素的 data-custom 自定义属性的值。需要注意的是，当我们修改了元素的 id、class 和 data-custom 属性的值时，它们对应的 attribute 属性的值也会相应地修改。但是，当我们修改了 attribute 属性的值时，property 属性的值不会自动更新，需要手动进行同步。
例如，我们可以使用以下代码来手动同步元素的 id 和 class 属性的值：

// 同步元素的 id 和 class 属性值
div.id = div.getAttribute('id');
div.className = div.getAttribute('class');

这样，当我们修改了元素的 id 和 class 属性的值时，它们对应的 attribute 属性的值也会被相应地修改，并且我们手动同步后，property 属性的值也会更新。
在大多数情况下，它们是相互作用的
- 改变property，通过attribute获取的值，会随着改变
- 通过attribute操作修改，property的值会随着改变
除非特别情况，大多数情况下，设置、获取attribute，推荐使用property的方式：
- 这是因为它默认情况下是有类型的