如何使用document.querySelectorAll获取多个选择器的URL值？

你的代码没法正常运行，核心问题出在childNodes[1]这个写法上——childNodes会把所有类型的节点都包含进来，包括HTML里的空格、换行这些文本节点，所以你没法保证索引1对应的就是你要的<a>元素，这就导致代码不稳定。

下面给你几个更可靠的解决方案：

方案1：直接定位目标a标签（最简洁） #

直接在querySelectorAll里精准定位到.myClass下的<a>元素，一步到位：

var links = document.querySelectorAll(".myClass a");
for(var i = 0; i < links.length; i++) {
  console.log(links[i].href);
}

方案2：用children替代childNodes #

children属性只会返回元素节点，不会包含文本节点，如果你确定每个.myClass下的第一个元素就是<a>，可以这么写：

var containers = document.querySelectorAll(".myClass");
for(var i = 0; i < containers.length; i++) {
  console.log(containers[i].children[0].href);
}

方案3：在容器内单独查找a标签 #

如果每个.myClass容器里可能有多个元素，或者你想确保找到a标签再操作，用querySelector在容器内查找会更稳妥：

var containers = document.querySelectorAll(".myClass");
for(var i = 0; i < containers.length; i++) {
  var targetLink = containers[i].querySelector("a");
  if(targetLink) { // 避免找不到a标签时报错
    console.log(targetLink.href);
  }
}

内容的提问来源于stack exchange，提问作者PLazzo