Разъяснение JQuery DOM Traversal

Question

Я не уверен, что полностью понимаю документы jQuery, когда они говорят про обход DOM. Действительно ли это означает прохождение копии DOM в объекте-обертке? Мне кажется, что фактический обход выполняется при выборе элементов, тогда как использование таких методов, как .get () и .next () действительно пересекает копию DOM. Я прав в этом, или я что-то упустил?

Заранее спасибо!

Answer 1

Функция jQuery возвращает объект.Он имеет числовые свойства, значения которых ссылаются на элементы DOM, а не на копии.Поэтому, учитывая следующее:

<p id="p0">p0</p>
<p id="p1">p1</p>

<script>
var paragraphs = $('p');
</script>

абзацы будут объектом, у которого есть свойство '0', значением которого является ссылка на элемент p с идентификатором p0, и свойством '1', которое является ссылкой наэлемент p с идентификатором p1.Вы можете сослаться на первый p, используя:

paragraphs['0'];

jQuery помогает с «обходом DOM», поскольку вы можете использовать селектор (или несколько селекторов) для «сбора» элементов как свойств объекта, а затем выполнить итерациюнад числовыми свойствами этого объекта и что-то с ними делать.Таким образом, чтобы добавить класс к элементам p выше, вы можете сделать:

paragraphs.each(function(i,el){$(el).addClass('newClass')})

Эквивалент в простом javascript будет выглядеть так:

var paragraphs = document.getElementsByTagName('p');
var i = paragraphs.length;
while (i--) {
    myLib.addClass(paragraphs[i], 'newClass');
}

Где myLib.addClass - простая функция длядобавить класс в свойство className.Если функция addClass немного умнее, чтобы она могла принимать массив (или похожий на массив объект) ссылок на элементы, тогда версия POJS будет выглядеть следующим образом:

myLib.addClass(document.getElementsByTagName('p'), 'newClass');

Итак, создание эквивалента ad hoc Возможность "обхода DOM" не особенно сложна.