页面加载前 childNodes 列表为空

Posted 2023-05-09

【中文标题】页面加载前 childNodes 列表为空

【英文标题】：childNodes list is empty before page is loaded

【发布时间】：2015-08-28 17:20:49

【问题描述】：

// 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() 后执行脚本，但它没有解决任何问题。

为什么会这样，我该如何解决？

【问题讨论】：

“为什么会这样” 您正在访问该元素之前它被填充。 “我该如何修复它” 等到它被填充。见加载文档：api.jquery.com/load

【参考方案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]);
  );
);