如何为document.getElementsByName使用通配符？

Question

我正在尝试做一个非常简单的事情，即在Firefox中使用javascript bookmarklet填充输入框。

以下是相关代码和屏幕截图的摘要：

<input id="T22401715851381308556344_j_id_id0:freeSMSBean:receiverNumber" class="text" type="text" style="POSITION: absolute;" onblur="validateReceiverNumber(this,'');" maxlength="10" value="" name="T22401715851381308556344_j_id_id0:freeSMSBean:receiverNumber"></input>

我可以使用以下javascript bookmarklet填写值：

javascript:{document.getElementsByName('T22401715851381308556344_j_id_id0:freeSMSBean:receiverNumber')[0].value='1234';void(0)}

然而问题是名称的粗体部分不断变化。 的 T22401715851381308556344_j_id_id0 ：freeSMSBean：receiverNumber

我想知道我可以使用通配符以某种方式匹配更改的部分。或者是否有更好的解决方案来填写此输入框？

由于

Answer 1

您可以将$= selector与querySelectorAll：

一起使用

document.querySelectorAll("[name$=\":freeSMSBean:receiverNumber\"]");

小提琴：http://jsfiddle.net/DerekL/869p6knz/

---

querySelectorAll是document和Element的一种方法，可让您搜索具有有效CSS选择器的元素。

如果您只想要第一个结果，

querySelector也可用。

Answer 2

我不认为您可以使用document.getElementsByName执行此操作，但您可以使用document.querySelector执行此操作：

var textbox = document.querySelector('input[type="text"][name$=":freeSMSBean:receiverNumber"]');
// do whatever you wanna do with textbox

如果您想获取name属性以:freeSMSBean:receiverNumber结尾的所有文本框，则可以改为使用document.querySelectorAll。

var textboxes = document.querySelectorAll('input[type="text"][name=":freeSMSBean:receiverNumber"]');