JS 使用 for 循环遍历子节点查找元素
作者:竹影时间:2026-10-28 14:02:27浏览:509
本文介绍在 JavaScript 中如何使用 for 循环配合数组来遍历 DOM 子节点并查找特定元素。通过定义包含类名和标签名的数组,程序可以灵活匹配元素属性,实现精准定位。
JS 遍历子节点查找元素方法
本文主要讲解如何利用 JavaScript 中的 for 循环结合数组来遍历 DOM 子节点,从而查找目标元素。
核心代码实现
function nextChildNode(node,clazz,tagName){
var count= node.childElementCount;
for(var i=0;i<count;i++){
if(node==undefined || node.children[i]==undefined){
continue;
}
if(clazz){
if(node.children[i].getAttribute('class')==clazz){
return node.children[i];
}
}else{
if(node.children[i].tagName==tagName){
return node.children[i];
}
}
}
return null;
}
function getChildNode(node,classArg,tagNodeArg){
for(var i=0;i<classArg.length;i++){
node=nextChildNode(node,classArg[i]);
}
for(var i=0;i<tagNodeArg.length;i++){
node=nextChildNode(node,null,tagNodeArg[i]);
}
return node;
}
function getItemId(node){
var classNode=['itemInfo','itemDesc'],tagNode=['P','BUTTON'];
node=getChildNode(node,classNode,tagNode);
alert(node.getAttribute('itemid'));
}
#调用函数
getItemId($(".shopItem")[0]);
作者最新文章
JS怎么使用classList添加、删除和切换class
2026-11-05 17:26:02
网页开发三者分工:HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象:自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手:安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53
