如何在父元素鼠标悬停时为子元素添加类？

Hey there! I totally get why you reached for firstChild here—it seems like the obvious pick for targeting the first child element. But that frustrating error you’re seeing is super common, and it all boils down to how firstChild actually works under the hood.

Why firstChild is causing the issue #

The problem is that firstChild doesn’t only grab element nodes—it includes text nodes too. Those are the invisible bits like spaces, line breaks, or tabs in your HTML between elements. So if your parent element has any whitespace before its first actual child element, firstChild will return that text node instead of the element you want. Since text nodes don’t have a classList property, calling .add() on it throws that "undefined" error.

The easy fixes #

Here are a couple of reliable ways to target the first element child correctly:

1. Use firstElementChild instead

This method skips over text nodes and directly grabs the first element inside the parent. It’s made exactly for cases like yours:

// Get your parent element
const parentElement = document.querySelector('.your-parent-class');

// Add mouseover event listener to add the class
parentElement.addEventListener('mouseover', () => {
  const firstKid = parentElement.firstElementChild;
  // Add a quick check to avoid errors if the child doesn't exist
  if (firstKid) {
    firstKid.classList.add('your-target-class');
  }
});

// Don't forget to remove the class when the mouse leaves!
parentElement.addEventListener('mouseout', () => {
  const firstKid = parentElement.firstElementChild;
  if (firstKid) {
    firstKid.classList.remove('your-target-class');
  }
});

2. Use querySelector with a specific selector

If you prefer working with CSS selectors, you can directly target the first direct element child of the parent:

const parentElement = document.querySelector('.your-parent-class');

parentElement.addEventListener('mouseover', () => {
  const firstKid = parentElement.querySelector('> *:first-child');
  if (firstKid) {
    firstKid.classList.add('your-target-class');
  }
});

The > *:first-child selector ensures you only grab the first direct element child, no text nodes included.

Quick pro tip #

Always add that if (firstKid) check! Even if you’re certain the parent has a child, it’s a safe habit to prevent errors if the DOM ever changes (like if the child gets removed dynamically later).

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