JS操作DOM

在JavaScript中，操作DOM（文档对象模型）的方法非常丰富，以下是一些常用的DOM操作方法，按类别进行分类：

一、获取元素

1. 通过ID获取元素
   • 方法：document.getElementById(id)
   • 用途：根据元素的id属性值获取一个元素。
   • 示例：

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

2. 通过类名获取元素
   • 方法：document.getElementsByClassName(className)
   • 用途：根据元素的class属性值获取一个HTMLCollection对象，包含所有匹配的元素。
   • 示例：

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

3. 通过标签名获取元素
   • 方法：document.getElementsByTagName(tagName)
   • 用途：根据标签名获取一个HTMLCollection对象，包含所有匹配的元素。
   • 示例：

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

4. 通过CSS选择器获取单个元素
   • 方法：document.querySelector(selector)
   • 用途：根据CSS选择器获取第一个匹配的元素。
   • 示例：

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

5. 通过CSS选择器获取所有匹配的元素
   • 方法：document.querySelectorAll(selector)
   • 用途：根据CSS选择器获取一个NodeList对象，包含所有匹配的元素。
   • 示例：

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

二、修改元素内容

1. 修改文本内容
   • 属性：innerText 或 textContent
   • 用途：设置或获取元素的文本内容。
   • 示例：

     let element = document.getElementById("myElement");
     element.innerText = "新的文本内容";
     

2. 修改HTML内容
   • 属性：innerHTML
   • 用途：设置或获取元素的HTML内容。
   • 示例：

     let element = document.getElementById("myElement");
     element.innerHTML = "<p>新的HTML内容</p>";
     

三、修改元素样式

1. 直接修改样式
   • 属性：style
   • 用途：通过style对象修改元素的CSS样式。
   • 示例：

     let element = document.getElementById("myElement");
     element.style.color = "red";
     element.style.fontSize = "20px";
     

2. 添加/移除/切换类名
   • 方法：classList.add(), classList.remove(), classList.toggle()
   • 用途：动态添加、移除或切换元素的类名。
   • 示例：

     let element = document.getElementById("myElement");
     element.classList.add("newClass");
     element.classList.remove("oldClass");
     element.classList.toggle("active");
     

四、创建和插入元素

1. 创建元素
   • 方法：document.createElement(tagName)
   • 用途：创建一个新的元素。
   • 示例：

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

2. 插入元素
   • 方法：appendChild(), insertBefore()
   • 用途：
     • appendChild()：将一个元素添加到父元素的末尾。
     • insertBefore()：将一个元素插入到指定位置。
   • 示例：

     let parentElement = document.getElementById("parent");
     let newElement = document.createElement("p");
     newElement.innerText = "新元素";
     parentElement.appendChild(newElement);
     
     // 插入到指定位置
     let referenceElement = parentElement.children[0];
     parentElement.insertBefore(newElement, referenceElement);
     

五、删除元素

1. 删除元素
   • 方法：removeChild()
   • 用途：从父元素中删除一个子元素。
   • 示例：

     let parentElement = document.getElementById("parent");
     let childElement = document.getElementById("child");
     parentElement.removeChild(childElement);
     

六、遍历DOM

1. 访问父元素
   • 属性：parentNode 或 parentElement
   • 用途：获取元素的父元素。
   • 示例：

     let element = document.getElementById("myElement");
     let parent = element.parentNode;
     

2. 访问子元素
   • 属性：children
   • 用途：获取元素的所有子元素。
   • 示例：

     let parentElement = document.getElementById("parent");
     let children = parentElement.children;
     

3. 访问兄弟元素
   • 属性：nextSibling/nextElementSibling 和 previousSibling/previousElementSibling
   • 用途：获取元素的下一个或上一个兄弟元素。
   • 示例：

     let element = document.getElementById("myElement");
     let nextElement = element.nextElementSibling;
     let previousElement = element.previousElementSibling;