前端基础：document对象的十个常用方法

在JavaScript中，document对象是代表当前HTML文档的关键对象。它提供了许多方法来操作和操控网页中的元素和内容。下面是document对象的十个最常用方法及其示例代码和输出：

// HTML代码片段
// Hello, World!
 
// 使用getElementById获取元素
const myDiv = document.getElementById("myDiv");
 
// 输出元素的文本内容
console.log(myDiv.innerText); // 输出: Hello, World!

// HTML代码片段
// Paragraph 1
// Paragraph 2
 
// 使用getElementsByTagName获取元素集合
const paragraphs = document.getElementsByTagName("p");
 
// 遍历元素集合并输出文本内容
for (let i = 0; i < paragraphs.length; i++) {
 console.log(paragraphs[i].innerText);
}
// 输出:
// Paragraph 1
// Paragraph 2

// HTML代码片段
// Box 1
// Box 2
 
// 使用getElementsByClassName获取元素集合
const boxes = document.getElementsByClassName("box");
 
// 遍历元素集合并输出文本内容
for (let i = 0; i < boxes.length; i++) {
 console.log(boxes[i].innerText);
}
// 输出:
// Box 1
// Box 2

// HTML代码片段
// Highlighted paragraph
 
// 使用querySelector获取元素
const paragraph = document.querySelector(".highlight");
 
// 输出元素的文本内容
console.log(paragraph.innerText); // 输出: Highlighted paragraph

// HTML代码片段
// Paragraph 1
// Paragraph 2
 
// 使用querySelectorAll获取元素集合
const paragraphs = document.querySelectorAll(".highlight");
 
// 遍历元素集合并输出文本内容
paragraphs.forEach((p) => {
 console.log(p.innerText);
});
// 输出:
// Paragraph 1
// Paragraph 2

// 使用createElement创建新元素
const newDiv = document.createElement("div");
 
// 设置元素的文本内容和样式
newDiv.innerText = "New Div";
newDiv.style.color = "red";
 
// 将元素添加到文档中
document.body.appendChild(newDiv);

// HTML代码片段
// 
//   Item 1
//   Item 2
//   Item 3
// 
 
// 移除第一个li元素
const myList = document.getElementById("myList");
const firstItem = myList.querySelector("li:first-child");
myList.removeChild(firstItem);

// HTML代码片段
// Original Content
 
// 获取元素的HTML内容
const myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML); // 输出: Original Content
 
// 设置元素的HTML内容
myDiv.innerHTML = "New Content";

// HTML代码片段
// Styled Div
 
//使用style设置元素的样式
const myDiv = document.getElementById("myDiv");
myDiv.style.color = "red";
myDiv.style.backgroundColor = "yellow";

// HTML代码片段
// Click Me
 
// 添加事件监听器
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
 console.log("Button clicked!");
});

总结：

本文介绍了JavaScript中document对象的十个最常用方法，这些方法可以帮助开发者操作和操控网页中的元素和内容。通过getElementById、getElementsByTagName、getElementsByClassName等方法，我们可以根据id、标签名和类名获取元素。而querySelector和querySelectorAll方法则提供了更强大的CSS选择器功能。createElement和removeChild方法可以创建和移除元素，innerHTML和style属性可以获取和设置元素的内容和样式。最后，addEventListener方法允许我们为元素添加事件监听器。通过熟练掌握这些方法，开发者可以更加灵活地操作和控制网页的各个部分，实现丰富的交互和功能。