VScode插件：前端每日一题

DOM常见操作有哪些？

在 JavaScript 中，对 DOM（Document Object Model）的操作是网页开发中最常见的任务之一。以下是一些常见的 DOM 操作：

1. 选择元素

通过不同方法找到页面中的元素：

• document.getElementById(id)：通过 id 获取元素。
• document.getElementsByClassName(className)：通过 class 获取元素，返回一个动态的 HTML 集合。
• document.getElementsByTagName(tagName)：通过标签名称获取元素，返回 HTML 集合。
• document.querySelector(selector)：使用 CSS 选择器获取第一个匹配的元素。
• document.querySelectorAll(selector)：使用 CSS 选择器获取所有匹配的元素，返回 NodeList。

const element = document.getElementById("myId");
const elements = document.querySelectorAll(".myClass");

2. 修改元素内容

修改元素的文本、HTML 或属性：

• element.textContent：设置或获取元素的纯文本内容。
• element.innerHTML：设置或获取元素的 HTML 内容。
• element.innerText：设置或获取元素的显示文本（浏览器处理不同）。
• element.setAttribute(attribute, value)：设置元素属性。
• element.getAttribute(attribute)：获取元素属性。

element.textContent = "New Text";
element.innerHTML = "<span>HTML Content</span>";
element.setAttribute("data-custom", "value");

3. 样式操作

• element.style.property：直接设置内联样式。
• element.className：设置或获取元素的 class。
• element.classList.add(class)：添加一个 class。
• element.classList.remove(class)：移除一个 class。
• element.classList.toggle(class)：切换 class。
• element.classList.contains(class)：检查元素是否具有某个 class。

element.style.color = "red";
element.classList.add("highlight");

4. 创建和插入元素

• document.createElement(tagName)：创建一个新元素。
• parentNode.appendChild(childNode)：将元素插入到父节点的最后。
• parentNode.insertBefore(newNode, referenceNode)：在参考节点之前插入新节点。
• parentNode.replaceChild(newNode, oldNode)：替换子节点。

const newElement = document.createElement("div");
newElement.textContent = "I'm new!";
document.body.appendChild(newElement);

5. 删除元素

• parentNode.removeChild(childNode)：从 DOM 中移除子元素。
• element.remove()：直接移除元素（在现代浏览器中支持）。

element.remove();  // 或
parentNode.removeChild(element);

6. 事件监听和处理

• element.addEventListener(event, handler)：为元素添加事件监听器。
• element.removeEventListener(event, handler)：移除事件监听器。

element.addEventListener("click", () => {
    console.log("Element clicked!");
});

7. 遍历 DOM

访问父级、子级和兄弟元素：

• element.parentNode：获取父节点。
• element.children：获取子元素集合。
• element.firstChild / element.firstElementChild：获取第一个子节点/元素。
• element.lastChild / element.lastElementChild：获取最后一个子节点/元素。
• element.previousSibling / element.previousElementSibling：获取上一个兄弟节点/元素。
• element.nextSibling / element.nextElementSibling：获取下一个兄弟节点/元素。

const parent = element.parentNode;
const firstChild = element.firstElementChild;

8. 表单操作

• input.value：获取或设置输入框的值。
• form.submit()：提交表单。
• form.reset()：重置表单。
• element.checked：获取或设置复选框/单选框的选中状态。

const input = document.querySelector("input[type='text']");
input.value = "New Value";

9. 获取元素的尺寸和位置

• element.offsetWidth / element.offsetHeight：获取元素的宽/高（包括 padding 和 border）。
• element.clientWidth / element.clientHeight：获取元素的宽/高（包括 padding，不包括 border）。
• element.scrollWidth / element.scrollHeight：获取元素内容的总宽/高（包括滚动的内容）。
• element.getBoundingClientRect()：获取元素的位置信息（相对于视口）。

const rect = element.getBoundingClientRect();
console.log(rect.top, rect.left);

10. 控制滚动

• element.scrollTop：获取或设置元素的滚动条位置（垂直）。
• element.scrollLeft：获取或设置元素的滚动条位置（水平）。
• element.scrollIntoView()：滚动到该元素的位置。

element.scrollTop = 100;
element.scrollIntoView({ behavior: "smooth" });

掌握这些常见的 DOM 操作可以帮助你在网页中创建动态、交互性强的用户体验。