Faster way to select an element with a given id

问题

I have a question. Let's say we have the following html tag:

<div id='foo'>I am a div</div>

Τhis div exists on the dom(it is not generated by javascript)

If I want to use this div in javascript many times which is the better way to do it?

store it in a variable like this:

var d = $("#foo")
or call it every time with jquery?: $("#foo").methodName()

Which method does involve less dom traversal?

回答1:

The fastest way is:

document.getElementById("foo");

Setting this to a variable for reuse will prevent the need to find it over and over again, so yes that is the way to go.

if you want to make a jQuery object out of it:

var fooDiv = document.getElementById("demo");
var $fooDiv = $(fooDiv);

回答2:

Creating a reference to the element will always be at least as fast as selecting it (be it with jQuery selector $() or document.getElement...).

That said, I would go for var d = if you are going to use it several times in a function or a limited scope.

Not only you will have the reference saved, but also it will be shorter and more readable.

Benchmarks:

http://jsbench.github.io/#3621d3b9b571cc3640fa988b42c5c873 (you might have to run it twice; first time it'll inject JQuery from CDN)

Saving element reference is by far the fastest solution.

A x10 requested element gets the following results (the more ops/sec the better):

[no var] document.getElementById: 3,206,218 ops/sec
[var] document.getElementById: 34,382,745 ops/sec

[no var] $(): 148,649 ops/sec
[var] $(): 1,390,771 ops/sec

That's about x10 times faster with either JavaScript getElementById or JQuery selector

回答3:

It depends really on how you want to use your jquery DOM handle. Consider a scenario where i want to work with a structure as such

<section>
  <div id="t1"></div>
  <div id="t2"></div>
  <div id="t3"></div>
</section>

the fastest way i know to access #t2 would be

var d = $('#t2');

then d can be used later as you wish. But consider a case where you need to use the <section> and a div in your script, the fastest way to do that would be

var secD = $('section').eq(0); 
//assuming it comes first in the dom, 
//better still put an id on it for easy access.
var t1D = secD.find('#t1');
//this eliminates the need for jquery to do global lookups and reduces the scope of search

回答4:

Considering this element in the DOM

<div id='foo'>I am a div</div>

Using the jQuery() or $() function will check the DOM and return a collection of matched elements either found in the DOM and create an object with it.

If you use this object more than once, it would be wiser to store it and just reuse it. But now, as j08691 said, you could run some tests and see what's more effective. As these operations are super fast, you should try to do it with a loop for 10000 times and console.log the time (difference between time at start and time at end — new Date())

I think that the jQuery function is super optimised and fast so you won't be able too feel a difference under a very high number of repetitions. There are way more things to optimise in web such as images and animations.

In a nutshell, it is microscopic, but a reference should be faster than a method that creates an object.

Something you should keep in mind during the tests would be the size of the DOM. See if you only have one div in the body or a thousand would influence the results..

回答5:

I this the best way in jquery is like

<div class="div_class mus test var instru" id="div_id" style="display: block;">this is test div</div>

let div_id = $('#div_id').attr('class');
$('#result').html(div_id);

来源：https://stackoverflow.com/questions/42727781/faster-way-to-select-an-element-with-a-given-id

标签

javascript

jquery

html

dom

dom-traversal