HTML DOM attributes 属性

什么是 HTML DOM attributes 属性

在 HTML 文档中，每个元素都可以有一系列属性，比如 id、class、src 等。这些属性可以通过 HTML DOM attributes 属性来访问和操作。通过 attributes 属性，我们可以获取元素的属性值，也可以设置新的属性值。

如何访问 HTML 元素的属性

要访问 HTML 元素的属性，我们可以使用 attributes 属性。以下是一个简单的示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<body>

<div id="myDiv" class="container"></div>

<script>
  var div = document.getElementById("myDiv");
  var id = div.attributes.id.value;
  var className = div.attributes.class.value;

  console.log("id:", id);
  console.log("class:", className);
</script>

</body>
</html>

在这个示例中，我们首先获取了 id 为 "myDiv" 的 div 元素，然后通过 attributes 属性访问了它的 id 和 class 属性的值。

如何设置 HTML 元素的属性

除了获取属性值，我们还可以使用 attributes 属性来设置属性值。以下是一个示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<body>

<div id="myDiv" class="container"></div>

<script>
  var div = document.getElementById("myDiv");
  div.setAttribute("style", "color: red;");

  console.log("style:", div.attributes.style.value);
</script>

</body>
</html>

在这个示例中，我们通过 setAttribute 方法给 div 元素设置了 style 属性，使文字颜色变为红色，并通过 attributes 属性获取了 style 属性的值。

总结

通过 HTML DOM attributes 属性，我们可以方便地访问和操作 HTML 元素的属性。无论是获取属性值还是设置属性值，attributes 属性都是一个非常有用的工具。希望本文能够帮助您更好地理解和应用 HTML DOM attributes 属性。