在前端开发中，我们经常需要使用JavaScript来操作DOM元素。其中一个常见的需求就是向HTML元素添加或更新属性，比如修改标签的class属性、添加自定义属性等。本文将详细介绍如何使用JavaScript来实现这些操作。
获取元素对象
首先，我们需要获取到要操作的HTML元素的对象。可以使用以下方法：
通过ID获取元素
const element = document.getElementById("element-id");其中，element-id为要获取的元素的ID值。
通过class名称获取元素
const elements = document.getElementsByClassName("element-class");其中，element-class为要获取的元素的class名称。如果有多个同名元素，则返回一个元素数组。
通过标签名称获取元素
const elements = document.getElementsByTagName("element-tag");其中，element-tag为要获取的元素的标签名称。如果有多个同名元素，则返回一个元素数组。
通过CSS选择器获取元素
const elements = document.querySelector("selector");或者
const elements = document.querySelectorAll("selector");其中，selector为要获取的元素的CSS选择器。querySelector返回符合条件的第一个元素，而querySelectorAll返回所有符合条件的元素数组。
添加/更新属性
获取到元素对象后，就可以对其进行属性的添加和更新操作了。以下是常用的几种操作方式：
修改元素的class属性
element.className = "new-class";
其中，new-class为要设置的新的class名称。也可以使用下面的方式来添加class：
element.classList.add("new-class");修改元素的自定义属性
element.setAttribute("attribute-name", "attribute-value");其中，attribute-name为要添加/更新的属性名，attribute-value为对应的属性值。
获取元素的属性值
const attributeValue = element.getAttribute("attribute-name");其中，attribute-name为要获取的属性名。
移除元素的自定义属性
element.removeAttribute("attribute-name");其中，attribute-name为要移除的属性名。
示例代码
以下是一个完整的示例代码，演示了如何通过JavaScript向HTML元素添加/更新属性：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------- ------------------
-------
------
--- --------------- ------------------------ -----------
--------
----- --------- - --------------------------------------
-- ---------
------------------- - ------------
-- -------
----------------------------------- -----------
-- -----
----- -------- - ------------------------------------
----------------------
-- -------
---------------------------------------
---------
-------
-------当运行该示例代码时，会将my-heading元素的class属性修改为new-class，并添加了一个名为data-name，值为my-data的自定义属性。然后获取了该属性的值，并将该属性移除。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10759
