HTML DOM 属性学习笔记

什么是 HTML DOM 属性？

HTML DOM 属性是指 HTML 元素的属性，例如 id、class、style 等。这些属性可以通过 JavaScript 来操作和修改，从而改变网页的外观和行为。

如何获取元素的属性？

可以使用 JavaScript 的 getAttribute() 方法来获取元素的属性。例如，下面的代码会获取一个 id 为 "example" 的 div 元素的 class 属性：

javascriptCopy Code
var element = document.getElementById("example");
var className = element.getAttribute("class");

如何设置元素的属性？

可以使用 JavaScript 的 setAttribute() 方法来设置元素的属性。例如，下面的代码会将一个 id 为 "example" 的 div 元素的 class 属性设置为 "container"：

javascriptCopy Code
var element = document.getElementById("example");
element.setAttribute("class", "container");

实例演示

以下是一个实例，演示如何使用 JavaScript 获取和设置元素的属性。假设有一个包含按钮的 div 元素，我们可以使用 JavaScript 来获取按钮的 id 属性，并设置其 value 属性为 "Click me!"。

htmlCopy Code
<div id="myDiv">
  <button id="myButton">Button</button>
</div>

<script>
var button = document.getElementById("myButton");

// 获取按钮的 id 属性
var buttonId = button.getAttribute("id");
console.log("Button ID: " + buttonId);

// 设置按钮的 value 属性
button.setAttribute("value", "Click me!");
</script>

以上代码会在浏览器的开发者工具中输出按钮的 id 属性，并将按钮的文本内容设置为 "Click me!"。