如何获取在getElementsByTagName中返回的DOM子数组中的元素

Posted 2021-05-07

有没有办法检测从getElementsByTagName（）返回的代理对象中的元素？我需要从下面的代码中添加EventListener到返回的svgs

const svgs= document.getElementsByTagName('svg');
console.log('svgs',svgs);
const myArray = Array.from(svgs); 
console.log('myArray ',myArray); // This is returning [] 

下面是我在控制台中可以看到的日志。有人可以帮我把svgs => target => htmlCollection（49）变成数组

答案

原因是这些svg元素显然是异步添加到文档中的。当你查看控制台并打开svgs结构时，svg元素已被加载，但在你的代码运行并创建数组时，情况并非如此。你看到他们是因为the console's lazy loading。

如果在页面加载时加载了svg元素，那么您可能很幸运，您可以将代码包装在以下内容中：

window.onload = () => { /* your code */ }

但是更有可能的是，这些内容是通过一些Ajax调用加载的，然后上面的内容不会有帮助。

您可以收听DOM突变事件：

const svgs = document.getElementsByTagName('svg');
console.log(svgs.length); // <-- presumably outputs 0

const listener = new MutationObserver(updated);
// This listens to changes under the BODY element. If you can be more 
// precise, then do so (to save resources). If you can do without
// the subtree option, then that is also preferred:
listener.observe(document.body, { childList: true, subtree: true });

function updated() {
    console.log(svgs.length); // <-- notice the increased length
    // Do whatever else you want to do with this collection.

    // If you are sure you have all you need, then stop the listener:
    listener.disconnect();
}

如果元素全部“一次”填充，并且您只需要调用一次事件监听器，那么您可能仍需要使用一些debouncing pattern进行调整。