javascript - JQuery 选择器比 DOM 属性更安全吗？

Question

这两个表达式做同样的事情，但哪一个更安全或更有效？

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

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

（获取单元格、选定单元格、父行和索引到该父行上的列。）

Answer 1

纯 JavaScript 总是比 jQuery 快，但是使用 jQuery，您可以确保代码在大多数浏览器中都能正常工作。

Answer 2

使用 jQuery，您只选择具有tr父级的元素。我还认为纯 javascript 版本适用于 firefox 9+，但不适用于较旧的版本。

在幕后，如果你看一下 jQuery 的源代码，在parent()（第 5666 行，从版本 1.9.0 开始）的定义：

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

您会看到它不使用parentElement，但是parentNode，浏览器更支持它（主要不是旧版本的 Firefox，实际上在版本 9 之前它不支持它，如果您想知道两者的区别，请参阅此答案：DOM parentNode 和 parentElement 之间的区别）。

它还检查节点是否为 a DOCUMENT_FRAGMENT_NODE（坦率地说，我不知道为什么会这样，如果有人知道我会感兴趣的话）。

在不支持旧浏览器的 2.0 开发分支上（感谢 pimvdb），他们切换到 parentElement（减少遍历模块 - 提交）：

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

Answer 3

这是一个优化的 JQuery 解决方案

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

不使用 parentElement、单元格或 innerText。

谢谢您的帮助。