📅 最后修改于: 2023-12-03 14:48:16.398000 🧑 作者: Mango
Vanilla JS 是指使用纯 JavaScript（即没有使用任何外部库或框架）来开发网页应用程序的方法。在这篇文章中，我们将讨论如何使用 Vanilla JS 为每个元素添加属性。
要为元素添加属性，可以使用 JavaScript 的 setAttribute() 方法。此方法接受两个参数：属性名和属性值。
// 获取所有需要添加属性的元素
const elements = document.querySelectorAll('.some-class');
// 遍历元素列表，为每个元素添加属性
elements.forEach(element => {
element.setAttribute('attribute-name', 'attribute-value');
});
在代码片段中，首先通过 document.querySelectorAll() 方法选择所有需要添加属性的元素。然后使用 forEach() 方法遍历元素列表，并为每个元素调用 setAttribute() 方法，将属性名和属性值作为参数传递进去。
假设我们有一个 HTML 页面，其中有一些按钮元素，我们希望为每个按钮添加一个 data-index 属性，属性值为按钮在列表中的索引。
<!DOCTYPE html>
<html>
<head>
<title>Vanilla JS 添加属性示例</title>
</head>
<body>
<button class="button">按钮 1</button>
<button class="button">按钮 2</button>
<button class="button">按钮 3</button>
<script>
// 获取所有按钮元素
const buttons = document.querySelectorAll('.button');
// 遍历按钮元素，为每个按钮添加 data-index 属性
buttons.forEach((button, index) => {
button.setAttribute('data-index', index + 1);
});
</script>
</body>
</html>
在上面的示例中，我们首先使用 document.querySelectorAll('.button') 获取到所有按钮元素。然后使用 forEach() 方法遍历按钮列表，并为每个按钮调用 setAttribute() 方法，将 data-index 属性添加到按钮中。属性值为索引值加一，以便从 1 开始计数。
在实际应用中，您可以根据需要修改属性名和属性值。通过使用 Vanilla JS，您可以轻松地为每个元素添加属性，而无需依赖外部库或框架。
希望这篇介绍对您有帮助！使用 Vanilla JS，您可以更好地理解 JavaScript，并灵活地操作网页中的元素。Happy coding！