js中HTML DOM的常见操作场景

使用JS操作HTML DOM

使用JS操作HTML DOM是指使用JS对HTML文档进行操作，以实现特定的功能。在JS中，可以对HTML文档进行添加、删除、修改、查找等常见操作，从而实现页面的动态显示。

添加元素

使用JS可以添加新的HTML元素，比如添加按钮、文本框、文本域、列表等，以及其他HTML元素。使用JS添加元素的方法如下：

// 创建一个新的元素
var newElement = document.createElement("div");
// 为新元素添加属性
newElement.setAttribute("id", "myDiv");
// 将新元素添加到文档中
document.body.appendChild(newElement);

删除元素

使用JS可以删除已存在的HTML元素，比如按钮、文本框、文本域、列表等，以及其他HTML元素。使用JS删除元素的方法如下：

// 获取要删除的元素
var element = document.getElementById("myDiv");
// 从文档中删除该元素
element.parentNode.removeChild(element);

修改元素

使用JS可以修改已存在的HTML元素，比如按钮、文本框、文本域、列表等，以及其他HTML元素。使用JS修改元素的方法如下：

// 获取要修改的元素
var element = document.getElementById("myDiv");
// 修改元素的属性
element.setAttribute("class", "myClass");

查找元素

使用JS可以查找文档中的HTML元素，比如按钮、文本框、文本域、列表等，以及其他HTML元素。使用JS查找元素的方法如下：

// 根据ID查找元素
var element = document.getElementById("myDiv");
// 根据标签名查找元素
var elements = document.getElementsByTagName("div");
// 根据类名查找元素
var elements = document.getElementsByClassName("myClass");

事件处理

使用JS可以对HTML文档中的元素进行事件处理，比如鼠标单击、键盘输入等。使用JS处理事件的方法如下：

// 为元素添加事件处理函数
element.onclick = function(){
    // 处理单击事件
};

CSS操作

使用JS可以对HTML文档中的元素进行CSS操作，比如修改元素的颜色、大小、位置等。使用JS操作CSS的方法如下：

// 修改元素的颜色
element.style.color = "red";
// 修改元素的大小
element.style.width = "200px";
// 修改元素的位置
element.style.position = "absolute";