前言
最近在用getElementsByTagName获取标签内容时，发现与getElementById/ClassName等不同，
直接document.getElementsByTagName('').id修改页面中所有标签的id时没有反应...
console.log输出一下，发现输出的是[li,li,li,li,li]这种形式的伪数组(集合)
原理
这里既然是以集合的方式输出，就可以用逐项穷举的方式将其中的项挨个执行。
首先储存这个集合:*这里以li为例
var lis = document.getElementsByTagName('li')
for(var i = 0;
i < lis.length;
i ++){
console.log(lis[i])}
应用
给页面内所有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的最后一篇文章了吧
新年快乐。