按类在第一个元素内按 id 获取元素 - JavaScript

在 JavaScript 中，我们有许多不同的方法来按类选择 DOM 元素，并在选定的元素内通过 id 获取其他元素。这个任务可以通过使用现有的 JavaScript DOM 操作方法和一些自定义函数来完成。

下面是一个实现此功能的示例代码：

/**
 * 按类选择第一个元素，然后通过 id 获取其他元素
 * @param {string} className - 要选择的类名
 * @param {string} id - 要获取的元素的 id
 * @returns {HTMLElement|null} - 获取到的元素，如果找不到则返回 null
 */
function getElementByClassAndId(className, id) {
  // 按类选择第一个元素
  const element = document.querySelector(`.${className}`);
  
  if (element) {
    // 在选择的元素内按 id 获取其他元素
    return element.querySelector(`#${id}`);
  }
  
  return null;
}

使用示例：

// 获取类名为 "container" 的第一个元素内 id 为 "myElement" 的元素
const myElement = getElementByClassAndId("container", "myElement");

if (myElement) {
  console.log(myElement);
} else {
  console.log("未找到匹配的元素");
}

这段代码中的 getElementByClassAndId 函数接受一个类名和一个 id 作为参数，并返回在第一个匹配的类元素内按 id 获取的元素。如果找不到匹配的元素，则返回 null。

你可以根据需要自定义函数，并根据实际情况修改选择器。此外，你还可以扩展这个功能以实现其他类似的 DOM 操作。