js用前缀名查找class或id节点,js模糊查询某个dom节点_js获取模糊的id

作者：我家自动化 | 2024-04-25 08:37:13

踩

js获取模糊的id

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

补充点：
确实可以直接用 querySelectorAll 吧，配合属性选择器，反而更方便。上面的js实现方法，就留着不删了

document.querySelectorAll('[id^=test]')

document.querySelectorAll('[class^=demo]')
1
2
3

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/484292