TypeScript提示Property 'style' does not exist on type 'ChildNode'如何解决

TypeScript 中 ChildNode 类型是包含文本节点、注释节点、元素节点等多种节点类型的联合类型，只有 HTMLElement 类型的节点才拥有 style 属性，你通过 childNodes 按索引获取节点时，TS 无法识别该节点的具体类型，因此抛出类型错误。

额外提示：你当前代码中使用 map 做无返回值的遍历，建议替换为 forEach 更符合方法语义。

• 方案1：类型断言（最便捷，适合确认DOM结构不会变更的场景）
  直接将你要操作的节点断言为 HTMLElement 类型即可，示例修改：

(coin.childNodes[0].childNodes[2] as HTMLElement).style.flex = '1 0 100%'
(coin.childNodes[0].childNodes[2] as HTMLElement).style.marginLeft = '-3px'

• 方案2：类型守卫（更安全，避免DOM结构变更后出现运行时错误）
  先判断节点是否为 HTMLElement 实例，再操作 style 属性：

allCoins.forEach((coin) => {
  const targetNode = coin.childNodes[0].childNodes[2]
  if (targetNode instanceof HTMLElement) {
    if (coins.offsetHeight >= 53 && xs && !md) {
      targetNode.style.flex = '1 0 100%'
      targetNode.style.marginLeft = '-3px'
    } else {
      targetNode.style.flex = 'unset'
      targetNode.style.marginLeft = '0'
    }
  }
})

• 方案3：优化节点获取方式（最推荐，可彻底避免索引取节点的脆弱性）
  不要用 childNodes 按索引取节点，给你需要操作的目标元素添加专属的类名或 data-* 自定义属性，例如给目标元素加 data-role="coin-flex-container"，之后通过 querySelector 直接获取目标元素：

allCoins.forEach((coin) => {
  const targetEl = coin.querySelector<HTMLElement>('[data-role="coin-flex-container"]')
  if (!targetEl) return
  if (coins.offsetHeight >= 53 && xs && !md) {
    targetEl.style.flex = '1 0 100%'
    targetEl.style.marginLeft = '-3px'
  } else {
    targetEl.style.flex = 'unset'
    targetEl.style.marginLeft = '0'
  }
})

这个方案不仅能解决类型报错，还能避免后续DOM结构调整时索引偏移导致的逻辑错误。

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