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

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

10 голосов
/ 04 августа 2011

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

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

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

Ответы [ 7 ]

15 голосов
/ 04 августа 2011

HTML! = DOM! = Javascript! = JQuery, но все они тесно связаны.

Браузер получает HTML-документ с веб-сервера, который представляет собой просто текст. Браузер переходит к синтаксическому анализу этого текста во внутреннюю структуру, которую он может фактически использовать для визуализации страницы визуально. DOM представляет внутреннюю структуру HTML-документа в браузере. Javascript (или другие методы) можно использовать для манипулирования этим DOM, который, в свою очередь, изменяет визуальный рендеринг страницы. Узел DOM и элемент DOM - это просто два имени для одной и той же вещи. Элемент DOM представляет собой визуальный или функциональный элемент на странице, созданный из исходного документа HTML.

jQuery теперь является библиотекой Javascript, которая упрощает манипулирование DOM по сравнению с чистым Javascript, предлагая ряд удобных ярлыков. Объект jQuery - это объект Javascript, который может иметь или не иметь никакого отношения к DOM (обычно это так). Объект jQuery - это удобная оболочка вокруг элемента DOM в Javascript, который является методом для управления DOM, представляющим страницу, созданную из файла HTML.

Надеюсь, это поможет. : О)

13 голосов
/ 04 августа 2011

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

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

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

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

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

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

10 голосов
/ 04 августа 2011

Метод 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

1 голос
/ 04 августа 2011

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

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

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

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

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

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

0 голосов
/ 03 августа 2016

DOM - это не структура страницы, как показано ниже 

 <html><body>etc.</body></html>

DOM - это только представление страницы
Говоря в общих чертах, DOM - это объект-Ориентированный язык программирования, который позволяет вам получить доступ и манипулировать на фактическом документе.

document.getElementById("a") 
/* here document is an object and getElementById is an method of it */

Точнее говоря, DOM - это интерфейс, а не язык программирования, и он не зависит от языка.Это было включено в Javascript.

0 голосов
/ 20 июня 2014

DOM-элемент - это текст, отображаемый браузером. JQuery объект, который вы получили с помощью этого кода var object = {} console.log (объект);

0 голосов
/ 21 октября 2013

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

$('div').get()

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...