在JavaScript中，document對(duì)象是代表當(dāng)前HTML文檔的關(guān)鍵對(duì)象。它提供了許多方法來(lái)操作和操控網(wǎng)頁(yè)中的元素和內(nèi)容。下面是document對(duì)象的十個(gè)最常用方法及其示例代碼和輸出：jeP28資訊網(wǎng)——每日最新資訊28at.com

1. getElementById()：根據(jù)元素的id屬性獲取對(duì)應(yīng)的元素。

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

2. getElementsByTagName()：根據(jù)標(biāo)簽名獲取一組元素。

// 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

3. 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

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

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

5. 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

6. createElement()：創(chuàng)建一個(gè)新的HTML元素。

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

7. removeChild()：從文檔中移除一個(gè)子元素。

// HTML代碼片段// <ul id="myList">//   <li>Item 1</li>//   <li>Item 2</li>//   <li>Item 3</li>// </ul>// 移除第一個(gè)li元素const myList = document.getElementById("myList");const firstItem = myList.querySelector("li:first-child");myList.removeChild(firstItem);

8. innerHTML：獲取或設(shè)置元素的HTML內(nèi)容。

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

9. style：獲取或設(shè)置元素的樣式。

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

10. addEventListener()：為元素添加事件監(jiān)聽(tīng)器。

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

總結(jié)：jeP28資訊網(wǎng)——每日最新資訊28at.com

本文介紹了JavaScript中document對(duì)象的十個(gè)最常用方法，這些方法可以幫助開(kāi)發(fā)者操作和操控網(wǎng)頁(yè)中的元素和內(nèi)容。通過(guò)getElementById、getElementsByTagName、getElementsByClassName等方法，我們可以根據(jù)id、標(biāo)簽名和類名獲取元素。而querySelector和querySelectorAll方法則提供了更強(qiáng)大的CSS選擇器功能。createElement和removeChild方法可以創(chuàng)建和移除元素，innerHTML和style屬性可以獲取和設(shè)置元素的內(nèi)容和樣式。最后，addEventListener方法允許我們?yōu)樵靥砑邮录O(jiān)聽(tīng)器。通過(guò)熟練掌握這些方法，開(kāi)發(fā)者可以更加靈活地操作和控制網(wǎng)頁(yè)的各個(gè)部分，實(shí)現(xiàn)豐富的交互和功能。jeP28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-39541-0.html前端基礎(chǔ)：document對(duì)象的十個(gè)常用方法

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： Nacos神秘面紗揭曉：微服務(wù)時(shí)代的配置之王

下一篇： 深度解讀 JS 構(gòu)造函數(shù)、原型、類與繼承