querySelector和getElementById方法的比较
querySelector和getElementById方法都可以用来查找元素,但是它们之间存在一些区别:
- getElementById方法只能查找元素的id属性,而querySelector方法可以使用任何CSS选择器查找元素。
- querySelector方法返回一个Element对象或null对象,getElementById方法返回一个指定ID的Element对象或null对象。如果id不唯一,则querySelector只返回匹配选择器的第一个元素,而getElementById将返回第一个具有指定ID的元素。
- querySelector方法的性能可能会比getElementById方法差一些,因为它必须使用更复杂的算法来解析选择器字符串,而getElementById则直接使用HTML解析器内部查找元素。
因此,如果我们只需要通过id查找元素,则getElementById方法是更好的选择。如果需要使用CSS选择器或查找多个元素,则querySelector方法更为适合。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="list">
<li>html</li>
<li>css</li><li>javascript</li>
</ul>
<input type="button" id="btn" value="删除">
<script>
window.onload = function (){
let btn = document.getElementById('btn');
btn.onclick = function (){
let flther =document.querySelector('#list');
let chi =document.querySelectorAll('#list li');
//从下往上删
flther.removeChild(chi[chi.length-1]);
//删除所有
// flther.remove(chi)
}
}
</script>
</body>
</html>