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等于spnCV的textContent。问题是这个代码在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，假设您可以某种方式添加一些j。

Answer 3

工作演示fiddle

  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);
        }
     }

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

3 个答案: