setAttribute

2023年07月18日

柏拉文

越努力，越幸运

一、认识

---

element.setAttribute() 设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。

二、语法

---

element.setAttribute(name, value);

三、场景

---

3.1 input

const input = document.querySelector("input");
input.setAttribute("name", "input");   // 设置成功
input.setAttribute("value", "input 框"); // 设置成功
input.setAttribute("class", "input-class"); // 设置成功
input.value = "input 框, 通过 .value 设置";   // 设置成功

3.2 textarea

const textarea = document.querySelector("textarea");
textarea.setAttribute("name", "textarea"); // 设置成功
textarea.setAttribute("value", "textarea 框"); // 无用设置
textarea.setAttribute("class", "textarea-class"); // 设置成功
textarea.value = "textarea 框, 通过 .value 设置";  // 设置成功

四、对比

---

4.1 attribute vs property

• 针对 class:

  • DOM property: .className

  • HTML Attribute: getAttribute('class')

• 针对input 的 value:

  • DOM property: .value 视图、值同时更新

  • HTML Attribute: 如果没有 property value , 则提供默认值, 值更新不影响视图的更新

• 针对textarea 的 type:

  • DOM property: .type 无法获取

  • HTML Attribute: getAttribute('type')

• 针对textarea 的 value:

  • DOM property: .value 无法获取

  • HTML Attribute: getAttribute('value') 无法获取