JS动态创建的section无法被getElementsByTagName生成的数组识别如何解决

问题根因 #

你遇到的问题本质是代码执行时序问题和静态数组快照的特性导致的：

• 你执行Array.from(document.getElementsByTagName("section"))的时机早于动态创建section并插入到main节点的时机，此时DOM中还没有section4，转换出来的数组自然不会包含它
• Array.from会对传入的DOM集合做一次静态快照，哪怕后续getElementsByTagName返回的动态集合更新了，之前转好的数组也不会自动同步最新的DOM内容

解决方法 #

1. 调整代码执行顺序 #

确保所有动态创建、插入section的代码执行完成后，再执行转换数组的操作，示例执行顺序如下：

// 第一步：先创建并插入动态section
const  main = document.querySelector('main') ,
    new_p = document.createElement('p'),
    new_h2 = document.createElement('h2'),
    new_div = document.createElement('div'),
    new_section = document.createElement('section')

main.appendChild(new_section);
new_section.id = ('section4');
new_section.appendChild(new_div);
new_div.classList.add('landing__container');
new_div.appendChild(new_h2);
new_div.appendChild(new_p);
new_h2.textContent = 'Section 4';
new_h2.id = 'heading4';
new_p.textContent = 'some text goes here'

// 第二步：所有DOM修改完成后，再获取并转换section列表
const sections = Array.from(document.getElementsByTagName("section"))
console.log(sections) // 此时就会包含4个section

2. 按需实时获取最新列表 #

如果你的section是在异步操作（比如接口请求、用户交互事件）中动态生成的，不要提前把sections存为全局固定变量，每次需要用到全量section列表时，再实时执行转换逻辑获取最新结果即可。如果你的动态创建逻辑封装在DOM加载完成的回调、或者其他异步回调函数中，也要确保获取数组的逻辑和创建逻辑在同一个时序上下文中，或者在创建逻辑执行完成后再触发获取操作。

内容的提问来源于stack exchange，提问作者Hany Taha