JS基础DOM操作全解析：轻松玩转网页元素，特效随心定制
2023-10-03 23:52:55
前言：DOM 的意义
文档对象模型（DOM）是用于表示HTML和XML文档的编程接口。DOM将文档表示为树结构，使开发者能够通过编程方式访问和操作文档中的元素。它允许你在网页中修改和添加元素，从而实现复杂的用户交互和视觉效果。
获取元素：你手中的 DOM 选择器
1. getElementById()：精准定位单一元素
getElementById() 方法以一个元素ID作为参数，直接返回该元素对象。它是最快和最简单的方式来获取单个元素，特别适合于那些需要频繁访问的元素。
const element = document.getElementById("my-element");
2. querySelector() 和 querySelectorAll()：强大的 CSS 选择器
querySelector() 方法采用一个 CSS 选择器作为参数，返回文档中第一个匹配该选择器的元素。querySelectorAll() 则返回一个包含所有匹配元素的NodeList对象。它们可以灵活地用于获取各种元素。
const element = document.querySelector(".my-class");
const elements = document.querySelectorAll("p");
3. getElementsByTagName() 和 getElementsByClassName()：经典的元素查找方式
getElementsByTagName() 方法返回所有具有指定标签名的元素，而getElementsByClassName() 方法返回所有具有指定类名的元素。这些方法虽然不如 CSS 选择器灵活，但它们在某些情况下仍然非常有用。
const elements = document.getElementsByTagName("p");
const elements = document.getElementsByClassName("my-class");
操作元素内容：改写网页，随心所欲
1. innerHTML 和 innerText：全面控制元素内容
innerHTML 属性获取或设置元素的HTML内容，而innerText 属性获取或设置元素的文本内容。它们为开发者提供了全面控制元素内容的能力，无论是添加文本、插入 HTML 代码还是修改现有内容。
element.innerHTML = "<p>This is a new paragraph.</p>";
element.innerText = "This is a new text.";
2. value 和 src：表单元素和图像操作必备
value 属性获取或设置表单元素（如输入框、文本区等）的值。src 属性则获取或设置图像的源地址。它们是操作表单元素和图像的必备属性。
const input = document.querySelector("input");
input.value = "Hello, world!";
const image = document.querySelector("img");
image.src = "new-image.jpg";
3. appendChild() 和 insertBefore()：灵活添加和插入元素
appendChild() 方法将一个元素追加到另一个元素的子元素列表的末尾，insertBefore() 方法则将一个元素插入到另一个元素之前。它们提供了灵活的元素添加和插入方式，便于开发者构建复杂的网页布局。
const parent = document.querySelector(".parent");
const child = document.createElement("div");
parent.appendChild(child); // 在父元素末尾添加子元素
const referenceElement = document.querySelector(".reference");
parent.insertBefore(child, referenceElement); // 在父元素中插入子元素，并将子元素置于 referenceElement 之前
绑定事件：让元素动起来
1. addEventListener()：事件侦听，网页交互的关键
addEventListener() 方法为元素注册一个事件侦听器，当该事件发生时，它将执行指定的事件处理函数。这是在网页中实现交互和动态效果的必备方法。
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("Button clicked!");
});
2. removeEventListener()：注销事件侦听器，释放资源
removeEventListener() 方法从元素中移除一个事件侦听器，以便在不再需要时释放资源。它与 addEventListener() 方法相对应，有助于保持代码的整洁性和性能。
button.removeEventListener("click", () => {
alert("Button clicked!");
});
3. 事件对象：获取事件详细信息
事件对象包含有关所发生事件的详细信息，例如事件类型、触发事件的元素以及事件发生的时间。它为开发者提供了全面了解事件的途径，便于进行事件处理和数据收集。
button.addEventListener("click", (event) => {
console.log(event.type); // "click"
console.log(event.target); // HTMLButtonElement
console.log(event.timeStamp); // Timestamp
});
操作元素样式：为网页增添视觉魅力
1. style 属性：直接修改元素样式
style 属性允许开发者直接修改元素的CSS样式，无需使用额外的CSS文件。它可以动态地改变元素的外观，为网页增添视觉魅力。
element.style.color = "red";
element.style.backgroundColor = "blue";
element.style.fontSize = "20px";
2. classList 属性：轻松操作元素类名
classList 属性是一个只读属性，包含元素的所有类名。它提供了操作元素类名的便捷方式，例如添加、删除和切换类名，从而实现丰富的视觉效果。
element.classList.add("my-class");
element.classList.remove("my-class");
element.classList.toggle("my-class");
CSS 动画：让元素动起来
1. transition 属性：平滑过渡效果
transition 属性允许开发者在元素样式发生改变时添加平滑的过渡效果。它可以轻松实现元素的淡入淡出、滑动和旋转等效果。
element.style.transition = "all 0.5s ease-in-out";
2. animation 属性：复杂的动画效果
animation 属性允许开发者为元素定义复杂的动画效果，例如旋转、缩放和移动。它提供了丰富的动画控制选项，使网页元素的动态效果更加生动。
element.style.animation = "my-animation 2s infinite";
结语：DOM 操作的艺术
DOM 操作是 JavaScript 开发中的基础技能，它使开发者能够访问、操作和修改网页元素，实现丰富的用户交互和视觉效果。通过理解本文介绍的基本 DOM 操作技术，开发者可以轻松构建出美观、交互性强且动态的网页，为用户带来更好的体验。
