Saber 酱的抱枕

Javascript 的 getElementById 通过 id 来选择一个元素，而 querySelector 更加灵活，不局限于 id。那么在实际使用上有什么区别呢？

1.getElementById 只能在 document 节点上使用。

下面是一个有嵌套的 HTML 节点：

<div id="father">
	<div id="child"></div>
</div>
<script>
	// getElementById 只能以 document 开头
	let father = document.getElementById('father');
	let father2 = document.body.getElementById('father');
	let child = father.getElementById('child');

	// querySelector 没问题
	let father3 = document.querySelector('#father');
	let father4 = document.body.querySelector('#father');
	let child2 = father2.querySelector('#child');
</script>

第一次看见这个错误我是懵逼的，getElementById 不就是对 DOM 元素使用的吗？但实际上它只能对 document 节点使用。连 document.body 也不行。

而 querySelector 就很灵活了，可以先选择一个节点，然后在这个节点上继续使用 querySelector。

最近我把一些用 querySelector 选择 id 元素的代码批量替换成了 getElementById，结果有个地方就出现了上面的情况，导致出错。

从灵活性上来看， querySelector 更好用。

2.getElementById 可以选择数字开头的 id 元素。

用数字开头做 id 标识不是个好主意，但又是也会出现这样的情况，比如用 GUID 做 id：

<div id="5d6924ac-69ec-4014-9a57-4b5525f9c4e4"></div>
<script>
	// getElementById 没问题
	document.getElementById('5d6924ac-69ec-4014-9a57-4b5525f9c4e4');
	// querySelector 不可以
	document.querySelector('#5d6924ac-69ec-4014-9a57-4b5525f9c4e4');
</script>

这时候轮到 querySelector 出错了，因为 querySelector 使用的是 css 选择器，css 规则不允许用数字开头来设置标签名、id、class 名。

虽然 getElementById 可以处理这种情况，但最好还是避免这种情况的出现。

如果不考虑第 2 点因素，那么 getElementById 就只剩下性能优势了。一般来说页面里要操作的 id 不会那么多，所以性能优势也不那么明显了。还是尽量用 querySelector 比较好。

getElementById 和 querySelector 的区别