saber酱的抱枕

努力变强

01/9
07:22
学习

getElementById 和 querySelector 的区别

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 和 querySelector 的区别

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

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

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

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

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

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

<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>

getElementById 和 querySelector 的区别

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

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


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

getElementById 和 querySelector 的区别