Question

如何使用XPath选择<input> 属于到某个<form>？属于，我指的是JavaScript中的.form属性等于特定表单实例的输入。

在一般情况下，我想要一个返回此JavaScript返回的相同输入的XPath：

Array.prototype.filter.call(document.getElementsByTagName("input"),
    function(x) { return x.form == f1; })

注意：这并不意味着是 w.r.t的孩子。 DOM树！

例如，给出以下（格式错误的）html：

<html>
<body>
  <table>
    <form name="foo">
    <input name="bar"/>
    <tr>
      <td>
        <input name="baz"/>
      </td>
    </tr>
    </form>
  </table>
</body>
</html>

bar.form == foo和baz.form == foo成立，但可以"//form[@name='foo']//input"既不包含bar也不包含baz的方式生成DOM树。

e.g。 Chrome / Firefox / IE将为上述源生成此DOM树：

<html>
<head/>
<body>
  <input name="foo"/>
  <table>
    <form name="bar"></form>
    <tbody>
      <tr>
        <td>
          <input name="baz"/>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

P.S。一个可接受的答案可以简单地说明为什么这是不可能的。

编辑：阐明底部示例的含义。更新了示例，以说明为什么简单地遍历DOM树将无法正常工作。

Answer 1

根据您发布的示例，我不太明白这一点。您可以使用基于事件的（SAX）解析器执行此操作，在该解析器中保留＆＃34;最后一次看到的表单名称＆＃34;并将每个输入元素分配给该表单。当然，特别是对于第二个例子，这不是浏览器的看法。

由于我还不能使用评论： @dirkk：之前没有工作，因为轴是＆＃34;不包括任何祖先＆＃34;。因此，对于有效的HTML案例，它实际上并不起作用，因为表单被视为祖先。不过，这是一个好主意，也许preceding|ancestor可行。

Answer 2

您的输入无效HTML。表单输入必须在<form/>元素内，否则不清楚它们是如何相关的。例如，在以下HTML代码段中，现在应该如何构成输入的浏览器或任何HTML解析器：

<table>
  <form name="foo"></form>
  <form name="foo2"></form>
  <tr>
    <td><input name="bar" /></td>
  </tr>
</table>

话虽这么说，很多浏览器都很放松，基本上允许HTML设计师不使用任何标准。因此，他们可以使用度量，并说每个输入属于最后一个表单元素。也许他们的启发式更精细，所以你可能不会得到每一个角落。但是，以下XPath至少应该适用于您的两个示例：

//input[(preceding::form)[last()]/@name="foo"]

这样，您将获得所有输入元素，其中最后一个表单元素具有指定名称的元素，在本例中为 foo 。

获取属于特定html表单的<input />的XPath

2 个答案: