Question

我想找到文本片段＆＃34;这是用于测试选择器＆＃34;来自以下使用纯JavaScript的DOM结构。

<html>
    <body>
        <div class="breadcrumb">
            <a title=" Home" href="http://www.google.com/"> Home</a> 
            <span class="arrow">»</span>
            <a title="abc" href="http://www.google.com/">test1</a> 
            <span class="arrow">»</span><a title="xyz" href="http://www.google.com/">test2</a> 
            <span class="arrow">»</span> 
            This is for testing selector
        </div>
    </body>
</html>

Answer 1

这应该可以解决问题。

document.getElementsByClassName('breadcrumb')[0].lastChild;

请注意，这仅适用于文本＆＃34;这是用于测试选择器＆＃34;仍然是breadcrumb

中的最后一个孩子

Answer 2

我相信您需要此答案中的代码：Select text in javascript

但是，如果您没有尝试使容器满足并且只想让文本突出显示，那么您可以执行以下操作：

@id

Answer 3

我认为可能有一个更简单的解决方案，但这也有效：

＆＃13;

var element = document.getElementsByClassName("breadcrumb")[0];
var children = element.childNodes;
for (i in children) {
  if (children[i] instanceof Text) {
    content = children[i].textContent;
    if (content.trim() != "") {
      alert(content);
    }
  }
}

＆＃13;

<body>
  <div class="breadcrumb">
    <a title=" Home" href="http://www.google.com/"> Home</a> 
    <span class="arrow">»</span>
    <a title="abc" href="http://www.google.com/">test1</a> 
    <span class="arrow">»</span><a title="xyz" href="http://www.google.com/">test2</a> 
    <span class="arrow">»</span> This is for testing selector
  </div>
</body>

＆＃13;

此代码遍历div的子代，并搜索文本节点。它会提醒那个不空的人。

（仅用铬测试）

Answer 4

如果您要选择的文字始终位于div.breadcrumb标记中包含的所有标记之后（如您的示例所示），请使用以下内容：

document.querySelector('div.breadcrumb').lastChild.textContent.trim()

使用querySelector方法访问div.breadcrumb元素，然后访问该元素的lastChild属性，该属性为您提供了您正在寻找的textNode。现在只需使用textContent属性获取该元素的文本，最后使用trim方法去除前导和尾随空格和行返回。

JSBin example.

使用JavaScript查找元素的文本子项

4 个答案: