Question

我有这个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下的标签也有一个同名的类：

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

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

由于

Answer 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/

Answer 2

使用div.breadcrumb因为这会给你带有类痕迹的div，而不是标签。

Answer 3

You can do this：

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，所以最好将这些填充物更方便。

仅选择html节点的根项

3 个答案: