本文旨在解决在使用 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 元素，可以有效地解决这个问题，确保能够正确地操作动态创建的元素。
以上就是动态创建元素后querySelector无法获取的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1521249.html
微信扫一扫 
支付宝扫一扫 
