在 HTML 文档中，每个元素都有一些属性，这些属性可以用来获取或设置元素的内容、样式、行为等。HTML DOM（文档对象模型）提供了访问和操作这些属性的方法，使得我们可以通过 JavaScript 来动态地修改页面上的内容。
获取属性值
要获取一个元素的属性值，可以使用 getAttribute() 方法。这个方法接受一个参数，即要获取的属性的名称，并返回该属性的值。例如，要获取一个 <div> 元素的 id 属性值，可以这样写：
var div = document.getElementById('myDiv');
var id = div.getAttribute('id');
console.log(id); // 输出 'myDiv'设置属性值
要设置一个元素的属性值，可以使用 setAttribute() 方法。这个方法接受两个参数，第一个参数是要设置的属性的名称，第二个参数是要设置的属性的值。例如，要设置一个 <img> 元素的 src 属性值，可以这样写：
var img = document.getElementById('myImg');
img.setAttribute('src', 'new.jpg');删除属性
要删除一个元素的属性，可以使用 removeAttribute() 方法。这个方法接受一个参数，即要删除的属性的名称。例如，要删除一个 <a> 元素的 href 属性，可以这样写：
var link = document.getElementById('myLink');
link.removeAttribute('href');常用属性
除了上面提到的 id、src、href 等属性之外，还有一些常用的属性，如 style、className、innerHTML 等。这些属性可以用来设置元素的样式、类名、内容等。例如，要设置一个 <p> 元素的文本内容和背景颜色，可以这样写：
var p = document.getElementById('myPara');
p.innerHTML = 'Hello, World!';
p.style.backgroundColor = 'lightblue';在实际开发中，熟练掌握这些属性的使用方法将会极大地提高我们操作 DOM 的效率和灵活性。接下来，我们将介绍如何通过 HTML DOM 事件来实现交互功能。