在JavaScript中,document对象是代表当前HTML文档的关键对象。它提供了许多方法来操作和操控网页中的元素和内容。下面是document对象的十个最常用方法及其示例代码和输出:
- getElementById():根据元素的id属性获取对应的元素。
// HTML代码片段 //Hello, World!// 使用getElementById获取元素 const myDiv = document.getElementById("myDiv"); // 输出元素的文本内容 console.log(myDiv.innerText); // 输出: Hello, World!
- getElementsByTagName():根据标签名获取一组元素。
// 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
- getElementsByClassName():根据类名获取一组元素。
// 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
- querySelector():根据CSS选择器获取匹配的第一个元素。
// HTML代码片段 //Highlighted paragraph
// 使用querySelector获取元素 const paragraph = document.querySelector(".highlight"); // 输出元素的文本内容 console.log(paragraph.innerText); // 输出: Highlighted paragraph
- querySelectorAll():根据CSS选择器获取匹配的所有元素。
// HTML代码片段 //Paragraph 1
//Paragraph 2
// 使用querySelectorAll获取元素集合 const paragraphs = document.querySelectorAll(".highlight"); // 遍历元素集合并输出文本内容 paragraphs.forEach((p) => { console.log(p.innerText); }); // 输出: // Paragraph 1 // Paragraph 2
- createElement():创建一个新的HTML元素。
// 使用createElement创建新元素 const newDiv = document.createElement("div"); // 设置元素的文本内容和样式 newDiv.innerText = "New Div"; newDiv.style.color = "red"; // 将元素添加到文档中 document.body.appendChild(newDiv);
- removeChild():从文档中移除一个子元素。
// HTML代码片段 //
-
//
- Item 1 //
- Item 2 //
- Item 3 //
- innerHTML:获取或设置元素的HTML内容。
// HTML代码片段 //Original Content// 获取元素的HTML内容 const myDiv = document.getElementById("myDiv"); console.log(myDiv.innerHTML); // 输出: Original Content // 设置元素的HTML内容 myDiv.innerHTML = "New Content
";
- style:获取或设置元素的样式。
// HTML代码片段 //Styled Div//使用style设置元素的样式 const myDiv = document.getElementById("myDiv"); myDiv.style.color = "red"; myDiv.style.backgroundColor = "yellow";
- addEventListener():为元素添加事件监听器。
// HTML代码片段 // // 添加事件监听器 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方法允许我们为元素添加事件监听器。通过熟练掌握这些方法,开发者可以更加灵活地操作和控制网页的各个部分,实现丰富的交互和功能。
原文地址:https://mp.weixin.qq.com/s/v18qeDa_j-J5DxkhqvKD7A