javascript - 找到不同跨度的第一个元素

Question

我实际上是在为网页创建一个脚本。我无法修改实际的标记。

这是 HTML 源代码：

<span id="spnTrNdCnt">
     <span class="fufw" fldrnm="ibx" id="spnFldrNm">IBX</span>
     <span id="spnUC">&lrm;(
          <span id="spnCV">2</span>
     )&lrm;</span>
</span>

我想获取 span id 的 textContent 等于 spnCV。问题是这段代码在 HTML 页面中出现了很多次。因此，每次我尝试获取 textContent ( document.getElementById('spnCV').textContent) 时，它都会给我最后一项的最后一个值。

我想知道是否有任何方法可以获取第一个项目的值（第一个具有 id spnCV 的跨度）！

非常感谢任何形式的帮助。

Answer 1

querySelectorAll理论上应该适用于 CSS 选择器，它不关心关于唯一 ID 的限制。

var spans = document.querySelectorAll('#spnCV');
var length = spans.length;

for (var i=0; i<length; i++) {
  console.log('Span ' + i, spans[i].textContent);
}

工作 JsBin：http: //jsbin.com/oriSiNa/1/edit

编辑：

由于您只需要第一个跨度，因此它更容易：

var value = document.querySelector('#spnCV').textContent;

Answer 2

ID 必须是唯一的，如前所述，但由于您无法更改源，请查看firstchild，假设您可以以某种方式添加一些 js。

Answer 3

工作演示小提琴

  var ele = document.getElementsByTagName('span');
     for(var i=0;i<ele.length;i++)
     {
        if(ele[i].id=='spnCV')
        {
            // when i=0 it will be the first node
           // do something
           var text = (ele[i].innerText || ele[i].textContent);
           alert(text);
        }
     }