为何使用setAttribute？setAttribute()函数的作用是什么？

嘿，这个问题问得很到位！咱们先唠唠为什么要用到setAttribute，再拆解它到底能帮咱们干些啥。

为什么要使用setAttribute？ #

• 统一属性操作逻辑：不管是HTML标准自带的属性（比如class、src），还是你自己定义的自定义属性（比如data-user-id），setAttribute都能一视同仁地处理。不像点语法，有些属性得用特殊的JS别名（比如class要写成className，for要写成htmlFor），用setAttribute直接写HTML里的属性名就行，省心多了。
• 完美兼容自定义/非标准属性：如果你需要给元素加一些自定义属性来存数据，直接用点语法可能不生效（老浏览器对dataset支持不好），但setAttribute完全没这个问题，比如element.setAttribute('data-order-id', '456')，轻松搞定。
• 同步DOM的实际属性值：有些元素的JS属性和HTML上的属性不是实时同步的，比如输入框的value，你用input.value = '新内容'只会改输入框的显示值，但HTML源码里的value属性不会变；而用input.setAttribute('value', '新内容')会直接更新DOM上的属性值，这在需要保留原始属性记录的场景下特别有用。

setAttribute()的具体功能 #

• 新增或覆盖属性：如果元素原本没有目标属性，调用它就会给元素新增这个属性；如果属性已经存在，就直接覆盖掉原来的值。举个例子：

  const img = document.querySelector('img');
  img.setAttribute('alt', '风景照片'); // 新增alt属性
  img.setAttribute('alt', '海边日落'); // 覆盖原有alt值
  

• 支持所有属性类型：不管是标准HTML属性（id、href、disabled），还是你自定义的任意属性，它都能处理，没有限制。
• 处理特殊属性名更直观：对于那些在JS里是关键字或者有别名的属性，比如label的for属性，不用记htmlFor这个别名，直接label.setAttribute('for', 'username-input')就行，完全贴合HTML的写法习惯。
• 正确处理布尔属性：对于disabled、checked这类布尔属性，只要用setAttribute设置了这个属性（哪怕值是空字符串），元素就会激活对应的状态。比如button.setAttribute('disabled', '')就能把按钮设为禁用状态，非常方便。

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