JavaScript 通过父 id 获取子元素

在 JavaScript 中，我们经常需要通过父元素的 id 来获取子元素。这在处理 DOM 元素时非常常见，例如在 web 开发中动态修改页面内容或样式。

方法一：使用 querySelectorAll

可以使用 querySelectorAll 方法来通过父 id 获取子元素。该方法接受一个选择器作为参数，并返回与该选择器匹配的所有元素。

// 通过父 id 获取子元素
const parentElement = document.getElementById("parent-id");
const childElements = parentElement.querySelectorAll(".child-class");

在上述代码中，我们首先通过父元素的 id 获取父元素对象。接下来，使用 querySelectorAll 方法并传入子元素的类名作为参数来获取所有匹配的子元素。

这将返回一个包含所有子元素的 NodeList 对象。你可以通过循环遍历该对象，或使用索引访问特定的子元素。

方法二：使用 children 属性

另一个获取子元素的方法是使用 children 属性。这个属性返回指定元素的所有直接子元素的集合。

// 通过父 id 获取子元素
const parentElement = document.getElementById("parent-id");
const childElements = parentElement.children;

在上述代码中，我们同样通过父元素的 id 获取父元素对象，并使用 children 属性获取所有的直接子元素。

这将返回一个包含所有子元素的 HTMLCollection 对象。你同样可以通过循环遍历该对象，或使用索引访问特定的子元素。

方法三：使用 querySelector 方法和后代选择器

如果你只需要获取单个子元素，例如第一个或最后一个子元素，你可以结合使用 querySelector 方法和 CSS 后代选择器。

// 通过父 id 获取子元素
const parentElement = document.getElementById("parent-id");
const firstChildElement = parentElement.querySelector(".child-class:first-child");
const lastChildElement = parentElement.querySelector(".child-class:last-child");

在上述代码中，我们首先通过父元素的 id 获取父元素对象。然后，使用 querySelector 方法传入后代选择器作为参数来获取第一个和最后一个子元素。

这将返回对应的子元素对象，你可以直接访问它们的属性或进行其他操作。

以上就是通过父 id 获取子元素的几种常用方法。根据实际需要，你可以选择合适的方法来获取和操作子元素。