js document

// 获取 HTML 元素并操作其内容

// 1. 通过 id 获取元素
let elementById = document.getElementById('myElement');
elementById.innerHTML = '这是通过 ID 修改的内容'; // 修改元素的 HTML 内容

// 2. 通过 class 获取元素
let elementsByClass = document.getElementsByClassName('myClass');
for (let i = 0; i < elementsByClass.length; i++) {
    elementsByClass[i].innerHTML = '这是通过类名修改的内容'; // 修改所有具有该类名的元素的 HTML 内容
}

// 3. 通过标签名获取元素
let elementsByTagName = document.getElementsByTagName('p');
for (let i = 0; i < elementsByTagName.length; i++) {
    elementsByTagName[i].textContent = '这是通过标签名修改的内容'; // 修改所有 <p> 标签的文本内容
}

// 4. 使用 querySelector 和 querySelectorAll
let firstMatchingElement = document.querySelector('.myClass'); // 获取第一个匹配的元素
firstMatchingElement.style.color = 'red'; // 修改样式

let allMatchingElements = document.querySelectorAll('.myClass'); // 获取所有匹配的元素
allMatchingElements.forEach(element => {
    element.style.backgroundColor = 'yellow'; // 修改所有匹配元素的背景颜色
});

// 5. 创建新元素并添加到文档中
let newDiv = document.createElement('div'); // 创建一个新的 <div> 元素
newDiv.textContent = '这是一个新创建的 div 元素'; // 设置文本内容
document.body.appendChild(newDiv); // 将新元素添加到页面的 body 中

// 6. 移除元素
let elementToRemove = document.getElementById('elementToRemove');
if (elementToRemove) {
    elementToRemove.remove(); // 移除元素
}

解释说明：

• document.getElementById：通过元素的 ID 获取单个元素。
• document.getElementsByClassName：通过类名获取多个元素，返回的是一个 HTMLCollection。
• document.getElementsByTagName：通过标签名获取多个元素，返回的是一个 HTMLCollection。
• document.querySelector 和 document.querySelectorAll：使用 CSS 选择器来获取元素，前者返回第一个匹配的元素，后者返回所有匹配的元素。
• document.createElement：创建一个新的 HTML 元素。
• element.remove()：移除指定的元素。

这些方法和属性是 JavaScript 操作 DOM 的基础，能够帮助你动态地修改网页的内容和结构。