JS操作HTML自定义属性的方法

这篇文章将带你领略如何使用JavaScript操作HTML自定义属性，让你的网页开发更加灵活多变。

假设我们有一个HTML元素，比如一个文本输入框，其中的`displayName`是一个自定义属性。HTML代码如下：

```html

```

如何获取自定义属性的值呢？我们可以使用JavaScript的`getAttribute`方法。例如：

```javascript

document.getElementById("txtBox").getAttribute("displayName");

```

另一种获取属性的方式是直接通过元素的`attributes`属性：

```javascript

document.getElementById("txtInput").attributes["displayName"].nodeValue;

```

这就像是直接与元素的属性进行对话，轻松获取你想要的信息。

接下来，我们看看如何设置自定义属性的值。假设我们想改变上面文本输入框的`displayName`属性值为"新的显示名称"，可以使用`setAttribute`方法：

```javascript

document.getElementById("txtBox").setAttribute("displayName", "新的显示名称");

```

或者直接修改`attributes`属性的值：

```javascript

document.getElementById("txtInput").attributes["displayName"].nodeValue = "新的显示名称";

```

这样，我们就成功地设置了自定义属性的值。这些操作对于JavaScript程序设计来说非常实用，无论是在创建交互式网页还是在构建复杂应用时，都能派上用场。

掌握JavaScript操作HTML自定义属性的方法，就像掌握了一把打开网页开发新世界的钥匙。无论是获取还是设置属性值，都能轻松应对，让你的网页更加丰富多彩。希望这篇文章能对你的JavaScript学习之路有所帮助。记得在实际开发中多加练习，融会贯通哦！