克隆<template>元素append后无法操作，始终报undefined错误

核心问题 #

你遇到的错误根源在于：document.body.appendChild(modalTemplate)返回的是DocumentFragment（模板内容克隆后的对象），而非你需要操作的<aside>元素。当你向appendChild传入DocumentFragment时，浏览器会自动将片段内的所有子节点插入到目标元素中，而返回的是已经被清空的DocumentFragment——它没有style属性，因此尝试设置this.modalElement.style.display时会抛出：

Uncaught TypeError: Cannot set properties of undefined (setting 'display')

修复方案 #

你需要先从克隆的DocumentFragment中提取出目标<aside>元素，再将该元素添加到body中，这样this.modalElement就指向了实际的DOM节点，可正常操作其样式。

修正后的ES模块代码：

export default class Modal {
  constructor() {
    const template = document.getElementById('js-modalTemplate');
    const modalTemplate = template.content.cloneNode(true);
    
    // 从文档片段中获取需要操作的aside元素
    this.modalElement = modalTemplate.querySelector('.o--modal');
    // 将实际DOM元素添加到body
    document.body.appendChild(this.modalElement);

    console.log(this.modalElement);
    this.modalElement.style.display = "block";
  }
}

补充说明 #

之前console.log输出不稳定的原因：

• 如果在appendChild之前打印modalTemplate，能看到片段内的子节点，但此时this.modalElement是DocumentFragment，依然没有style属性
• 如果在appendChild之后打印，DocumentFragment已经被清空（子节点已转移到DOM），所以显示为空

无论哪种情况，你操作的对象都不是目标DOM元素，因此必然报错。

内容的提问来源于stack exchange，提问作者Chuck Le Butt