在前端开发中，有一些 DOM 加载函数可以帮助处理文档的异步加载和解析。这些函数可用于在文档加载完成后执行特定的操作。以下是一些常用的 DOM 加载函数：

1. DOMContentLoaded 事件：

DOMContentLoaded 事件在 HTML 文档解析完成后触发，不等待样式表、图像和子框架的加载完成。
document.addEventListener("DOMContentLoaded", function() {
  // 在此处执行文档解析完成后的操作
});

2. load 事件：

load 事件在整个页面（包括所有图像、样式表、脚本等）加载完成后触发。
window.addEventListener("load", function() {
  // 在此处执行页面加载完成后的操作
});

3. XMLHttpRequest 和 onload 事件：

使用 XMLHttpRequest 对象进行异步加载，并在 onload 事件中处理加载完成后的操作。
var xhr = new XMLHttpRequest();
xhr.open("GET", "example.xml", true);

xhr.onload = function() {
  if (xhr.status == 200) {
    var xmlDoc = xhr.responseXML;
    // 在此处执行文档加载完成后的操作
  }
};

xhr.send();

4. Promise 和 fetch：

使用 fetch 函数进行异步加载，结合 Promise 处理加载完成后的操作。
fetch("example.xml")
  .then(response => response.text())
  .then(data => {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(data, "application/xml");
    // 在此处执行文档加载完成后的操作
  })
  .catch(error => console.error("Fetch error:", error));

示例：
document.addEventListener("DOMContentLoaded", function() {
  // 在此处执行文档解析完成后的操作
  console.log("DOMContentLoaded event fired");
});

window.addEventListener("load", function() {
  // 在此处执行页面加载完成后的操作
  console.log("Load event fired");
});

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.xml", true);

xhr.onload = function() {
  if (xhr.status == 200) {
    var xmlDoc = xhr.responseXML;
    // 在此处执行文档加载完成后的操作
    console.log("XML loaded:", xmlDoc.documentElement.nodeName);
  }
};

xhr.send();

// 或使用 fetch 和 Promise
fetch("example.xml")
  .then(response => response.text())
  .then(data => {
    var parser = new DOMParser();
    var xmlDoc = parser.parseFromString(data, "application/xml");
    // 在此处执行文档加载完成后的操作
    console.log("XML loaded with fetch:", xmlDoc.documentElement.nodeName);
  })
  .catch(error => console.error("Fetch error:", error));

这个示例演示了如何使用不同的 DOM 加载函数来处理文档的加载和解析。DOMContentLoaded 和 load 事件可以用于传统的页面加载，而 XMLHttpRequest 和 fetch 则适用于异步加载 XML 或其他数据。


转载请注明出处：http://www.pingtaimeng.com/article/detail/14560/XML DOM