js在操作dom的場景中，有時候會有類似的場景需求。
js用前綴名查找class節點
// 參數dom為html dom節點
// 參數key為需模糊查詢的名稱字段
function queryClassNode(dom, key) {
let collectArray = [];
for (var i = 0; i < dom.childNodes.length; i++) {
// 核心點
if (dom.childNodes[i].attributes && dom.childNodes[i].attributes["class"] && dom.childNodes[i].className.indexOf(key) !== -1) {
collectArray.push(dom.childNodes[i]);
}
if (dom.childNodes[i].childNodes.length > 0) {
let res = queryClassNode(dom.childNodes[i], key);
for (var k = 0; k < res.length; k++) {
collectArray.push(res[k]);
}
}
}
return collectArray;
}js用前綴名查找Id節點
// 參數dom為html dom節點
// 參數key為需查詢的前綴名
function queryIdNode(dom, key) {
let collectArray = [];
for (var i = 0; i < dom.childNodes.length; i++) {
// 核心點
if (dom.childNodes[i].attributes && dom.childNodes[i].attributes["id"] && dom.childNodes[i].id.indexOf(key) !== -1) {
collectArray.push(dom.childNodes[i]);
}
if (dom.childNodes[i].childNodes.length > 0) {
let res = queryIdNode(dom.childNodes[i], key);
for (var k = 0; k < res.length; k++) {
collectArray.push(res[k]);
}
}
}
return collectArray;
}效果
<html>
<body>
<div>
<div></div>
<div>
<span id="test1">
233
<span class="demo1">666</span>
</span>
<span id="test2">
<span id="test3">666</span>
<span class="demo1">888</span>
<span class="demo2">999</span>
</span>
</div>
</div>
</body>
<script>
...
...
...
console.log(queryIdNode(document.body, 'test')); // [span#test1, span#test2, span#test3]
console.log(queryClassNode(document.body, 'demo')); // [span.demo1, span.demo1, span.demo2]
</script>
</html>補充點：
確實可以直接用 querySelectorAll 吧，配合屬性選擇器，反而更方便。上面的js實現方法，就留着不刪了
document.querySelectorAll('[id^=test]')
document.querySelectorAll('[class^=demo]')