JavaScript中获取ul下li的子元素（img）及targetImages访问失效问题

Hey there! I’ve run into this exact problem before—so let’s break down why your image references stop working after page initialization, and how to fix it.

Why This Happens #

The key culprit here is that getElementsByClassName() and getElementsByTagName() return a live HTMLCollection, not a static array of elements. Here’s what that means:

• When your site first loads, the target elements exist, so the collection correctly pulls in your images.
• But if your ul/li elements get dynamically updated later (like via AJAX, DOM manipulations that add/remove items, or component re-renders), this live collection automatically syncs with the current DOM. However, if you stored the collection in targetImages early on, you might end up with references to elements that no longer exist, or the variable might lose its context if it’s scoped incorrectly.

Solutions to Try #

1. Use a Static NodeList with querySelectorAll()

Swap out those live collection methods for querySelectorAll(), which returns a static NodeList that doesn’t change when the DOM updates. This is perfect if you need to hold onto element references, or just want a reliable snapshot:

// Get all img elements inside li tags under your ul
const targetImages = document.querySelectorAll('ul li img');

If you need the latest set of images later (after DOM changes), just re-run this line to get a fresh snapshot.

2. Fix Variable Scope

If targetImages is declared inside an initialization function as a local variable, other functions later in your code won’t be able to access it. Instead, either:

• Declare it in a shared scope (avoid global variables if possible—better to use a module or closure), or
• Wrap the image-fetching logic in a reusable function so you can call it whenever you need the latest images:

function getLatestTargetImages() {
  return document.querySelectorAll('ul li img');
}

// Initialize once
let targetImages = getLatestTargetImages();

// Later, when you need updated images:
targetImages = getLatestTargetImages();

3. Listen for DOM Changes (For Dynamic Content)

If your ul is being updated dynamically (like loading new items via an API), use a MutationObserver to automatically refresh your image references when the DOM changes:

// Grab your ul element first
const targetUl = document.querySelector('ul');

// Set up the observer to watch for changes in the ul's subtree
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // Check if new nodes were added
    if (mutation.addedNodes.length > 0) {
      // Refresh your image collection
      targetImages = document.querySelectorAll('ul li img');
      // Run any logic you need with the new images here
    }
  });
});

// Start observing the ul for child list changes (including nested elements)
observer.observe(targetUl, { childList: true, subtree: true });

// Initial image fetch
let targetImages = document.querySelectorAll('ul li img');

Quick Recap #

• Live collections (getElementsBy*) can cause issues when DOM changes—stick to querySelectorAll for static snapshots.
• Make sure your targetImages variable is accessible where you need it, or use a function to re-fetch elements.
• For dynamic content, use MutationObserver to keep your references up-to-date automatically.

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