getElementById vs $（'＃element'）

Question

在今天之前，我认为getElementById和$（'＃element'）完成了同样的事情。但是，当我尝试以下内容时：

// Assuming I have jQuery imported already 

var $scrollHolder = $('#element'); 
var scrollDiv = document.getElementById("element"); 

scrollDiv.scrollTop = scrollDiv.scrollHeight; 
//$scrollHolder.scrollTop = $scrollHolder.scrollHeight; 

注释行不起作用，未注释行也没有。上面列出的两种方法是否返回不同的东西，或者我的代码中是否有错误？评论行应该工作吗？我很困惑，并会感谢洞察力。谢谢。

Answer 1

你必须从jQuery对象得到的DOM元素

$scrollHolder[0].scrollTop = $scrollHolder[0].scrollHeight; 

或

.get(index)

$scrollHolder.get(0).scrollTop = $scrollHolder.get(0).scrollHeight; 

---

$('#element');是jQuery对象。它创建一个匹配对象的数组。但是在这里你有id选择器，所以你只能得到一个Object，你可以通过使用数组索引[index]或使用.get(index)来引用Native DOM对象。

document.getElementById("element");是土生土长的DOM对象

---

FYI

做的jQuery的方式。

.scrollTop()

.prop()

$scrollHolder.scrollTop($scrollHolder.prop('scrollHeight')); 

Answer 2

$('#id)不具有内在的DOM属性和document.getElementById('id')回报你拥有scrollTop物业的原生DOM元素的jQuery的回报对象。

请注意，您可以将任何DOM元素作为jquery对象包装在$()中，并且您可以通过访问索引将jquery对象变为DOM元素。

Answer 3

的其他解决方案是使用正确的jQuery的包装为：

$scrollHolder.scrollTop($scrollHolder.scrollHeight); 

Answer 4

jQuery选择方法总是返回元件的阵列。 所以评论行不会返回你所期望的。