javascript - 获取 div 的 firstChild

Question

我正在尝试获取 span 元素的文本。我尝试了两种方法querySelectorAll，getElementByClassName但都给了我错误“未捕获的类型错误：对象＃没有方法'getElementsByTagName'”我该如何获取跨度元素的文本？

javascript

var interstitial; 

// 1st attempt
interstitial = document.querySelectorAll('div.top_bg').getElementsByTagName("span");
// 2nd attempt
interstitial = document.getElementByClassName('top_bg')[0].getElementsByTagName("span");

if (interstitial) {
  console.log(interstitial[0].firstChild.innerHTML);
}

html

<div class="top_bg">
  <span style="font-size:14px;line-height:30px">The text I am trying to get.</span>
</div>

Answer 1

在查询中包含跨度

interstitial = document.querySelectorAll('div.top_bg span');

document.querySelectorAll('div.top_bg')返回一个集合，因此您必须选择一个节点然后应用getElementsByTagName

它也getElementsByClassName没有getElementByClassName注意到Elements

http://jsfiddle.net/dRvDt/1/

Answer 2

您收到错误是因为返回的对象querySelectorAll是NodeList，并且 NodeLists 没有getElementsByTagName方法。您应该执行以下操作：

  var node, nodeList, spans

  if (document.querySelectorAll) {
    nodeList = document.querySelectorAll('div.top_bg');
    node = nodeList[0];

    if (node) {
      spans = node.getElementsByTagName('span');
    }
  }

spans现在是第一个 NodeList 的第一个元素中包含的 span 的 NodeList，如果有的话。第一个将在spans[0]，依此类推。

Answer 3

如果您可以使用 jquery，您可以轻松查找 span html： $("div.top_bg>span").firstChild().html();