前端基礎：document對象的十個常用方法
作者：Hank Zheng
本文介紹了JavaScript中document對象的十個最常用方法，這些方法可以幫助開發(fā)者操作和操控網(wǎng)頁中的元素和內(nèi)容。通過getElementById、getElementsByTagName、getElementsByClassName等方法，我們可以根據(jù)id、標簽名和類名獲取元素。
在JavaScript中，document對象是代表當前HTML文檔的關(guān)鍵對象。它提供了許多方法來操作和操控網(wǎng)頁中的元素和內(nèi)容。下面是document對象的十個最常用方法及其示例代碼和輸出：
- getElementById()：根據(jù)元素的id屬性獲取對應的元素。
// HTML代碼片段
// <div id="myDiv">Hello, World!</div>
// 使用getElementById獲取元素
const myDiv = document.getElementById("myDiv");
// 輸出元素的文本內(nèi)容
console.log(myDiv.innerText); // 輸出: Hello, World!- getElementsByTagName()：根據(jù)標簽名獲取一組元素。
// HTML代碼片段
// <p>Paragraph 1</p>
// <p>Paragraph 2</p>
// 使用getElementsByTagName獲取元素集合
const paragraphs = document.getElementsByTagName("p");
// 遍歷元素集合并輸出文本內(nèi)容
for (let i = 0; i < paragraphs.length; i++) {
console.log(paragraphs[i].innerText);
}
// 輸出:
// Paragraph 1
// Paragraph 2- getElementsByClassName()：根據(jù)類名獲取一組元素。
// HTML代碼片段
// <div class="box">Box 1</div>
// <div class="box">Box 2</div>
// 使用getElementsByClassName獲取元素集合
const boxes = document.getElementsByClassName("box");
// 遍歷元素集合并輸出文本內(nèi)容
for (let i = 0; i < boxes.length; i++) {
console.log(boxes[i].innerText);
}
// 輸出:
// Box 1
// Box 2- querySelector()：根據(jù)CSS選擇器獲取匹配的第一個元素。
// HTML代碼片段
// <p class="highlight">Highlighted paragraph</p>
// 使用querySelector獲取元素
const paragraph = document.querySelector(".highlight");
// 輸出元素的文本內(nèi)容
console.log(paragraph.innerText); // 輸出: Highlighted paragraph- querySelectorAll()：根據(jù)CSS選擇器獲取匹配的所有元素。
// HTML代碼片段
// <p class="highlight">Paragraph 1</p>
// <p class="highlight">Paragraph 2</p>
// 使用querySelectorAll獲取元素集合
const paragraphs = document.querySelectorAll(".highlight");
// 遍歷元素集合并輸出文本內(nèi)容
paragraphs.forEach((p) => {
console.log(p.innerText);
});
// 輸出:
// Paragraph 1
// Paragraph 2- createElement()：創(chuàng)建一個新的HTML元素。
// 使用createElement創(chuàng)建新元素
const newDiv = document.createElement("div");
// 設置元素的文本內(nèi)容和樣式
newDiv.innerText = "New Div";
newDiv.style.color = "red";
// 將元素添加到文檔中
document.body.appendChild(newDiv);- removeChild()：從文檔中移除一個子元素。
// HTML代碼片段
// <ul id="myList">
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// </ul>
// 移除第一個li元素
const myList = document.getElementById("myList");
const firstItem = myList.querySelector("li:first-child");
myList.removeChild(firstItem);- innerHTML：獲取或設置元素的HTML內(nèi)容。
// HTML代碼片段
// <div id="myDiv">Original Content</div>
// 獲取元素的HTML內(nèi)容
const myDiv = document.getElementById("myDiv");
console.log(myDiv.innerHTML); // 輸出: Original Content
// 設置元素的HTML內(nèi)容
myDiv.innerHTML = "<p>New Content</p>";- style：獲取或設置元素的樣式。
// HTML代碼片段
// <div id="myDiv">Styled Div</div>
//使用style設置元素的樣式
const myDiv = document.getElementById("myDiv");
myDiv.style.color = "red";
myDiv.style.backgroundColor = "yellow";- addEventListener()：為元素添加事件監(jiān)聽器。
// HTML代碼片段
// <button id="myButton">Click Me</button>
// 添加事件監(jiān)聽器
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
console.log("Button clicked!");
});總結(jié)：
本文介紹了JavaScript中document對象的十個最常用方法，這些方法可以幫助開發(fā)者操作和操控網(wǎng)頁中的元素和內(nèi)容。通過getElementById、getElementsByTagName、getElementsByClassName等方法，我們可以根據(jù)id、標簽名和類名獲取元素。而querySelector和querySelectorAll方法則提供了更強大的CSS選擇器功能。createElement和removeChild方法可以創(chuàng)建和移除元素，innerHTML和style屬性可以獲取和設置元素的內(nèi)容和樣式。最后，addEventListener方法允許我們?yōu)樵靥砑邮录O(jiān)聽器。通過熟練掌握這些方法，開發(fā)者可以更加靈活地操作和控制網(wǎng)頁的各個部分，實現(xiàn)豐富的交互和功能。
責任編輯：武曉燕
來源：
科學隨想錄
