document.querySelector("#id") 和 document.getElementById("id") 有什么区别吗？

[lisisi]

1、看到一些 document.querySelector("#id") 的用法，这个新方法比 document.getElementById("id") 有什么优势吗？
2、遇到 id 是变量，document.querySelector("#id") 怎么传 id 进来呢？

const foo = 'id_Name';
document.querySelector("#" + foo)

试了下，上面这样写没效的

[Danswerme]

1. querySelector 接收一个 css 选择器字符串，比如 "#root > .nav:nth-child(1)"，后者只能接收 id 名称。
2. 请检查你的代码

[ysc3839]

我觉得没有优势，因为要解析 css 选择器。

[Cbdy]

没有区别

[stillsilly]

有区别，不过我现在在外面没时间也没电脑，晚上回家没人回答的话我来解释一下

[lisisi]

@Danswerme document.getElementById("id") 中的 id 可以直接把变量传进来，document.querySelector("#id") 中的 id 并没有看到可用的传值方式。不知道你有没有明白我说的问题？

[littlepanzh]

现在的前端真幸福，不用考虑 IE6 7

[noreplay]

MDN 上有解释
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/getElementById

然而你的那个代码是有效的。
你可以打开控制台，试下下面的代码
const id="Wrapper"；
document.querySelector('#'+id)

[lxk11153]

@Danswerme #1 对于问题 1，求深入点，内部实现呢？仅比较 getElementById("id")和 querySelector("#id")，内部会不会掉用到同一处实现呢？你这回答的太表象了，肉眼都能识别啊
@lisisi #5 对于问题 2，字符串拼接传咯？有什么问题？

[429463267]

你说的是 jsoup api ？

[VDimos]

这还新方法，这 api 不都好久了吗

[netChen]

还是楼上那句话，现在前端真幸福，不用考虑 IE6

[autoxbc]

从一致性上说，应该只使用 querySelector，其他元素选择方法一律弃用

不要考虑性能问题，这是引擎设计者应该考虑的，可维护性才是重点

[lxk11153]

@noreplay #7 之前还没注意，querySelector 有 2 个
- Document.getElementById()
- Document.querySelector() https://developer.mozilla.org/zh-CN/docs/Web/API/Document
- Element.querySelector() https://developer.mozilla.org/zh-CN/docs/Web/API/Element

So: document.querySelector("#id")和 document.getElementById("id")内部会不会调用到同一处实现呢？

[vanishcode]

一个是静态一个是动态
前者是后者的引用所以要慢一些
不知道是不是记错了。。。欢迎老哥指正。。。

[Mutoo]

@lxk11153 当然是同一个，因为 Document 和 Element 的 querySelector() 都是继承自 ParentNode.querySelector()

[lxk11153]

@Mutoo #15 感谢，文档还是没有源码细。。
Talk is cheap show me the code.
Code never lies, comments sometimes do.

[zhlssg]

querySelector 和 querySelector 可以代替 className, tagName, id 这些旧的 api,好记也是优点吧

[zhlssg]

@zhlssg querySelectorAll

[secondwtq]

#8 难道是楼主的小号 ...

用 querySelector + 字符串拼接意味着可以 query 的不只 id ... 在输入的字符串后面可以加其他选择器

@ysc3839 选择器只用解析一遍，有缓存
但是用来做同样的工作，前者是要稍微慢一点（因为确实包了一层）

[geelaw]

区别在于前者里的 id 需要 escaping

https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html