个人中心
gpt4 book ai didi

javascript - 如何使用 document.querySelectorAll 选择除 anchor (另一个元素内的 anchor )以外的所有标签？

转载 作者：行者123 更新时间：2023-11-28 13:56:57 24 4
gpt4 key购买 nike

编辑:是否可以从 HTML 文档中的标签获取所有内部文本，除了来自 anchor 标签的文本 <a> (来自 <a> 的文本均未锚定在另一个元素内)与 document.querySelectorAll方法？

我的程序有一个输入字段，允许用户插入一些选择器以获取给定站点页面中某些标签的文本。所以，如果我想插入一个从所有节点获取文本的选择器，除了 <a>标签，我怎样才能做到这一点？我是说 *:not(a)不起作用，因为它选择的标签可能有 <a>后代和not()选择器不接受复杂的选择器，所以 *:not(* a)不起作用。

我知道我可以先从文档中删除这些节点，但是是否可以只选择我想要的节点来完成此任务 document.querySelectorAll方法？示例:

<html>
  <... lots of other tags with text inside>
    <div>
      <p> one paragraph </p>
      <a> one link </a>
    </div>
  </...>
</html>

我想要 html 中除“一个链接”之外的所有文本

编辑:如果你这样做document.querySelectorAll('*:not(a)') , 您选择 div ，里面有一个 a元素。所以，这个 div 的 innerText包含来自 a 的文本元素

谢谢

最佳答案

您的问题是如何允许用户从任意超文本 [文档] 中提取信息。这意味着解决“要抓取哪些元素”的问题只是它的一部分。另一部分是“如何将要抓取的元素集转化为用户最终感兴趣的数据集”。

这意味着 CSS 选择器本身是行不通的。您需要数据转换，它将处理元素集作为输入并产生感兴趣的数据集作为输出。在您的问题中，这可以通过只需要某些元素或整个文档的文本内容，但好像 a 元素不存在的情况来说明。这就是您在这种特殊情况下的转换过程。

但是，您确实声明了您希望允许用户指定他们想要抓取的内容。这意味着您的转换过程具有其他变量，并且在它可以执行的转换类型方面可能是通用的。

考虑到这一点，我建议您研究像 XSLT 这样的技术.一方面，XSLT 专为这些事情而设计——转换数据。

根据您期望用户具备的计算机知识，您可能需要封装 XSLT 的原始功能和复杂性，为用户提供一个简单的 UI，将他们的查询转换为 XSLT，然后将生成的 XSL 样式表提供给 XSLT 处理器， 例如。无论如何，XSLT 本身将能够承载很大的负载。您也不需要同时使用 XSLT 和 CSS 选择器——前者使用 XPath您可以利用它，甚至可以向用户公开。

让我们考虑以下您要抓取的 HTML 文档的简短示例:

<html>
    <body>
        <p>I think the document you are looking for is at <a href="example.com">example.com</a>.</p>
    </body>
</html>

如果您希望提取所有文本但不提取 a 元素，则以下 XSL 样式表将配置 XSLT 处理器以产生准确的结果:

<?xml version="1.0" encoding="utf-8" ?>
<stylesheet version="1.0" xmlns="http://www.w3.org/1999/XSL/Transform">
    <output method="text" />
    <template match="a" /><!-- empty template element, meaning that the transformation result for every 'a' element is empty text -->
</stylesheet>

用上述XSL样式表文档转换HTML文档后的结果如下:

I think the document you are looking for is at .

请注意 a 元素是如何被“剥离”的，在“at”和句子标点符号 (“.”) 之间留下一个空格。 template 元素为空，将 XSLT 处理器配置为在转换 a 元素时不生成任何文本(“a” 是有效的，如果非常简单，XPath 表达式，顺便说一下——它选择所有 a 元素)。当然，这都是 XSLT 的一部分。

我用 Free Online XSL Transformer 测试过这个它使用非常强大的 SAX 库。

当然，您可以使用 JavaScript 覆盖一个特定的用例——您的用例，而不使用 XSLT。但是你打算如何让你的用户表达他们想要抓取的内容呢？您可能需要发明一些[简单] 语言——这也可能是[已经发明的] XSLT。

XSLT 不能跨不同的用户代理或 JavaScript 运行时使用，不是开箱即用的——原生 XSLT 1.0 实现确实由 Firefox 和 Chrome 提供(使用 XSLTProcessor 类)但是没有被任何标准机构指定，因此在您的特定运行时环境中可能会丢失。虽然您也许能够找到合适的 JavaScript 实现，但无论如何您都可以在服务器端调用抓取工具。

将 XSLT 语言封装在一些更简单的查询语言和用户界面背后，是您需要做出的决定——如果您要为用户提供您希望他们拥有的那种可能性，他们需要以某种方式表达他们的疑问，无论是通过所见即所得的形式还是文本。

关于javascript - 如何使用 document.querySelectorAll 选择除 anchor (另一个元素内的 anchor )以外的所有标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58373638/

24 4 0
文章推荐： javascript - 如何从 Javascript 的父函数返回在子 jQuery 函数中创建的数组？
文章推荐： html - 悬停效果+ img上的超链接
文章推荐： javascript - 如何将字符串中的字符替换为其他字符？
文章推荐： java - OpenJFX 11 - javafxpackager 二进制 CSS