前言
最近在用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的最后一篇文章了吧
新年快乐。