JavaScript dom相关操作

• 在JavaScript中，对DOM（文档对象模型）的操作是非常常见的。DOM是HTML和XML文档的编程接口，它提供了文档的结构化表示，并定义了一种方式，使得程序可以改变文档的结构、样式和内容。DOM将这些文档呈现为带有属性和方法的节点和对象的树状结构。

选择元素

• 通过ID选择元素

var element = document.getElementById("elementId");

• 通过类名选择元素

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

• 通过标签名选择元素

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

• 通过CSS选择器选择元素

var element = document.querySelector(".className"); // 返回第一个匹配的元素
var elements = document.querySelectorAll(".className"); // 返回所有匹配的元素

修改元素

• 更改文本内容

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

• 更改HTML内容

element.innerHTML = "<b>新的HTML内容</b>";

• 更改样式

element.style.color = "red";
element.style.backgroundColor = "#FFFF00";

• 设置或获取属性

element.setAttribute("href", "https://example.com");
var attributeValue = element.getAttribute("href");

操作类

• 添加类

element.classList.add("newClass");

• 移除类

element.classList.remove("existingClass");

• 切换类（如果存在则移除，不存在则添加）

element.classList.toggle("className");

创建和插入元素

• 创建新元素

var newElement = document.createElement("div");

• 插入元素

parentElement.appendChild(newElement); // 添加到父元素的子元素列表的末尾
parentElement.insertBefore(newElement, referenceElement); // 插入到参考元素之前

删除元素

• 删除元素

element.remove(); // 直接删除该元素
parentElement.removeChild(element); // 从父元素中删除该元素

事件处理

• 添加事件监听器

element.addEventListener("click", function() {
  console.log("元素被点击");
});

• 移除事件监听器

element.removeEventListener("click", listenerFunction);

遍历DOM

• 访问子元素

var children = element.children; // 返回子元素的集合

• 访问父元素

var parent = element.parentElement;

• 访问兄弟元素

var nextSibling = element.nextElementSibling;
var previousSibling = element.previousElementSibling;

这些操作是JavaScript中对DOM进行操作的基础。了解和熟悉这些基本操作对于进行Web前端开发是非常重要的。在现代前端框架（如React、Vue、Angular）出现之前，这些操作是日常Web开发的核心部分。即使在使用框架的情况下，理解这些概念也有助于更深入地理解前端开发。