JS递归遍历伪数组

js-recursive-iteration-pseudo-array

2022年02月06日 16点22分24秒 • 技术 • 1326字 • ---

前言

最近在用 getElementsByTagName 获取标签内容时，发现与 getElementById/ClassName 等不同，
直接 document.getElementsByTagName('').id 修改页面中所有标签的 id 时没有反应...
console.log 输出一下，发现输出的是[li,li,li,li,li]这种形式的伪数组(集合)

原理

这里既然是以集合的方式输出，就可以用逐项穷举的方式将其中的项挨个执行。
首先储存这个集合: *这里以 li 为例

var lis = document.getElementsByTagName("li");

然后用 for 循环递归:

for (var i = 0; i < lis.length; i++) {
  console.log(lis[i]);
}

这里直接输出了，在这个时候就可以用 document.等

应用

给页面内所有 span 加入加载特效：

/* CSS */
span {
    position: relative;
    animation-name: startloadingspan;
    animation-duration: 0.8s;
}

@keyframes startloadingspan {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

span#active {
    position: relative;
    animation-name: endloadingspan;
    animation-duration: 0.8s
    animation-fill-mode: forwards;
}

@keyframes endloadingspan {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


//JavaScript
window.onbeforeunload = function (e) {
    document.getElementById("text").id = "active";
    var spans = document.getElementsByTagName('span');
    for (var i = 0;i < spans.length;i ++){
       (spans\[i\]).id = "active";
    }
}