使用部分通配符的JavaScript - getElementsByName

Question

我正在进行一个自动化项目，在这个项目中，我有一个带有搜索框的web适配器，但是没有搜索按钮，唯一的方法就是点击enter。我找到了一个以前的线程，它提供了一个通过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

如果您想要有一个包含所有元素的列表，或者如果您想要选择一个特定的元素，可以运行这种特殊类型的属性选择器[id$="_text"]和document.querySelectorAll()。

​

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"]')。

Answer 2

我对attribute...is it name或id有点困惑。尽管这并不重要，但您可以尝试使用Attribute Ends With Selector。

您可以使用querySelectorAll()中的选择器来选择多个元素。

document.querySelectorAll('[name$="_text"]')[0]

OR:和querySelector()用于选择第一个匹配元素：

document.querySelector('[name$="_text"]')

​

let firstVal = document.querySelectorAll('[name$="_text"]')[0].value
console.log(firstVal);

<input name="1_text" value="one"/>
<input name="2_text" value="two"/>
<input name="3_text" value="three"/>

​