如何使用它的 ID 选择一个 div，但使用一个widcard？
如果 DIV 的 ID 是 statusMessage_1098，我想以某种方式选择它，例如 document.getElementById('statusMessage_*')。
这是因为在生成页面之前，我不知道 ID 的后缀，并且页面中只会出现一个这样的 ID。这可能吗？
感谢您的帮助。
【问题讨论】：
标签： javascript jquery dom prototypejs
是的，这是可能的。这直接回答了您的问题，而不依赖于第三方 JavaScript 或 API 或元素 id 以外的属性。你也不必使用 class=
自定义方法调用示例
// Uses JavaScript regex features to search on id= attribute
var arrMatches = document.getElementsByRegex('^statusMessage_.*');
这会得到一个数组，其中包含所有 id 以“statusMessage_”开头的元素（甚至是嵌套元素）。
实施示例 - 可重用和通用
这是getElementsByRegex 函数的一个实现，它在DOM 中搜索给定的正则表达式，从document 开始。为方便起见并根据预期行为，它被附加到文档对象。
<head>
<script>
// Called as: document.getElementsByRegex("pattern").
// Returns an array of all elements matching a given regular expression on id.
// 'pattern' argument is a regular expression string.
//
document['getElementsByRegex'] = function(pattern){
var arrElements = []; // to accumulate matching elements
var re = new RegExp(pattern); // the regex to match with
function findRecursively(aNode) { // recursive function to traverse DOM
if (!aNode)
return;
if (aNode.id !== undefined && aNode.id.search(re) != -1)
arrElements.push(aNode); // FOUND ONE!
for (var idx in aNode.childNodes) // search children...
findRecursively(aNode.childNodes[idx]);
};
findRecursively(document); // initiate recursive matching
return arrElements; // return matching elements
};
</script>
</head>
可能有更有效的实现，但这个提供了一个开始。函数体可以根据喜好换成其他算法。
测试代码
最后，使用具有像这样的嵌套元素的 HTML 简介对其进行测试
<body>
<div id="statusMessage_1">1</div>
<div id="statusMessage_2">2
<div id="content">other stuff</div>
<div id="statusMessage_3">3</div>
</div>
<script>
// a quick test to see if you get the expected result.
var arrMatches = document.getElementsByRegex('^statusMessage_.*');
alert('found ' + arrMatches.length + ' matches - expected 3.')
</script>
这个 HTML 块包含三个以id="statusMessage_ 开头的元素；因此警报测试会说
“找到 3 个匹配项 - 预期 3 个”
变体的附录信息
如果您想将搜索限制为仅 div 元素或某种其他类型的特定元素，那么您需要将以下 getElementByTagName 代码注入算法以限制搜索的元素集。
var arrDivs = document.getElementsByTagName("div"); // pull all divs from the doc
您可能希望通过在第二个参数中传递标签名称来修改通用算法，以便在搜索开始之前进行过滤
var arrMatches = document.getElementsByRegex('^statusMessage_.*', 'div');
【讨论】：
只是认为值得在 JavaScript 中使用更新的方式更新线程，因为在搜索中仍然出现。
document.querySelector("[id^='statusMessage_']");
caniuse.com 列出了它可以用于 IE8 的 ID 和其他浏览器的强大支持。
【讨论】：
document.querySelectorAll()。
使用 jQuery 你可以做到这一点
$("div[id^='statusMessage_']")
编辑 - 使用类名选择器
如果您可以使用类名，那么您可以使用类似这样的名称
$$('div.myDivClass');
获取所有具有“myDivClass”类的 div 元素
【讨论】：
在 jquery 中，最简单的方法是为每个 div 分配一个类，比如“statusMessage” 类似：
<div id="statusMessage_<%=someid%>" class="statusMessage">...</div>
全部获取：
$('.statusMessage') // or $('div.statusMessage') //or $('div[id^=statusMessage_]')
没有jquery：
var divs = document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].id.indexOf('statusMessage_')==0){
//do stuff here for every divs[i]
}
}
【讨论】：
function switch2 (elementid)
{
var divs = document.getElementsByTagName("div");
for ( var i = 0; divs[i]; i++ )
{
if (divs[i].id.indexOf("statusMessage_") == 0)
{
document.getElementById (divs[i].id).style.display = "none";
}
}
}
只需将 document.getElementById (divs[i].id).style.display = "none"; 替换为您想要应用于所有 id 以 statusMessage_ 开头的所有 div 的任何 CSS。
【讨论】：
2020 年更新：
使用 jQuery 你可以做到这一点
$("div[id^=statusMessage_]")
**省略单引号。
我也经常在末尾加一个变量：
$("div[id^=statusMessage_" + id + "]")
【讨论】：
我不确定你是如何填充它的，但如果它来自背后的代码，你可以尝试类似：
document.getElementById('statusMessage_<%= generatedID %>')
其中 generatedID 是从后面的代码生成的 ID。
【讨论】：
在 css 中执行此操作的通常方法是为元素提供一个类“statusMessage”，以及它们的唯一 ID。然后，您可以使用选择器创建一个 CSS 规则，该规则将影响该类的所有元素。例如
.statusMessage {color: red;}
请记住，元素可以有多个类。比如
<p id="id123" class="class1 class2">
【讨论】：
如果您不想使用 jQuery，那么还有另一种更简单的方法：
分配 class - 例如，将其命名为“消息”，并使用以下内容：
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
你怎么称呼它：
var messages = getElementsByClass("message");
for(var index=0; index < messages.length; index++) {
// prompt the content of the div
//alert(message[index].innerText);
}
【讨论】：