Почему .scrollHeight работает так, как он делает?

Question

$('#div1').scrollTop($('#div1')[0].scrollHeight) 

Я имею в виду, почему мы должны указать [0] после выбранного элемента. Что это значит? Кажется, что это не означает, что дети элемента div, так как [1] ​​не определено, хотя детей больше. И если я предупреждаю (('# div1') [0], он говорит [object HTMLDivElement]. Я никогда не видел такого индексации в jQuery. Поэтому я хотел бы знать, что указывает этот индексный ноль и в каких других случаях он используется? Буду признателен за любую помощь.

Answer 1

.scrollHeightявляется не метод а JQuery в: http://api.jquery.com/scrollHeight/
Element.scrollHeight является метод JavaScript, который возвращает

высоту содержимого элемента, включая содержимое не видно на экран из-за переполнения

Благодаря вы отдаете ваш селектор "#div1" на объект JQuery $( ),
он будет возвращать коллекцию объектов в массива из HTMLElements.

$('#div1') // [object Object] { 0: [object HTMLDivElement] { ...obj props...}} 
       ^--Object Array ^--key 0 ^--Element Obj. ^--Obj. properties 

поэтому

[object Object].scrollHeight // undefined 

но если вы дойдете от этого массиву [0] я ключа представляющего HTMLDivElement:

[object Object][0].scrollHeight // 800 

у вас есть, чем доступна необходимые свойства объекта {...obj props...} для этого конкретного элемента, где scrollHeight - один из них.

Резюмируя,

(JS):

var el = document.getElementById("div1"); // HTMLDivElement 
var sh = el.scrollHeight;     // 800 

(JQuery)

var el = $("#div1");      // Object Array (note the difference) 
var sh = el.scrollHeight;     // undefined 
var sh = el[0].scrollHeight;    // 800 

Чтобы получить обычный JQuery такой элемент в scrollHeight в ^{(v.1.6 +)} вы можете сделать

var sh = $("#div1").prop('scrollHeight'); // 800