javascript - 页面加载前 childNodes 列表为空

Question

// Some jQuery to load the HTML file
$(function(){
  $("#myDiv").load("./someHTMLfile.html");
});

var div = document.getElementById("myDiv");
console.log(div.childNodes);
console.log(div.childNodes[0]); // Prints undefined

当此代码运行时，列表 div.childNodes 为空，但是当我在 Chrome 控制台中检查变量时，列表不为空。 Chrome 还告诉我“第一次扩展时捕获下面的对象状态”。

当我在 Chrome 控制台中执行 console.log(div.childNodes[0]) 时，它会返回第一个元素，正如它应该的那样。我还尝试使用 jQuery $(document).ready() 在页面完全加载后执行脚本，但它没有解决任何问题。

这是为什么？如何解决？

Answer 1

load 异步运行，而且您已将其包装在 jQuery 就绪函数中。所有这些意味着 console.log(div.childNodes) 在 someHTMLfile.html 加载和插入之前运行良好。

您需要做的是使用load中可用的回调函数来运行依赖于html的任何功能:

$(function(){
  $("#myDiv").load("./someHTMLfile.html", function() {
    var div = document.getElementById("myDiv");
    console.log(div.childNodes);
    console.log(div.childNodes[0]);
  });
});