1. 参数不同
2.getElementByClassName()和getElementByTagName()可以动态获取元素(页面上增加或者删除元素时,获取的元素个数可以改变,而querySelectorAll做不到此效果:
<ul id="list">
<li class="lis">old-li</li>
<li class="lis">old-li</li>
<li class="lis">old-li</li>
<li class="lis">old-li</li>
<li class="lis">old-li</li>
</ul>
<script>
//用getElementsByTagName()获取原所有li元素
var lis_1 = document.getElementsByTagName('li');
console.log(lis_1); //获得并打印出5个原有的li
//增加5个新的li元素
var uls = document.getElementById('list');
for (var i = 0; i < 5; i++) {
var new_li = document.createElement('li');
new_li.className = 'lis';
new_li.innerHTML = 'new-li';
uls.appendChild(new_li);
}
console.log(uls);
console.log(lis_1); //10个li 都能打印出来
//换成用querySelectorAll()获取原所有li元素
var lis_1 = document.querySelectorAll('li');
console.log(lis_1); 获得并打印出5个原有的li
//增加5个新的li元素
var uls = document.getElementById('list');
for (var i = 0; i < 5; i++) {
var new_li = document.createElement('li');
new_li.className = 'lis';
new_li.innerHTML = 'new-li';
uls.appendChild(new_li);
}
console.log(uls);
console.log(lis_1); //还是只能打印出原有的5个li
</script>