LOADING...
JavaScript 遍历 getElementsByTagName 获取的伪数组的教程。阐述了如何处理 getElementsByTagName 返回的 HTMLCollection 集合，通过 for 循环逐项操作 DOM 元素，解决直接修改集合属性无效的问题，并提供了一个批量为 span 标签添加 CSS 动画特效的实际应用案例。
最近在用 getElementsByTagName 获取标签内容时，发现与 getElementById/ClassName 等不同，
直接 document.getElementsByTagName('').id 修改页面中所有标签的 id 时没有反应...
console.log 输出一下，发现输出的是li,li,li,li,li这种形式的伪数组(集合)
这里既然是以集合的方式输出，就可以用逐项穷举的方式将其中的项挨个执行。
首先储存这个集合: 这里以 li 为例
然后用 for 循环递归:
这里直接输出了，在这个时候就可以用 document.等
给页面内所有 span 加入加载特效：
最近忙着升级主题，但是确实没有时间...这坑要慢慢填
这是 2022 的第一篇文章，但估计之后很长一段时间内也不会更多少博客，可能这也是 2022 的最后一篇文章了吧
新年快乐。
var lis = document.getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}/* 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";
}
}
评论