在Web开发中，经常需要通过JavaScript获取HTML文档中的子元素。本文将介绍一些常用的获取子元素的方法，并提供相应的示例代码。
1.使用querySelectorAll()
querySelectorAll()是一个非常强大的方法，可以返回文档中匹配给定CSS选择器的所有元素的列表。如果想获取某个元素下的所有子元素，可以在选择器中添加child选择器">"。例如，以下代码获取ID为parent的元素下所有的p元素：
----- ------ - ---------------------------------- ----- -------- - -----------------------------
2.使用childNodes属性
childNodes属性返回一个包含指定节点的子节点的集合，以NodeList对象形式返回。但需要注意的是，childNodes会返回所有类型的节点，包括文本节点、注释节点等。所以，在使用childNodes时需要对结果进行过滤。以下代码获取ID为parent的元素下所有的p元素：
----- ------ - ---------------------------------- ----- -------- - ----------------------------------------- -- ------------- --- -----
3.使用children属性
children属性返回一个只包含当前元素的子元素（不包含文本节点）的HTMLCollection对象。这意味着我们不需要手动过滤文本节点，因为它们不会被包含在children集合中。以下代码获取ID为parent的元素下所有的p元素：
----- ------ - ---------------------------------- ----- -------- - ----------------
4.使用getElementsByTagName()
getElementsByTagName()方法返回一个包含指定标签名的所有元素的HTMLCollection对象。以下代码获取ID为parent的元素下所有的p元素：
----- ------ - ---------------------------------- ----- -------- - ---------------------------------
以上就是获取子元素的几种方法，不同的方法有不同的优缺点，需要按照实际情况选择。希望本文可以帮助读者更好地掌握JavaScript中获取子元素的技巧。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27796