Javascript 动态加载的元素不在HTML源代码中

我从一个页面获取div的属性，该页面在滚动到页面底部时动态加载元素。最初页面上有10个div，滚动时，每次动态地将10个新div加载到页面上

我的脚本如下所示：

var arr = document.getElementsByTagName('html')[0].innerHTML.match(/data-username="([^"]*")/gm); // I want the value from the attribute data-username
alert(arr.length); // size is 10

window.scrollTo(0, document.body.scrollHeight); // scroll to bottom to load 10 divs dynamically
arr = document.getElementsByTagName('html')[0].innerHTML.match(/data-username="([^"]*")/gm);

alert(arr.length); // size is still 10 but should be 20

为什么阵列大小仍然是10？如何获取所有20个div并遍历它们？

---

我查看了HTML源代码，问题是动态加载的div不存在。。。如何获取动态加载的元素？

我假设您正在执行一个ajax调用来获取额外的数据，您应该等待这些元素在DOM中可用（一旦完成），然后再使用它们。使用jQuery很容易做到这一点（因为它是一个标记）

---

在第二次调用

getElementsByTagName

之前，您是否给了元素加载的机会？由于这行代码紧跟在滚动到底部之后，因此它将在运行任何异步代码以获取其他元素之前运行。似乎您应该侦听滚动事件，然后在该事件的回调中放置第二个getElementsByTagName调用。此外，如果您只是执行一个普通的旧视图源代码，您将不会在代码中看到动态加载的元素。您需要使用浏览器的开发人员控制台来查看生成的源代码。