JavaScript forEach无法操作动态生成DOM元素的问题咨询

你的DOM查询时机错误：

• DB_localization数组在脚本加载初始化阶段就执行了所有document.querySelectorAll()，拿到的是脚本运行当下的静态DOM集合
• 此时你配置里要动态生成的span元素还没被创建、没有插入DOM树，这些动态元素根本不在提前拿到的NodeList里
• 后续调用apply_units()遍历的是初始化时就固定死的旧集合，自然操作不到后面才插入DOM的动态span，只有HTML里硬编码写死的<span class="unit-lenght">能被正常填充内容

不要提前在配置初始化阶段执行DOM查询，把查询动作挪到元素全部插入DOM之后再执行：

• 把DB_localization单位配置项里的document.querySelectorAll('选择器')全部替换成对应的选择器字符串，不要提前查DOM
• 在apply_units()函数执行时，实时调用querySelectorAll查询对应元素，此时所有动态生成的span已经完成DOM插入，能被正常匹配到

配置部分修改示例：

/* measurement units */
[
  [
    'DB_localization/units/lenght',
    '.unit-lenght', // 仅存储选择器字符串
    {
      de: 'cm',
      us: 'in',
      en: 'cm'
    }
  ],
  [
    'DB_localization/units/surface-area-A',
    '.unit-surface-area-A',
    {
      de: 'm²',
      us: 'not localized',
      en: 'm²'
    }
  ],
  [
    'DB_localization/units/surface-area-B',
    '.unit-surface-area-B',
    {
      de: 'cm²',
      us: 'ft²',
      en: 'cm²'
    }
  ],
  [
    'DB_localization/units/factor',
    '.unit-factor',
    {
      de: 'x',
      us: 'x',
      en: 'x'
    }
  ],
  [
    'DB_localization/units/minimum-surface-area',
    '.minimum-surface-area',
    {
      de: '100x50',
      us: '32x18',
      en: '100x50'
    }
  ],
]

apply_units函数修改示例：

function apply_units() {
  for (let i = 0; i < DB_localization[1].length; i++) {
    // 元素全部插入DOM后再执行查询
    let DB_array_element = document.querySelectorAll(DB_localization[1][i][1]),
      DB_array_value = DB_localization[1][i][2][language];
    if (typeof DB_array_value !== 'undefined' && DB_array_element.length) {
      DB_array_element.forEach(el => el.insertAdjacentHTML('beforeend', DB_array_value));
    }
  }
}

注：内容配置部分的document.querySelector('#text-block-2')因为指向的是HTML中原本就存在的静态元素，提前查询不会出现问题，不需要额外修改。

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