DOM 操作：修改元素内容与样式¶

// 示例 1: 修改元素内容
// 获取 id 为 "myElement" 的元素
const element = document.getElementById("myElement");

// 使用 innerHTML 修改元素内容
element.innerHTML = "<strong>Hello, World!</strong>";

// 解释：
// 1. document.getElementById("myElement") 获取页面中 id 为 "myElement" 的元素。
// 2. element.innerHTML = "<strong>Hello, World!</strong>" 将元素的内容替换为 "<strong>Hello, World!</strong>"。

// 示例 2: 修改元素文本内容
// 获取 id 为 "myElement" 的元素
const element = document.getElementById("myElement");

// 使用 textContent 修改元素文本内容
element.textContent = "Hello, World!";

// 解释：
// 1. document.getElementById("myElement") 获取页面中 id 为 "myElement" 的元素。
// 2. element.textContent = "Hello, World!" 将元素的文本内容替换为 "Hello, World!"。

// 示例 3: 修改元素文本内容（考虑 CSS 样式）
// 获取 id 为 "myElement" 的元素
const element = document.getElementById("myElement");

// 使用 innerText 修改元素文本内容
element.innerText = "Hello, World!";

// 解释：
// 1. document.getElementById("myElement") 获取页面中 id 为 "myElement" 的元素。
// 2. element.innerText = "Hello, World!" 将元素的文本内容替换为 "Hello, World!"，并且会考虑 CSS 样式。

// 示例 4: 修改元素样式
// 获取 id 为 "myElement" 的元素
const element = document.getElementById("myElement");

// 使用 style 属性修改元素样式
element.style.color = "blue";
element.style.backgroundColor = "yellow";
element.style.fontSize = "20px";

// 解释：
// 1. document.getElementById("myElement") 获取页面中 id 为 "myElement" 的元素。
// 2. element.style.color = "blue" 将元素的文本颜色设置为蓝色。
// 3. element.style.backgroundColor = "yellow" 将元素的背景颜色设置为黄色。
// 4. element.style.fontSize = "20px" 将元素的字体大小设置为 20 像素。

// 示例 5: 使用 classList 修改元素样式
// 获取 id 为 "myElement" 的元素
const element = document.getElementById("myElement");

// 添加一个 CSS 类
element.classList.add("highlight");

// 移除一个 CSS 类
element.classList.remove("inactive");

// 切换一个 CSS 类
element.classList.toggle("active");

// 解释：
// 1. document.getElementById("myElement") 获取页面中 id 为 "myElement" 的元素。
// 2. element.classList.add("highlight") 向元素添加 "highlight" 类。
// 3. element.classList.remove("inactive") 从元素中移除 "inactive" 类。
// 4. element.classList.toggle("active") 切换 "active" 类（如果存在则移除，如果不存在则添加）。

// 示例 6: 使用 setAttribute 修改元素样式
// 获取 id 为 "myElement" 的元素
const element = document.getElementById("myElement");

// 使用 setAttribute 设置 class 属性
element.setAttribute("class", "highlight");

// 使用 setAttribute 设置 style 属性
element.setAttribute("style", "color: red; font-size: 18px;");

// 解释：
// 1. document.getElementById("myElement") 获取页面中 id 为 "myElement" 的元素。
// 2. element.setAttribute("class", "highlight") 将元素的 class 属性设置为 "highlight"。
// 3. element.setAttribute("style", "color: red; font-size: 18px;") 将元素的 style 属性设置为 "color: red; font-size: 18px;"。