如何在 JavaScript 中使用 DOM 元素获取更改 HTML？

在 JavaScript 中，可以使用 DOM（文档对象模型）获取和更改 HTML 元素。DOM 在 Web 开发中是至关重要的，它允许 JavaScript 访问页面的元素、属性和样式，并在需要时对其进行修改。

获取 HTML 元素

要获取 HTML 元素，可以使用 document.getElementById() 方法来根据元素的 ID 属性获取单个元素。

const element = document.getElementById('myElement');

还可以使用 document.getElementsByClassName() 或 document.getElementsByTagName() 方法来获取多个元素。

const elements = document.getElementsByClassName('myClass');
const elements = document.getElementsByTagName('div');

更改 HTML 元素

要更改 HTML 元素，可以使用 DOM 属性和方法。以下是一些常用的属性和方法：

• innerHTML：设置或获取元素的 HTML 内容。

element.innerHTML = '新的 HTML 内容';

• textContent：设置或获取元素的纯文本内容。

element.textContent = '新的文本内容';

• style：设置或获取元素的样式属性。

element.style.color = 'red';

• className：设置或获取元素的 class 属性。

element.className = 'newClass';

• setAttribute()：设置元素的属性。

element.setAttribute('data-id', '123');

• getAttribute()：获取元素的属性。

const id = element.getAttribute('data-id');

总结

使用 DOM 元素获取和改变 HTML 元素是 JavaScript 开发中的基本操作之一。掌握这些方法，可以使 JavaScript 更加灵活和功能强大。