在JavaScript中，document對象是代表當前HTML文檔的關鍵對象。它提供了許多方法來操作和操控網頁中的元素和內容。下面是document對象的十個最常用方法及其示例代碼和輸出：FNI28資訊網——每日最新資訊28at.com

1. getElementById()：根據元素的id屬性獲取對應的元素。

// HTML代碼片段// <div id="myDiv">Hello, World!</div>// 使用getElementById獲取元素const myDiv = document.getElementById("myDiv");// 輸出元素的文本內容console.log(myDiv.innerText); // 輸出: Hello, World!

2. getElementsByTagName()：根據標簽名獲取一組元素。

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

3. getElementsByClassName()：根據類名獲取一組元素。

// HTML代碼片段// <div class="box">Box 1</div>// <div class="box">Box 2</div>// 使用getElementsByClassName獲取元素集合const boxes = document.getElementsByClassName("box");// 遍歷元素集合并輸出文本內容for (let i = 0; i < boxes.length; i++) { console.log(boxes[i].innerText);}// 輸出:// Box 1// Box 2

4. querySelector()：根據CSS選擇器獲取匹配的第一個元素。

// HTML代碼片段// <p class="highlight">Highlighted paragraph</p>// 使用querySelector獲取元素const paragraph = document.querySelector(".highlight");// 輸出元素的文本內容console.log(paragraph.innerText); // 輸出: Highlighted paragraph

5. querySelectorAll()：根據CSS選擇器獲取匹配的所有元素。

// HTML代碼片段// <p class="highlight">Paragraph 1</p>// <p class="highlight">Paragraph 2</p>// 使用querySelectorAll獲取元素集合const paragraphs = document.querySelectorAll(".highlight");// 遍歷元素集合并輸出文本內容paragraphs.forEach((p) => { console.log(p.innerText);});// 輸出:// Paragraph 1// Paragraph 2

6. createElement()：創建一個新的HTML元素。

// 使用createElement創建新元素const newDiv = document.createElement("div");// 設置元素的文本內容和樣式newDiv.innerText = "New Div";newDiv.style.color = "red";// 將元素添加到文檔中document.body.appendChild(newDiv);

7. 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);

8. innerHTML：獲取或設置元素的HTML內容。

// HTML代碼片段// <div id="myDiv">Original Content</div>// 獲取元素的HTML內容const myDiv = document.getElementById("myDiv");console.log(myDiv.innerHTML); // 輸出: Original Content// 設置元素的HTML內容myDiv.innerHTML = "<p>New Content</p>";

9. style：獲取或設置元素的樣式。

// HTML代碼片段// <div id="myDiv">Styled Div</div>//使用style設置元素的樣式const myDiv = document.getElementById("myDiv");myDiv.style.color = "red";myDiv.style.backgroundColor = "yellow";

10. addEventListener()：為元素添加事件監聽器。

// HTML代碼片段// <button id="myButton">Click Me</button>// 添加事件監聽器const myButton = document.getElementById("myButton");myButton.addEventListener("click", function() { console.log("Button clicked!");});

總結：FNI28資訊網——每日最新資訊28at.com

本文介紹了JavaScript中document對象的十個最常用方法，這些方法可以幫助開發者操作和操控網頁中的元素和內容。通過getElementById、getElementsByTagName、getElementsByClassName等方法，我們可以根據id、標簽名和類名獲取元素。而querySelector和querySelectorAll方法則提供了更強大的CSS選擇器功能。createElement和removeChild方法可以創建和移除元素，innerHTML和style屬性可以獲取和設置元素的內容和樣式。最后，addEventListener方法允許我們為元素添加事件監聽器。通過熟練掌握這些方法，開發者可以更加靈活地操作和控制網頁的各個部分，實現豐富的交互和功能。FNI28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-39541-0.html前端基礎：document對象的十個常用方法

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Nacos神秘面紗揭曉：微服務時代的配置之王

下一篇： 深度解讀 JS 構造函數、原型、類與繼承