如何使用Javascript选择Google搜索栏

Question

我正在使用Chrome扩展"Shortkeys"编写快捷方式可执行的Javascript代码，该代码在浏览Google搜索时选择Google搜索栏。重要提示：我尝试的不是 Chrome 的地址栏，而是 Google 网站上的实际搜索栏。我使用"inspect element"找到了搜索栏元素，发现它位于类为"a4bIc"的div 内。搜索栏元素的第一个标签是"输入"。所以我的代码是这样的：

var x = document.querySelectorAll("div.a4bIc input")[document.selectedResultId]

除非它不选择搜索栏。我错过了什么？

Answer 1

三个建议：

1. 看看谷歌搜索HTML的结构方式，看起来你最好使用"name"属性来可靠地选择搜索输入。要使用的选择器是[name='q']

2. querySelectorAll返回一个NodeList对象。如果我没记错的话，那么您无法使用 ID 访问NodeList的成员(这与非常相似的HTMLCollection对象形成对比。别担心，如果它看起来令人困惑，那是因为它是！对于像这样的简单查找，我建议使用querySelector它只会直接返回第一个选定的节点。

3. 根据您想对Google搜索栏执行的操作，似乎您需要进行某种.focus()和.click()的组合。在我刚才的测试中，我只能通过触发焦点然后单击来显示建议的下拉列表。

将这三者放在一起：

function openGoogleSearchUI(){
let searchInput = document.querySelector("[name='q']");
searchInput.focus();
searchInput.click();
}

当然，您可以根据需要调整对输入的操作，或者只是使用document.querySelector行直接获取输入元素。

Caveat Emptor：我只能看到这适用于我刚刚在英国收到的桌面Chrome上的Google搜索UI。不能保证它将来或在不同的设备上工作相同，因为Google可以随时更改他们认为合适的代码结构。