Question

我无法获取以下两个strong标记的innerHTML

<div>
    <strong>data 1</strong> 
    <span class="and">and</span> 
    <strong>data 2 </strong>
</div>
<div>
    <strong>data 3</strong> 
    <span class="and">and</span> 
    <strong>data 4 </strong>
</div>

我希望在控制台中获得data1, data2，但我无法实现任何目标。我试过了document.querySelector("strong")，但它只是提供了data1。

如何从其他data2 data3 & data4标记中提取strong？任何帮助表示赞赏。

我知道我能做到

document.getElementsByTagName("strong")['increment_operator'].innerHTML;

和

document.querySelectorAll("strong");

Answer 1

尝试使用以下代码记录strong标记的html：

var elems = document.getElementsByTagName('strong');
for (i=0;i < elems.length;i++{
  console.log(elems[i].innerHTML)
}

要获取下面html运行代码中最后一个strong标记的innerHTML：

var elems = document.getElementsByTagName('strong')[:1];
console.log(elems[elems.length-1].innerHTML);

Answer 2

querySelector找到第一个结果并停止搜索，而querySelectorAll找到所有结果。

Answer 3

如果你有相同的标签并且你想要特定的标签innerHTML然后给出唯一的ID然后尝试获取或者如果你想获取所有strong标签innerhtml然后使用queryselectorall()

例如

 <div>
    <strong>data 1</strong> 
    <span class="and">and</span> 
    <strong>data 2 </strong>
</div>
<div>
    <strong>data 3</strong> 
    <span class="and">and</span> 
    <strong>data 4 </strong>
</div>

var a = document.querySelectorAll("strong");
for (var i = 0; i < a.length; i++) {
  alert(a[i].innerHTML);
}

Answer 4

总结部分内容：

document.querySelector(commaSeperatedStringOfSelectors)只发现document中的第一个节点满足给定的选择器。所以你需要更加具体，需要为你的html元素提供一些可查询的选择器，比如id class。

但如果你想更广泛地选择：

document.querySelectorAll(commaSeperatedStringOfSelectors)获取满足选择器的所有节点的数组。然后，您可以通过索引选择所需的元素。 fiddle
或者您需要使用@Andriy Ivaneyko的答案风格，使用getElementByTagName('tagname')，getElementsByClassName('class')或getElementById('id')。

注意：document.querySelectorAll(commaSeperatedStringOfSelectors)更通用，它让您有机会更具体或更具特异性。您可以使用其中的字符串：'strong, div.animals, a'。

Answer 5

好的，我做了以下工作。

var divLength = document.getElementsByTagName("div").length;
var z = 0;
for(i=0; i<divLength; i++){
    var dataFromFirstStrong = document.getElementsByTagName("strong")[z].innerHTML;
    z++;
    var dataFromSecondStrong = document.getElementsByTagName("strong")[z].innerHTML;
    z++;
}

从相同的标签获取innerHTML

5 个答案: