javascript - 如何选择 div 和 href 中的所有文本

Question

我有 HTML，例如:

<div class="mt brn">
  <a href="....">Country 1</a>
</div>
<div class="mt brn">
  <a href="....">Capital 1</a>
</div>
<div class="mt brn">
  <a href="....">Population</a>
</div>

我想知道如何使用 Javascript(不是 jquery)创建数组:

[国家 1、首都 1、人口]

我知道每个 href 上方的 DIV 类将设置为“mt brn” - 所以我希望它忽略

中未包含的任何 a href 文本

提前致谢，

标记

Answer 1

使用 document.querySelectorAll('.mt.brn a'); 获取类 .mt.brn 中的 anchor 标记。然后循环遍历元素并使用inneHTML 获取内容。或者使用 textContent 获取文本

var elemts = document.querySelectorAll('.mt.brn a');
var textArray=[];
for(var i= 0;i< elemts.length;i++){

  textArray.push(elemts[i].innerHTML )
}
console.log(textArray)

<div class="mt brn">
  <a href="....">Country 1</a>
</div>
<div class="mt brn">
  <a href="....">Capital 1</a>
</div>
<div class="mt brn">
  <a href="....">Population</a>
</div>

使用文本内容的示例:

var elemts = document.querySelectorAll('.mt.brn a');
var textArray=[];
for(var i= 0;i< elemts.length;i++){

  textArray.push(elemts[i].textContent )
}
console.log(textArray)

<div class="mt brn">
  <a href="....">Country 1</a>
</div>
<div class="mt brn">
  <a href="....">Capital 1</a>
</div>
<div class="mt brn">
  <a href="....">Population</a>
</div>