在JavaScript中，我们可以使用DOM（Document Object Model）API操作HTML元素。DOM是Web页面的基本编程接口，它将HTML文档表示为一个树形结构，开发人员可以通过JavaScript操作该树形结构中的各个节点来修改HTML页面。
1. 查找HTML元素
要想操作HTML元素，首先需要找到该元素对应的DOM节点。我们可以使用JavaScript中的document.querySelector()和document.querySelectorAll()方法来查找HTML元素。
1.1. document.querySelector()
document.querySelector()用于查找文档中第一个符合指定CSS选择器的元素，并返回该元素的引用。例如，要查找id为"myDiv"的元素，可以使用以下方式：
var myDiv = document.querySelector("#myDiv");
1.2. document.querySelectorAll()
document.querySelectorAll()用于查找文档中符合指定CSS选择器的所有元素，并返回这些元素的NodeList。例如，要查找所有class为"myClass"的元素，可以使用以下方式：
var myElems = document.querySelectorAll(".myClass");
for (var i = 0; i < myElems.length; i++) {
console.log(myElems[i]);
}
2. 操作HTML元素属性
我们可以使用DOM节点对象的属性来获取或设置HTML元素的各种属性。
2.1. 获取和设置元素的属性值
通过element.attribute来获取元素的属性值，并且通过element.attribute = value来设置元素的属性值。例如，要设置id为"myDiv"的元素的innerHTML属性值为"Hello World"，可以使用以下方式：
var myDiv = document.querySelector("#myDiv");
myDiv.innerHTML = "Hello World";
2.2. 添加与删除元素的className属性
通过element.classList.add(className)向元素添加一个类名，通过element.classList.remove(className)从元素中删除一个类名。例如，要将id为"myDiv"的元素添加class为"highlight"，可以使用以下方式：
var myDiv = document.querySelector("#myDiv");
myDiv.classList.add("highlight");
示例说明
示例1：操作表单元素
<!-- HTML代码 -->
<form>
<input type="text" id="myInput">
<button id="myButton">Click Me</button>
</form>
// JavaScript代码
var myInput = document.querySelector("#myInput");
var myButton = document.querySelector("#myButton");
myButton.addEventListener("click", function() {
console.log(myInput.value);
});
上面的代码演示了如何获取表单输入元素的值，并在点击按钮时将它打印到控制台上。
示例2：在网页中动态插入元素
<!-- HTML代码 -->
<div id="myContainer"></div>
// JavaScript代码
var myContainer = document.querySelector("#myContainer");
var myButton = document.createElement("button");
myButton.innerHTML = "Click Me";
myButton.addEventListener("click", function() {
var myText = document.createElement("p");
myText.innerHTML = "Hello World";
myContainer.appendChild(myText);
});
myContainer.appendChild(myButton);
上面的代码演示了如何通过JavaScript在网页中动态插入元素。在点击按钮时，会向页面中添加一个包含"Hello World"文本的段落元素。