如何从函数外部定位并样式化函数内创建的DOM节点？

你当前代码报错的核心原因是：页面初始化时，.div-class元素还不存在——它是点击container之后才动态创建的，所以一开始执行document.querySelector('.div-class')得到的是null，尝试修改null的style自然会抛出TypeError。

下面是几种可行的解决方案：

• 方案1：在需要修改时动态获取元素
  不要提前获取，等到元素已经被创建后，再执行查询操作。比如通过按钮触发样式修改：

let container = document.querySelector('.container');
const styleBtn = document.querySelector('.style-btn'); // 假设页面有这个按钮

container.addEventListener('click', () => {
    const createdDiv = document.createElement('div');
    container.appendChild(createdDiv);
    createdDiv.classList.add('div-class');
});

// 点击按钮时再获取并修改样式
styleBtn.addEventListener('click', () => {
  const targetDiv = document.querySelector('.div-class');
  if (targetDiv) { // 先判断元素是否存在，避免报错
    targetDiv.style.backgroundColor = 'green';
  }
});

如果有多个同class的div，用querySelectorAll获取所有元素批量修改：

styleBtn.addEventListener('click', () => {
  const targetDivs = document.querySelectorAll('.div-class');
  targetDivs.forEach(div => {
    div.style.backgroundColor = 'green';
  });
});

• 方案2：将元素引用存储到全局作用域
  如果需要频繁访问创建的div，可以把变量声明在函数外部，创建时赋值：

let container = document.querySelector('.container');
let createdDiv; // 全局变量存储单个div

container.addEventListener('click', () => {
    createdDiv = document.createElement('div');
    container.appendChild(createdDiv);
    createdDiv.classList.add('div-class');
});

// 后续任意位置修改样式
function updateDivStyle() {
  if (createdDiv) {
    createdDiv.style.backgroundColor = 'green';
  }
}

如果要创建多个div，用数组存储所有引用：

let container = document.querySelector('.container');
const createdDivs = []; // 数组存储所有创建的div

container.addEventListener('click', () => {
    const newDiv = document.createElement('div');
    container.appendChild(newDiv);
    newDiv.classList.add('div-class');
    createdDivs.push(newDiv);
});

// 修改所有div的样式
function updateAllDivs() {
  createdDivs.forEach(div => {
    div.style.backgroundColor = 'green';
  });
}

• 方案3：用事件委托处理动态元素交互
  如果是要给动态创建的div绑定交互事件（比如 hover 时修改样式），不用每次创建都绑定，直接给父元素加事件委托：

let container = document.querySelector('.container');

container.addEventListener('click', () => {
    const createdDiv = document.createElement('div');
    container.appendChild(createdDiv);
    createdDiv.classList.add('div-class');
});

// 给父元素container绑定事件，监听子元素的触发
container.addEventListener('mouseover', (e) => {
  // 判断触发事件的是目标div
  if (e.target.classList.contains('div-class')) {
    e.target.style.backgroundColor = 'green';
  }
});

• 方案4：通过自定义事件传递元素引用
  创建div时触发自定义事件，把元素作为参数传递，其他地方监听这个事件即可拿到元素：

let container = document.querySelector('.container');

container.addEventListener('click', () => {
    const createdDiv = document.createElement('div');
    container.appendChild(createdDiv);
    createdDiv.classList.add('div-class');
    // 触发自定义事件，携带div元素
    const divCreatedEvent = new CustomEvent('divCreated', { detail: createdDiv });
    document.dispatchEvent(divCreatedEvent);
});

// 监听自定义事件，拿到div并修改
document.addEventListener('divCreated', (e) => {
  const newDiv = e.detail;
  newDiv.style.backgroundColor = 'green';
});

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