动态创建元素后querySelector无法获取的解决方案

本文旨在解决在使用 insertAdjacentHTML 动态创建元素后，querySelector 无法立即获取到这些元素的问题。通过分析问题原因，提供了将元素选择器放置在函数内部、利用Promise处理异步加载以及使用轮询检测DOM元素等多种解决方案，确保在动态元素加载完成后能够正确地进行操作。

在使用 JavaScript 操作 DOM 时，经常会遇到需要动态创建元素并添加到页面中的情况。insertAdjacentHTML 方法是一个常用的选择，但如果在动态创建元素后立即使用 querySelector 或 querySelectorAll 尝试获取这些元素，可能会发现无法获取到，返回 null 或者空的 NodeList。这是因为动态创建元素是一个异步过程，DOM 的更新需要时间。以下将介绍几种解决这个问题的方法。

问题分析

根本原因在于 JavaScript 代码的执行速度通常比 DOM 的渲染速度快。当使用 insertAdjacentHTML 插入元素时，浏览器需要时间来解析 HTML 字符串，创建 DOM 节点，并将它们添加到文档中。如果在这些元素完全渲染到页面之前，就尝试使用 querySelector 获取它们，自然无法找到。

解决方案

1. 将元素选择器放置在函数内部

   最简单的解决方法是将元素选择器的代码移动到函数内部，确保在元素被添加到 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 事件触发后，也就是页面上的所有元素都加载完毕后才会被初始化。

2. 利用 Promise 处理异步加载

   如果动态创建元素的过程涉及到异步操作（例如从服务器获取数据并渲染），可以使用 Promise 来确保在数据加载完成后再执行后续操作。

   

   千面视频动捕

   千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

   27

   查看详情

   首先，修改 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',
             ` <a class="catalog__link" href="#" >
                 <div class="catalog__product">
                 <div class="catalog__product-img">
                 <img class="catalog__productImg" src=${product['img-src']} alt="" srcset="" />
                 </div>
                 <h3 class="catalog__product-model">${product['model']}</h3>
                 <p class="catalog__product-brand">${product['brand']}</p>
                 <span class="catalog__product-price">${product['price']}</span>
   
             </div></a>`
           );
         });
       });
   };

   登录后复制

   然后，在 loadContent.js 中，使用 .then() 方法链式调用 productSave 函数：

   import { fill } from './fillCatalog.js';
   import { productSave } from './productSave.js';
   
   fill('jordans').then(productSave);

   登录后复制

   这样可以确保 productSave 函数只有在 fill 函数中的 fetch 请求成功完成，并且元素已经添加到 DOM 后才会执行。

3. 使用轮询检测 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无法获取的解决方案的详细内容，更多请关注php中文网其它相关文章！