仅选择 html 节点的根项

Select only the root item of a html node

本文关键字：节点 选择 html      更新时间：2023-09-26

我有这个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 元素的文本内容以及div。我该怎么做才能只获取div 的文本。在这种情况下，我只想返回"来自我们创始成员的消息"。当它们具有所有相同的类时，有没有办法只选择 html 的根项？

谢谢

如果要

从带有 class="breadcrumb" 的 <a> 标签中获取文本，则可以通过使用包含标签类型的更具体的选择器来实现，如下所示：

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/

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

你可以这样做：

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所以最好把这些 polyfill 放在手边。

相关文章：