javascript - 使用 JavaScript 在 HTML 中搜索 XML

Question

我会尝试尽可能简短地解释它。我有一个包含 XML 数据库的 iframe 标记。在其上方有一个文本字段和一个按钮，我想在其上添加一个函数，该函数从文本字段获取值并仅显示与针对特定 XML 标记输入的查询相匹配的结果。

我该如何去做呢？我知道如何获取该值，但我实际上只需要显示匹配结果的部分是我不知道该怎么做。

如果有人关心的话，这是一个大学项目，他们只是想看看我们了解一些 JavaScript 基础知识。这是我希望看到上述情况发生的页面:

http://poorlymadelolfansite.co.nf/browse.html

Answer 1

在您的 iframe 中，您有一个 XML，其中包含一条处理指令，告诉浏览器应用 XSLT 样式表，该样式表将 XML 转换为带有表格的 HTML。因此，如果您使用 Javascript 访问 iframe 的文档，您将找不到 XML 元素，而是找到 XSLT 转换的结果 HTML 文档。

基于此，我认为你有两个选择:

1. 您可以保持 XSLT 不变，并在 iframe 中编写 HTML 文档脚本，以隐藏不应显示的表格行。
2. 您调整 XSLT 以添加一两个参数作为过滤依据的值，然后您需要使用浏览器公开的 API 来应用设置了参数的 XSLT，并且您需要将 iframe 的内容替换为新的转换结果。

这两种方法都不会“使用 JavaScript 通过 XML 进行搜索”，就像在第一个选项中您将通过 HTML 进行搜索而在第二个 XSLT 中将通过 XML 进行搜索一样，如之前一样。

至于通过Javascript访问iframe的文档，使用

var iframeDoc = window.frames.dsoChamps.document;

然后访问该表

var table = iframeDoc.getElementsByTagName('table')[0];

然后您可以搜索table.rows集合来检查table.rows[i].cells[j].textContent是否具有您想要的值。您可以通过设置table.rows[i].style.display = 'none';来隐藏行，要再次显示它，您只需设置table.rows[i].style。显示='';。作为替代方案，您可以简单地定义一个 CSS 类并设置要隐藏的行的 className 并取消设置以再次显示行。

需要注意的是，textContent 仅在最新的 IE 版本中受支持，对于较旧的 IE 版本，您需要检查 innerText。

对于使用 Javascript 应用 XSLT 的替代方案，在 Mozilla、Opera、Safari、Chrome 中，您可以使用相同的 API https://developer.mozilla.org/en/docs/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations ，但是对于所有 IE 版本，您需要使用不同的 API http://msdn.microsoft.com/en-us/library/windows/desktop/ms762799%28v=vs.85%29.aspx .

对于 XSLT，我至少会将其更改为使用 thead 作为标题行创建表格，这是一个更清晰的文档结构，并简化了您搜索行的任务，如下所示那么您可以搜索 table.tBodies[0].rows 并忽略标题行。