0

我有这个 html 代码。

<div class="breadcrumb">
  <a href="#" class="breadcrumb">Home</a>      
  <a class="breadcrumb" href="#">About</a>      
  <a class="breadcrumb" href="#">History</a>
  Message from our Founding Members  
</div>

使用 javascript 我想从 div ".breadcrumb" 中获取文本。问题是div下的a标签也有一个同名的类，当我运行这段代码时：

var names = document.querySelectorAll('.breadcrumb');
return [].map.call(names, function(name) {
  return name.textContent;
});

我的数组的第一个元素获取所有 a 元素的 textContent 以及 div。我该怎么做才能仅获取 div 的文本。在这种情况下，我只想返回“来自我们的创始成员的信息”。当它们具有相同的类时，有没有办法只选择 html 的根项？

谢谢

4

3 回答 3

1

如果您想从<a>带有 的标签中获取文本class="breadcrumb"，您可以使用包含标签类型的更具体的选择器来做到这一点，如下所示：

var items = document.querySelectorAll("div.breadcrumb a.breadcrumb");
var text = [];
for (var i = 0; i < items.length; i++) {
    text.push(items[i].textContent);
}

工作演示：http: //jsfiddle.net/jfriend00/kVwH8/

如果，您要做的是获取“来自我们的创始成员的消息”文本（我从您的原始问题中并不完全清楚），那么您可以这样做：

var items = document.querySelectorAll("div.breadcrumb a.breadcrumb");
// get node after the last item (that should be the desired text node)
var txtNode = items[items.length - 1].nextSibling;
console.log(txtNode.nodeValue);   //  Message from our Founding Members

工作演示：http: //jsfiddle.net/jfriend00/kynuE/

于 2013-10-25T18:42:45.287 回答
0

使用 div.breadcrumb 因为这将为您提供带有面包屑类的 div，而不是标签。

于 2013-10-25T18:39:23.610 回答
0

你可以这样做：

var names = document.querySelectorAll('div.breadcrumb')[0].childNodes;

var text = Array.prototype.reduce.call(names,function(prev,node){
   if(node.nodeType === 3) return (prev || '' + node.textContent.trim());
});

console.log(text);

这里有很多 ES5 的东西trim，reduce所以最好把这些 polyfills 放在手边。

于 2013-10-25T18:47:27.297 回答