JavaScript - 使用部分通配符的 getElementsByName

Question

我正在从事一个自动化项目，在该项目中我有一个带有搜索框的网络适配器，但没有搜索按钮，继续进行的唯一方法是按回车键。我发现之前的一个线程提供了通过 ID 获取文本框元素的解决方案，但是在这种情况下，每次加载页面时都会随机生成文本框 ID。

除了名称的末尾始终以 _text 结尾外，文本框的名称也始终会发生变化。

我尝试在以下脚本中使用 *_text 作为我的参数，但我一直收到错误。知道我做错了什么或有更好的建议吗？

eventname = "keydown"

elementID = "*_text"

---

function os_RaiseEvent(eventname,elementId) {
    var element = document.getElementsByName(elementId)[0];
    var event;

    if(document.createEvent) {
        event = document.createEvent("HTMLEvents");
        event.initEvent(eventname, true, false);
        if(eventname == "keydown" || eventname == "keyup") {
            event.keyCode = 13;
        }
        element.dispatchEvent(event);
    }
    else if(document.createEventObject) {
        event = document.createEventObject();
        if(eventname == "keydown" || eventname == "keyup") {
            event.keyCode = 13;
        }
        element.fireEvent("on" + eventname, event);
    }
    return true;
}

Answer 1

使用 document.querySelectorAll() 运行这种特殊的属性选择器 [id$="_text"]，如果你想要一个所有元素的列表，或者 `document.querySelector()，如果你想选择一个特定的元素。

console.log(document.querySelectorAll('[id$="_text"]'));

<p id="foo_text">Foo</p>
<p id="bar_text">Bar</p>
<p id="baz_text">Baz</p>

您可以对任何 HTML 属性采用此解决方案。如果要按名称属性查询，请使用 document.querySelectorAll('[name$="_text"]')。