Are JQuery selectors safer than DOM properties?

Question

These 2 expressions do the same thing but which one is safer or even more efficient?

var indexedCellValue = selectedCell.srcElement.parentElement.cells[index].innerText;

var indexedCellValue = $(selectedCell.srcElement).parent('tr').get(0).cells[index].innerText;

(Both a getting a cell's, selectedCell, parent row and indexing into a column on that parent row.)

innerText actually works in Chrome. Here's an alterative using the text() jquery function $($(selectedCell.srcElement).parent('tr').get(0).cells[index]).text(); — learnerplates, Feb 01 '13 at 13:23
`.cells` is also non-standard. If you have jQuery, why not use `$(...).siblings().addBack().eq(index).text()`. — pimvdb, Feb 01 '13 at 13:46
@pimvdb: I can't see how [this spec](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-6986576) is not a standard — Bergi, Feb 01 '13 at 14:30
Is `selectedCell` an event object or how does it have a `srcElement` property? — Bergi, Feb 01 '13 at 14:33

score 4 · Accepted Answer · answered Feb 01 '13 at 12:49

4

Pure JavaScript is gonna be always faster than jQuery, but with jQuery you ensure that the code is going to work in most of the browsers.

answered Feb 01 '13 at 12:49

davids

6,259
3
29
50

is there a better way to get the parent etc in JQuery? using the get(0) seems to defeat the purpose of using JQuery to me. – learnerplates Feb 01 '13 at 13:25
You can avoid getting the parent by using `.siblings(':first')` – David Barker Feb 01 '13 at 13:52

score 1 · Answer 2 · edited May 23 '17 at 12:04

With jQuery, you're only selecting elements which has a tr parent. I also think that the pure javascript version would work on firefox 9+, but not older ones.

Under the hood, If you take a look to jQuery's source code, at the definition of parent() (line 5666, as of version 1.9.0):

parent: function( elem ) {
    var parent = elem.parentNode;
    return parent && parent.nodeType !== 11 ? parent : null;
},

You see that it doesn't use parentElement, but parentNode, that is more supported by browsers (primarily not by old versions of Firefox, in fact it wasn't supported by it prior to version 9, if you want to know the differences of the two, see this answer: Difference between DOM parentNode and parentElement).

It also check if the node is a DOCUMENT_FRAGMENT_NODE (frankly I don't know why it does, if anyone knows I'd be interested).

On the 2.0 development branch, which doesn't support old browsers (thanks pimvdb), they switched to parentElement (Reduce traversing module - commit):

parent: function( elem ) {
    return elem.parentElement;
},

Those commits are for jQuery 2.0 which won't support IE <= 8 and other old browsers. — pimvdb, Feb 01 '13 at 13:53

score 0 · Answer 3 · answered Feb 01 '13 at 15:17

0

here's an optimized JQuery solution

var indexedCellValue = $($(selectedCell.srcElement).parent('tr').children()[index]).text();

not using parentElement, cells or innerText.

thanks for the help.

answered Feb 01 '13 at 15:17

learnerplates

4,257
5
33
42

Are JQuery selectors safer than DOM properties?

3 Answers3