JS下获取子元素的方法

在JavaScript中操作DOM元素时，常常需要获取元素的子元素。以下是常用的JS方法来获取子元素：

children

element.children 方法返回一个包含任何元素子组件的HTMLCollection对象。

const parent = document.getElementById('parent');
const children = parent.children;

children 只会返回元素类型的子节点，而非所有的子节点。HTMLCollection 是一个类似数组的集合。你可以使用数组语法和 length 属性获取集合中的元素数量。

childNodes

element.childNodes 方法返回一个包含任何类型子节点的 NodeList 对象。

const parent = document.getElementById('parent');
const children = parent.childNodes;

childNodes 包括文本节点、注释节点和元素节点（如果有）。你可以使用数组语法和 length 属性获取 NodeList 中的元素数量。需要注意的是，需要通过判断 nodeType 属性来筛选出元素节点。

querySelectorAll

element.querySelectorAll() 方法返回与指定 CSS 选择器匹配的所有元素，它返回的是 NodeList 对象。

const parent = document.getElementById('parent');
const children = parent.querySelectorAll('.child');

在上面的代码中， .child 选择器匹配所有CSS类名为 child 的元素。需要注意的是，需要通过指定选择器来筛选出自己特定的子元素。

firstElementChild 和 lastElementChild

element.firstElementChild 和 element.lastElementChild 返回父元素的第一个和最后一个子元素，仅限元素类型的子级。如果没有子元素，则两个方法都返回 null。

const parent = document.getElementById('parent');
const firstChild = parent.firstElementChild;
const lastChild = parent.lastElementChild;

需要注意的是，IE9及更早版本不支持这两个属性。

其他方法

除了上面所述的方法之外，还有一些可以获取子元素的方法，如 element.getElementsByTagName()， document.createElement() 等。需要根据需求灵活选择使用。

总结

以上是常用的 JS 方法来获取元素的子元素， 你可以选择根据需求选择恰当的方法来获取你想要的子元素。