JS递归遍历伪数组

js-recursive-iteration-pseudo-array

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

javascript

前言

最近在用 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";
    }
}

后言

最近忙着升级主题，但是确实没有时间...这坑要慢慢填
这是 2022 的第一篇文章，但估计之后很长一段时间内也不会更多少博客，可能这也是 2022 的最后一篇文章了吧
新年快乐。