Difference between querySelector() and querySelectorAll()[0]

空扰寡人 提交于 2020-11-29 08:41:11

问题


I ran across some JS code using the following to select the first of multiple nodes.

querySelectorAll()[0]

Isn't the following doing the exact same thing?

querySelector()

Is there an advantage of using querySelectorAll()[0]?


回答1:


Both expressions will return the exact same result.

The only difference is the querySelectorAll()[0] will first find all the items that match the selector and then index the first item. Whereas querySelector() will "short circuit" once it finds the first element.

So, theoretically, querySelector() might be marginally more efficient than querySelectorAll()[0]. However, their behaviour is identical.




回答2:


They both result in the same thing, but they take different routes (literally and figuratively) to get there. In your example, .querySelector() is the correct approach because .querySelectorAll() will incur more of a performance hit by scanning the entire element that the method is called on when it only needs to use the first match.

The advantage to .querySelectorAll() is that you can cache a reference to the entire set of matched elements and then index them or loop them as needed later. So, if there was a need for the first matched element, but the entire set was going to be needed somewhere else in the code, then .querySelectorAll(<<selector>>)[0] would make sense.



来源:https://stackoverflow.com/questions/46868388/difference-between-queryselector-and-queryselectorall0

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!