DOM HTML

什么是 DOM HTML？

DOM（文档对象模型）是一种用于表示和操作 HTML 和 XML 文档的标准编程接口。在 web 开发中，DOM 是非常重要的，因为它允许我们通过 JavaScript 来动态地操作网页的内容和结构。

获取元素

要操作 HTML 元素，首先需要获取对应的 DOM 元素。可以使用 document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName() 等方法来获取元素。

示例代码：

// 通过 ID 获取元素
const elementById = document.getElementById('myElement');

// 通过类名获取元素
const elementsByClassName = document.getElementsByClassName('myClass');

// 通过标签名获取元素
const elementsByTagName = document.getElementsByTagName('div');

操作元素

一旦获取了元素，就可以对其进行各种操作，比如修改元素的内容、样式、属性等。

示例代码：

// 修改元素的文本内容
elementById.textContent = 'Hello, World!';

// 修改元素的样式
elementById.style.color = 'red';

// 修改元素的属性
elementById.setAttribute('data-id', '123');

创建元素

除了操作已有的元素，还可以通过 JavaScript 动态地创建新的元素。

示例代码：

// 创建新的 div 元素
const newDiv = document.createElement('div');

// 设置新元素的属性
newDiv.setAttribute('class', 'newClass');

// 将新元素添加到文档中
document.body.appendChild(newDiv);

事件处理

DOM HTML 还允许我们通过事件处理来响应用户的操作，比如点击、鼠标移动等。

示例代码：

// 添加点击事件处理
elementById.addEventListener('click', () => {
  alert('Element clicked!');
});

通过以上内容，希望你能对 DOM HTML 有更深入的了解，继续学习更多关于 JavaScript 的知识，加油！