本文介绍在 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]);