如何在没有ID或类属性的输入上使用setAttribute？

Question

我有一个由jQuery插件添加的搜索输入标记：

<input type="search" />

请注意，这没有ID，CLASS或NAME。我需要搜索输入标记看起来像这样：

<input type="search" name="myname" />

一个简单的解决方案是让我更新jQuery插件。但是，我不想这样做，因为将来升级此插件时会带来挑战。

此JavaScript可正常运行并添加name属性：

$(document).ready(function() {
   document.getElementsByTagName("input")[0].setAttribute("name", "myname");
});

问题是此函数中的“[0]”依赖于搜索输入是表单中的第一个输入字段。我不认为这个解决方案是可持续的。

表格中还有其他输入。这是type属性等于“search”的唯一一个。有没有办法通过这个属性识别它？或者，你提出了另一种解决方案吗？

感谢您的时间！

Answer 1

您可以使用document.querySelector：

document.querySelector("input[type='search']")

下面是一个示例（您可以检查输出以查看name属性）：

document.querySelector("input[type=search]").setAttribute("name", "myname");

<input type="search" value="foo" />
<input type="bar" value="bar" />

Answer 2

您可以按任何方式定位选择。因此，选择器input[type="search"]'将起作用。

如果你想将它应用于所有输入的搜索类型，这已经足够了，你可以在这里得到所有这些：

$('input[type="search"]')

这也没有jQuery：

document.querySelectorAll('input[type="search"]')

更具针对性的方法是

document.querySelectorAll('div.filter input[type="search"]')