选择元素| Javascript vs jQuery

Question

Whats the difference between an element selected by Javascript and the same element selected with jQuery?

I ran into this problem, trying to select a Html5 data attribute from an element with jQuery, the dataset would return undefined even though it was clearly set. Selecting the element with regular javascript works perfectly fine however. So what behind the scenes is different that stops this example from working.

 var jsSelect = document.getElementById("jsSelect"); alert(jsSelect.dataset.name); var jqSelect = $("#jsSelect"); alert(jqSelect.dataset.name); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="jsSelect" data-name="Javascript"></div> 

Answer 1

Whats the difference between an element selected by Javascript and the same element selected with jQuery?

There's no difference in the element , but jQuery gives you back the element wrapped in a jQuery object, whereas the DOM gives you a reference to the element itself. jQuery objects are sets of elements (since it lets you select more than one and treat them as a set).

To get the element itself from the jQuery object, you can index into it like an array:

var rawElement = jqSelect[0];
alert(rawElement.dataset.name);

 var jsSelect = document.getElementById("jsSelect"); snippet.log(jsSelect.dataset.name); var jqSelect = $("#jsSelect"); var rawElement = jqSelect[0]; snippet.log(rawElement.dataset.name); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="jsSelect" data-name="Javascript"></div> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

To deal with data-* attributes, you can also use jQuery's attr function:

alert(jqSelect.attr("data-name"));

 var jsSelect = document.getElementById("jsSelect"); snippet.log(jsSelect.dataset.name); var jqSelect = $("#jsSelect"); snippet.log(jqSelect.attr("data-name")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="jsSelect" data-name="Javascript"></div> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

You can use jQuery's data function, but it's important to read the documentation — data is not just a convenience wrapper for dataset . data manages a completely separate cache of data that is only initialized from data-* attributes (it doesn't update them).

 var jsSelect = document.getElementById("jsSelect"); snippet.log(jsSelect.dataset.name); var jqSelect = $("#jsSelect"); snippet.log(jqSelect.data("name")); // Note that `data` doesn't change the attribute: jqSelect.data("name", "new name"); snippet.log("Attribute after changing with data: " + jqSelect.attr("data-name")); // But you can retrieve the updated info via `data` snippet.log("Data value after changing with data: " + jqSelect.data("name")); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="jsSelect" data-name="Javascript"></div> <!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> <script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 

You may be wondering why, if the jQuery object is a set of elements, you can use attr to get the data-name attribute from an element — which element does it get the attribute from? jQuery's accessor functions like attr are assymetrical: If you're retrieving information, they retrieve it from the first element in the set; if you're setting information ( jqSelect.attr("data-name", "newvalue") ), they set it on all of the elements in the set. Which sounds crazy, but works surprisingly well.

Answer 2

In case of jQuery jqSelect is a jQuery object so it doesn't have the dataset property, but you can use the data api

 var log = (function() { var $log = $('#log'); return function(msg) { $('<p/>', { text: msg }).appendTo($log) } })(); var jsSelect = document.getElementById("jsSelect"); log('native api:' + jsSelect.dataset.name); var jqSelect = $("#jsSelect"); log('jquery api:' + jqSelect.data('name')); var jqSelect = $("#jsSelect"); log('Using prop:' + jqSelect.prop('dataset').name); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="jsSelect" data-name="Javascript"></div> <div id="log"></div>