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

在JavaScript中，document对象是代表当前HTML文档的关键对象。它提供了许多方法来操作和操控网页中的元素和内容。下面是document对象的十个最常用方法及其示例代码和输出：oOw28资讯网——每日最新资讯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!");});

总结：oOw28资讯网——每日最新资讯28at.com

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

本文链接：http://www.28at.com/showinfo-26-39541-0.html前端基础：document对象的十个常用方法

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Nacos神秘面纱揭晓：微服务时代的配置之王

下一篇： 深度解读 JS 构造函数、原型、类与继承