如何选择 div 和 href 中的所有文本答案

【问题标题】：How do I select all text within a div and a href如何选择 div 和 href 中的所有文本
【发布时间】：2017-11-19 06:04:20
【问题描述】：

我有 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” - 所以我希望它忽略任何不包含在

中的 href 文本

提前致谢，

标记

【问题讨论】：

你需要使用innerHTML

标签： javascript html

【解决方案1】：

你可以试试下面的javascript代码：

var divList = document.getElementsByClassName("brn"); 
var tab=[]; 
for (index = 0; index < divList.length; ++index)  { 
    var text =divList[index].getElementsByTagName('a')[0].innerHTML;
    tab.push(text);
}

【讨论】：

【解决方案2】：

使用document.querySelectorAll('.mt.brn a');获取.mt.brn类中的锚标记。然后循环遍历元素并使用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>

【讨论】：

【解决方案3】：

使用document.querySelectorAll:

var anchorElements = document.querySelectorAll('.mt.brn > a');
var contents = [];
for (var i = 0; i < anchorElements.length; i++) {
  contents.push(anchorElements[i].textContent);
}

console.log(contents);

<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>

【讨论】：