css - JavaScript DOM操作, 啥时候同步更新?
本文介绍了css - JavaScript DOM操作, 啥时候同步更新?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<ul>
<li class="red">哈哈0</li>
<li class="red">哈哈1</li>
<li class="red">哈哈2</li>
<li class="red">哈哈3</li>
<li class="red">哈哈4</li>
</ul>
<script>
var liArr = document.getElementsByClassName('red');//一绿一红
// var liArr = document.querySelectorAll('.red');//全绿
for (var i = 0; i < liArr.length; i++) {
liArr[i].className = 'green';
}
</script>
</body>
</html>感谢各位指点,找到问题答案了.
后面是一个小结:
https://icbd.github.io/wiki/w...
解决方案
代码自上而下执行，照你的代码是一开始className是red，执行到for循环的时候，更新className为green。
写成这样你就明白了
for (var i = 0, len = liArr.length; i < len; i++) {
console.log('start:'+ JSON.stringify(liArr));
liArr[0].className = 'green'; // 每次都改变第一个元素
console.log('over:'+ JSON.stringify(liArr));
}这是document.getElementsByClassName和document.querySelectorAll的返回值不同造成的，W3C规定：前者的返回值是一个动态的 Node List，后者返回的是一个静态的 Node List，类似于快照。https://www.zhihu.com/questio...
这篇关于css - JavaScript DOM操作, 啥时候同步更新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
