Question

我有这段代码：

<span class="start-end">
<duration>October </duration>
– December (1 duration)
</span>

另一个：

<span class="start-end">
<duration>September 2010</duration>
–
<duration>June 2014</duration>
(2 duration)
</span>

通常我可以使用以下选择器从内部文本和元素中获取结果：

document.querySelector('span.start-end duration').innerHTML

表示第一个代码块中的October和第二个阻止的September 2010。

如何从第一个区块December (1 duration)获取值并从第二个块June 2014并使用另一个命令获取(2 duration)

Answer 1

（2个持续时间）是.start-end span的文本。我会用

document.querySelector(span.start-end).textContent;

Answer 2

您可以使用:nth-child获取任何子元素（在这种情况下为:last-child）：

document.querySelector('span.start-end duration:nth-child(2)').innerHTML

Answer 3

var spans = document.getElementsByClassName("start-end")
for (var k in spans) {
  var span = spans[k]
  var durations = span.getElementsByTagName("duration")
  if(durations.length == 1) {
    console.log(durations[0].innerHTML)
  } else if(durations.length == 2) {
    console.log(durations[0].innerHTML, durations[1].innerHTML)
  }
}

<span class="start-end">
<duration>October </duration>
– December (1 duration)
</span>
and another one:

<span class="start-end">
<duration>September 2010</duration>
–
<duration>June 2014</duration>
(2 duration)
</span>

元素witout和元素的内部文本

3 个答案: