В чем разница между объектом jQuery и элементом DOM? Разница между .get () и .index ()?

Я привел к этому вопросу, пытаясь выяснить разницу между .get() и .index(), я просмотрел API jQuery и до сих пор не понимаю, в чем разница между ними, может быть, я не понимаю терминологию?

В чем разница между объектом jQuery и элементом DOM? И являются ли элемент DOM и узел DOM одним и тем же? Являются ли они просто <div> и <a> и т. Д. такое узел DOM /элемент DOM - это просто HTML-тег?

РЕДАКТИРОВАТЬ: а DOM - это не просто структура страницы? <html><body>etc.</body></html>

10 голосов | спросил android.nick 4 PM00000050000002531 2011, 17:21:25

4 ответа


0

Метод get используется для доступа к элементам DOM в объекте jQuery:

var allDivs = $("div").get();

В этом примере allDivs будет массивом, содержащим все совпадающие элементы (в этом случае он будет содержать каждый div в DOM).

Метод index возвращает целое число, которое сообщает вам позицию выбранного элемента относительно его родных элементов. Рассмотрим следующий HTML-код:

<ul>
    <li>1</li>
    <li id="second">2</li>
    <li>3</li>
</ul>

И следующий jQuery:

console.log($("#second").index()) //Prints "1"

Что касается вашего другого вопроса, узел DOM - это почти что угодно в DOM. Элементы - это типы узлов (тип 1). У вас также есть, например, текстовые узлы (тип 3). Элемент - это практически любой тег.

Чтобы сделать это более понятным, рассмотрим следующий HTML-код:

<div id="example">
    Some text
    <div>Another div</div>
    <!--A comment-->
</div>

И следующий JS:

var div = $("#example").get(0);
for(var i = 0; i < div.childNodes.length; i++) {
   console.log(div.childNodes[i].nodeType);   
}

Это распечатает:

3 - Text node ("Some text")
1 - Element node (div)
3 - Text node ("Another div")
8 - Comment node (<!-- -->)
3 - Text node ("A comment")

Список типов узлов можно найти здесь . Отличное введение в то, что такое DOM, можно найти в этой статье MDN .

ответил James Allardice 4 PM00000050000001031 2011, 17:38:10
0

Один из способов, которым мне нравилось смотреть на это, когда я начинал с jQuery, это что-то вроде этого (и да, я знаю, что все не совсем правильно, но они работали как свободные аналогии):

DOM-элементы - это узлы в вашем HTML-документе, которые вы обычно получаете с ванильным Javascript. Что-то вроде var foo = document.getElementById('bar') дает вам необработанный элемент DOM.

Объекты-оболочки jQuery (для большей части разработки jQuery) - это, по сути, совершенно новый объект, содержащий элемент DOM. И это в основном, контейнер. Это то, что вы получаете с чем-то вроде $('#bar'), и это то же самое, что вы получаете, добавляя элемент DOM вроде $(foo). Они включают различные функциональные возможности jQuery в ваших объектах DOM - вещи, которых у них обычно не было бы, если бы они были простыми объектами DOM.

Основываясь на этом, разница между .get() и .index() довольно просто.

.get(n) возвращает DOM nth элемент в объекте оболочки jQuery. Что-то вроде $('input').get(0) дает вам первое <input> элемент в DOM, как если бы вы вызвали document.getElementById() для него (или что-то подобное). .eq(n) делает что-то подобное, но вместо этого возвращает объект-обертку jQuery, содержащий элемент DOM.

.index() просто показывает, какую позицию занимает конкретный элемент в объекте-обертке jQuery. Это очень похоже на то, как вы ожидаете, что они будут работать в массивах и других коллекциях.

ответил Richard Neil Ilagan 4 PM00000050000004531 2011, 17:55:45
0

Я знаю, что это не объяснение как таковое - другие проделали довольно хорошую работу здесь. Но я думаю, что визуальные эффекты могут рассказать вам гораздо больше.

Получите Safari /Chrome (с их меню для разработчиков) или Firefox с firebug и посмотрите, как эти инструменты веб-программирования визуально представляют то, о чем вы хотите знать.

Например, DOM «Объектная модель документа» говорит все это, но вы не поймете отношения между объектами (элементами) в документе (html-страница), если не будете рассматривать это как иерархию. Эти toold позволяют вам перемещаться по этой иерархии разумным визуальным способом.

Кроме того, они также содержат инструменты оценки, которые позволяют вам вводить имя объекта javascript, чтобы увидеть, что он содержит.

Поэкспериментировав с этим, вы получите представление о том, что является объектом документа и объектом javascript.

Однако, чтобы ответить на вопрос, .get() получает элемент и позволяет вам напрямую взаимодействовать с ним без программной навигации по иерархии DOM, в то время как .index() просто находит индекс своей позиции в иерархии

ответил T9b 4 PM00000050000000531 2011, 17:59:05
0

На мой взгляд, код

$('div').get()

- это объект Jquery с параметром, который является div-селектором. Для этого объекта вызывается get(). Вы также можете рассматривать параметр как аргумент constructor (как в объектно-ориентированных языках), поскольку создается новый объект.

ответил Timo 21 +04002013-10-21T23:36:27+04:00312013bEurope/MoscowMon, 21 Oct 2013 23:36:27 +0400 2013, 23:36:27

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132