如何使用它的 ID 但使用通配符选择一个 div？
如果 DIV 的 ID 是statusMessage_1098，我想以某种方式选择它，例如document.getElementById('statusMessage_*').
这是因为在页面生成之前，我不知道 ID 的后缀，并且一个页面中只会出现一个这样的 ID。这可能吗？
谢谢你的帮助。
使用通配符 ID 选择 div
IT技术
javascript
jquery
dom
prototypejs
2021-03-16 13:34:14
6个回答
基于元素id属性的通配符解决方案
对的，这是可能的。这直接回答了您的问题，而无需依赖第三方 JavaScript 或 API 或元素 id 以外的属性。你也不必使用 class=
自定义方法调用示例
// Uses JavaScript regex features to search on id= attribute
var arrMatches = document.getElementsByRegex('^statusMessage_.*');
这将获取一个包含所有元素的数组，该元素的 id 以“statusMessage_”开头（甚至是嵌套的）。
实现示例 - 可重用和通用
这是getElementsByRegex从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，并在其他浏览器中提供强大的支持。
使用 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 。
其它你可能感兴趣的问题