---

JavaScript HTML DOM 元素 (节点)

JavaScript HTML DOM 元素是指 HTML 文档中的标记或元素，这些标记或元素可以通过 JavaScript 来访问、操作和修改，从而实现对 DOM 文档的动态操作。

获取元素

获取元素是使用 JavaScript 操作 DOM 文档的第一步，常见的获取元素的方法有以下几种：

getElementById

使用 getElementById 方法可以通过元素的 id 属性获取元素，该方法使用起来非常简单，下面是一个示例：

let element = document.getElementById("idName");

getElementsByClassName

使用 getElementsByClassName 方法可以通过元素的 class 属性获取元素，该方法将返回一个包含指定 class 的所有元素的 NodeList 对象，下面是一个示例：

let elements = document.getElementsByClassName("className");

getElementsByTagName

使用 getElementsByTagName 方法可以通过元素的标记名获取元素，该方法将返回一个包含指定标记名的所有元素的 NodeList 对象，下面是一个示例：

let elements = document.getElementsByTagName("tagName");

querySelector

使用 querySelector 方法可以通过 CSS 选择器获取元素，该方法将返回匹配指定选择器的第一个元素，下面是一个示例：

let element = document.querySelector("selector");

querySelectorAll

使用 querySelectorAll 方法可以通过 CSS 选择器获取元素，该方法将返回匹配指定选择器的所有元素的 NodeList 对象，下面是一个示例：

let elements = document.querySelectorAll("selector");

操作元素

获取到元素之后，就可以对其进行操作，常见的操作有以下几种：

修改元素属性

可以通过 JavaScript 修改元素的属性，例如修改元素的文本内容、样式、属性等，下面是一些示例：

let element = document.getElementById("idName");

// 修改文本内容
element.textContent = "new text";

// 修改样式
element.style.color = "red";

// 修改属性
element.setAttribute("attrName", "attrValue");

添加、删除元素

可以通过 JavaScript 添加、删除元素，下面是一些示例：

// 添加元素
let newElement = document.createElement("tagName");
parent.appendChild(newElement);

// 删除元素
let element = document.getElementById("idName");
element.remove();

修改元素类名

可以通过 JavaScript 修改元素的类名，下面是一个示例：

let element = document.getElementById("idName");
element.classList.add("newClass");

事件

JavaScript 可以捕获 DOM 元素的事件并响应事件，常见的事件有以下几种：

click

当元素被点击时触发，下面是一个示例：

let element = document.getElementById("idName");
element.addEventListener("click", function() {
  alert("clicked");
});

mouseover

当鼠标移动到元素上时触发，下面是一个示例：

let element = document.getElementById("idName");
element.addEventListener("mouseover", function() {
  alert("mouse over");
});

submit

当表单被提交时触发，下面是一个示例：

let form = document.getElementById("formName");
form.addEventListener("submit", function() {
  alert("form submitted");
});

结论

JavaScript HTML DOM 元素 (节点)是实现动态操作 DOM 文档的重要工具，可以通过获取元素、操作元素、事件等方法实现对 DOM 文档的灵活操作，为 Web 应用程序的开发提供了强大的支持。