js中常用的Document Object Model (DOM) API在JavaScript中，Document O

在JavaScript中，Document Object Model (DOM) API是用于操作网页结构和内容的重要工具。它提供了一组方法和属性，使开发人员能够通过JavaScript动态地访问和修改HTML文档的各个元素。本文将详细介绍一些常用的DOM API，并提供相应的代码示例，帮助读者更好地理解和应用这些API。

getElementById(id) 通过元素的id属性获取DOM中的单个元素。

// HTML: <div id="myDiv">Hello, World!</div>
var element = document.getElementById("myDiv");
console.log(element.innerHTML); // 输出: Hello, World!

getElementsByClassName(className) 通过元素的class属性获取DOM中一组元素。

// HTML: <p class="highlight">This is a paragraph.</p>
var elements = document.getElementsByClassName("highlight");
for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent); // 输出: This is a paragraph.
}

getElementsByTagName(tagName) 通过元素的标签名获取DOM中一组元素。

// HTML: <ul><li>Item 1</li><li>Item 2</li></ul>
var elements = document.getElementsByTagName("li");
for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent); // 输出: Item 1, Item 2
}

querySelector(selector) 通过CSS选择器选择DOM中的单个元素。

// HTML: <div class="container"><p>Hello, World!</p></div>
var element = document.querySelector(".container p");
console.log(element.textContent); // 输出: Hello, World!

querySelectorAll(selector) 通过CSS选择器选择DOM中的一组元素。

// HTML: <ul>
//          <li class="item">Item 1</li>
//          <li class="item">Item 2</li>
//       </ul>
var elements = document.querySelectorAll(".item");
for (var i = 0; i < elements.length; i++) {
  console.log(elements[i].textContent); // 输出: Item 1, Item 2
}

innerHTML 获取或设置元素的HTML内容。

// HTML: <div id="myDiv">Hello, <span>World!</span></div>
var element = document.getElementById("myDiv");
console.log(element.innerHTML); // 输出: Hello, <span>World!</span>

element.innerHTML = "Goodbye, <strong>World!</strong>";

textContent 获取或设置元素的纯文本内容。

// HTML: <div id="myDiv">Hello, <span>World!</span></div>
var element = document.getElementById("myDiv");
console.log(element.textContent); // 输出: Hello, World!

element.textContent = "Goodbye, World!";

element.getAttribute(name)：获取元素指定属性的值。

 // HTML: <a id="myLink" href="https://example.com">Click me</a>
 var link = document.getElementById("myLink");
 var href = link.getAttribute("href");

 console.log(href); // 输出: https://example.com

element.setAttribute(name, value)：设置元素指定属性的值。

  // HTML: <a id="myLink">Click me</a>
  var link = document.getElementById("myLink");
  link.setAttribute("href", "https://example.com");
  console.log(link.outerHTML);
  // 输出: <a id="myLink" href="https://example.com">Click me</a>

element.classList：获取元素的类名列表，可以进行添加、删除、切换类名的操作。

 // HTML: <div id="myDiv" class="box">Hello</div>
 var div = document.getElementById("myDiv");
 div.classList.add("highlight"); // 添加类名
 console.log(div.className); // 输出: box highlight

 div.classList.remove("box"); // 移除类名
 console.log(div.className); // 输出: highlight

 div.classList.toggle("highlight"); // 切换类名
 console.log(div.className); // 输出: ""

element.style：获取或设置元素的样式属性。

 // HTML: <p id="myParagraph">Some text</p>
 var paragraph = document.getElementById("myParagraph");
 paragraph.style.color = "red"; // 设置颜色样式
 paragraph.style.fontSize = "20px"; // 设置字体大小样式

element.appendChild(childElement)：将一个子元素添加到父元素的末尾。

// HTML: <div id="parent"></div>
var parent = document.getElementById("parent");
var child = document.createElement("p");
child.textContent = "This is a child element.";
parent.appendChild(child);

element.removeChild(childElement)：从父元素中移除指定的子元素。

// HTML: <div id="parent"><p id="child">This is a child element.</p></div>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.removeChild(child);

element.addEventListener(event, handler)：为元素添加事件监听器。

// HTML: <button id="myButton">Click me</button>
var button = document.getElementById("myButton");

function handleClick() {
  console.log("Button clicked!");
}

button.addEventListener("click", handleClick);

element.removeEventListener(event, handler)：移除元素的事件监听器。

// HTML: <button id="myButton">Click me</button>
var button = document.getElementById("myButton");

function handleClick() {
  console.log("Button clicked!");
}

button.addEventListener("click", handleClick);

// 一段时间后移除事件监听器
setTimeout(function() {
  button.removeEventListener("click", handleClick);
}, 5000);

window.onload：在页面完全加载后执行指定的函数。

window.onload = function() {
  console.log("Page loaded!");
  // 在这里执行其他操作或初始化
};

window.setTimeout(function, delay)：在指定的延迟时间后执行函数。

function showMessage() {
  console.log("Hello, World!");
}

setTimeout(showMessage, 2000); // 2秒后输出: Hello, World!

window.setInterval(function, interval)：每隔一定的时间重复执行函数。

function showTime() {
  var currentTime = new Date().toLocaleTimeString();
  console.log(currentTime);
}

setInterval(showTime, 1000); // 每隔1秒输出当前时间

element.classList.add(className)：向元素添加指定的类名。

// HTML: <div id="myDiv" class="box"></div>
var div = document.getElementById("myDiv");
div.classList.add("highlight");
console.log(div.className); // 输出: box highlight

element.classList.remove(className)：从元素移除指定的类名。

// HTML: <div id="myDiv" class="box highlight"></div>
var div = document.getElementById("myDiv");
div.classList.remove("highlight");
console.log(div.className); // 输出: box