本文旨在解决在使用 insertAdjacentHTML 动态创建元素后，querySelector 无法立即获取到这些元素的问题。通过分析问题原因，提供了将元素选择器放置在函数内部、利用Promise处理异步加载以及使用轮询检测DOM元素等多种解决方案，确保在动态元素加载完成后能够正确地进行操作。
在使用 JavaScript 操作 DOM 时，经常会遇到需要动态创建元素并添加到页面中的情况。insertAdjacentHTML 方法是一个常用的选择，但如果在动态创建元素后立即使用 querySelector 或 querySelectorAll 尝试获取这些元素，可能会发现无法获取到，返回 null 或者空的 NodeList。这是因为动态创建元素是一个异步过程，DOM 的更新需要时间。以下将介绍几种解决这个问题的方法。
问题分析
根本原因在于 JavaScript 代码的执行速度通常比 DOM 的渲染速度快。当使用 insertAdjacentHTML 插入元素时，浏览器需要时间来解析 HTML 字符串，创建 DOM 节点，并将它们添加到文档中。如果在这些元素完全渲染到页面之前，就尝试使用 querySelector 获取它们，自然无法找到。
解决方案
-
将元素选择器放置在函数内部
最简单的解决方法是将元素选择器的代码移动到函数内部，确保在元素被添加到 DOM 之后再执行选择操作。在原代码中，links 变量在 productSave 函数外部初始化，导致在 catalog__link 元素渲染之前就被执行。正确的做法是将 links 的初始化放在 productSave 函数内部。
class Product { constructor(cardImg, cardName, cardBrand = '', cardPrice) { this.cardImg = cardImg; this.cardName = cardName; this.cardBrand = cardBrand; this.cardPrice = cardPrice; } } export const productSave = function () { window.addEventListener('DOMContentLoaded', () => { const links = document.querySelectorAll('.catalog__link'); // 移动到函数内部 console.log(links); links.forEach(link => { link.addEventListener('click', e => { const productItem = link.querySelector('.catalog__product'); const newProduct = new Product( productItem.querySelector('.catalog__productImg').src, productItem.querySelector('.catalog__product-model').textContent, productItem.querySelector('.catalog__product-brand').textContent, productItem .querySelector('.catalog__product-price') .textContent.replace(/\D/g, '') ); localStorage.setItem('newCard', JSON.stringify(newProduct)); console.log(productItem.querySelector('.catalog__product-model').textContent); }); }); }); };在这个修改后的版本中，links 变量只有在 DOMContentLoaded 事件触发后，也就是页面上的所有元素都加载完毕后才会被初始化。
-
利用 Promise 处理异步加载
如果动态创建元素的过程涉及到异步操作（例如从服务器获取数据并渲染），可以使用 Promise 来确保在数据加载完成后再执行后续操作。
首先，修改 fill 函数，使其返回一个 Promise：
export const fill = function (brand) { const row = document.querySelector('.catalog__row'); return fetch(`./data/${brand}.json`) .then(function (response) { return response.json(); }) .then(function (data) { let products = [...data.products]; products.forEach(product => { row.insertAdjacentHTML( 'afterbegin', `` ); }); }); };@@##@@${product['model']}
${product['brand']}
${product['price']}然后，在 loadContent.js 中，使用 .then() 方法链式调用 productSave 函数：
import { fill } from './fillCatalog.js'; import { productSave } from './productSave.js'; fill('jordans').then(productSave);这样可以确保 productSave 函数只有在 fill 函数中的 fetch 请求成功完成，并且元素已经添加到 DOM 后才会执行。
-
使用轮询检测 DOM 元素
如果无法直接控制动态创建元素的过程，可以使用轮询的方式定期检测 DOM 中是否存在目标元素。这种方法相对来说效率较低，但可以作为一种备选方案。
function waitForElement(selector) { return new Promise((resolve, reject) => { const timeout = setTimeout(() => { clearInterval(interval); reject(`Element "${selector}" not found within 10 seconds.`); }, 10000); const interval = setInterval(() => { const element = document.querySelector(selector); if (element) { clearInterval(interval); clearTimeout(timeout); resolve(element); } }, 200); }); } waitForElement('.catalog__link') .then(element => { console.log('Element found:', element); // 在这里执行对元素的后续操作 }) .catch(error => { console.error(error); });这段代码会每 200 毫秒检测一次是否存在 .catalog__link 元素。如果在 10 秒内找到该元素，Promise 会 resolve 并执行后续操作；如果在 10 秒内未找到，Promise 会 reject 并输出错误信息。
注意事项
- 避免在循环中频繁使用 querySelector，这会影响性能。尽量在循环外部获取元素，然后缓存起来。
- 在使用轮询检测 DOM 元素时，需要设置合理的超时时间，避免无限循环。
- 尽可能采用 Promise 或 async/await 等异步编程方式，以确保代码的执行顺序与 DOM 的渲染顺序一致。
总结
解决动态创建元素后 querySelector 无法获取的问题，关键在于理解 JavaScript 代码的执行时序与 DOM 渲染时序之间的关系。通过合理地组织代码结构，利用 Promise 处理异步操作，以及在必要时使用轮询检测 DOM 元素，可以有效地解决这个问题，确保能够正确地操作动态创建的元素。
