Javascript 按名称获取孩子

在使用Javascript操作DOM时，我们经常需要根据节点的名称获取它的孩子节点。Javascript提供了多种方式来实现这个功能。下面我们就看看几种常用方法。

使用querySelectorAll

querySelectorAll是一个非常简单的方法，可以用来查找符合选择器的所有元素。我们可以将元素名称作为选择器来获取所有孩子节点。

let elements = document.querySelectorAll('elementName');

这个方法返回一个NodeList对象，其中保存了所有符合选择器要求的节点。如果只需要获取其中一个节点，我们可以使用下面的代码：

let element = document.querySelector('elementName');

利用childNodes

childNodes是一个只读属性，返回一个节点的子节点集合。这个属性包含所有类型的节点，包括元素、文本和注释等。我们可以根据元素的节点类型来筛选出它的孩子节点。

let element = document.getElementById('elementId');
let children = element.childNodes;
let result = [];
for (let i = 0; i < children.length; i++) {
  if (children[i].nodeType === Node.ELEMENT_NODE) {
    result.push(children[i]);
  }
}

这个方法返回一个数组，其中保存了满足条件的所有孩子节点。

利用children

children是一个只读属性，返回一个元素的子元素集合。这个属性只包含元素类型的子节点，不包括文本和注释等其他类型的节点。

let element = document.getElementById('elementId');
let children = element.children;

这个方法返回一个HTMLCollection对象，其中保存了所有满足条件的子元素节点。

总结

这里介绍了三种常用的方法来获取元素的孩子节点。不同的方法可能适用于不同的场景，我们可以根据需要来灵活运用。废话在前，程序猿们，上代码！