jQuery изнутри — манипуляции с DOM

Каникулы продолжаются и мы воспользуемся этим для получения новых знаний, укрепления и расширения старых.

Долго думал, что же разобрать дальше — атрибуты, свойства и данные или манипуляцию с DOM. И вроде бы сначала хорошо было бы дать первую тему, но в комментариях к предыдущему топику уже обратили внимание на одну особенность работы со скриптами, которая как раз относится ко второй теме, так что не будем тянуть и начнем именно с нее. Заодно прошу прощения у тех, кто увидел начало статьи, которое я по ошибке опубликовал в процессе написания.

Итак, сегодня мы продолжим серию копаний в исходниках jQuery под номером 1.8.3 (стабильная версия на момент написания статьи). Общее представление о jQuery мы уже получили, парсить html — тоже. Пора то, что мы распарсили куда-нибудь вставить.

Практически любые работы с DOM идут в jQuery через великую и ужасную функцию domManip.

domManip

Цель этой служебной функции — выполнить определенный callback к каждому элементу, но при этом выполнить еще кучу дополнительной работы.

Дабы не рассказывать о domManip безсвязно, вот весь код функции append:

	append: function() { 		return this.domManip(arguments, true, function( elem ) { 			if ( this.nodeType === 1 || this.nodeType === 11 ) { 				this.appendChild( elem ); 			} 		}); 	},

Если быть кратким, то в каждый элемент (если он — обычный ELEMENT_NODE или DOCUMENT_FRAGMENT_NODE) нашего набора в текущем jQuery-объекте будет через обычный appendChild добавлен элемент из параметров к функции.

Внутри функции строится фрагмент (знакомами нам по предыдущей статье функциями buildFragment и clean), при этом внутри clean дополнительно происходит сбор всех скриптов, которые в результирующий фрагмент не попадут, а вернутся в отдельном массиве.

Дальше для каждого элемента в нашем jQuery-объекте в его контексте выполнится тот самый callback, на вход которому будет подан клонированный фрагмент, который мы получили выше.

Функция как параметр

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

Бесполезный пример в студию:

<span class="user" data-id="15">Игорь</span> <span class="user" data-id="10">Дарья</span>  <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script>     $('span.user').prepend( function(idx, html) {         // попутно в функцию передаются порядковый номер и содержимое тега,         // к которому применяется функция         console.log(idx, html);          // о $.data мы поговорим в следующей статье         return $(this).data('id') + ': ';     } ); </script>

В этом случае в начало каждого span с классом «user» будет добавлена текстовая нода, в содержимом которой будет идентификатор пользователя.

Скрипты

Что же со скриптами, для чего мы собирали их отдельно? Каждый скрипт будет предварительно загружен (если это script с тегом src) и выполнен обычным eval. В DOM такие скрипты не попадут.

$('<div>').append('<script>alert(1);</script>')

Это пример из комментариев к предыдущему топику (спасибо alisey). Обратите внимание что созданный div висит в воздухе и в документе его нет, однако скрипт в этом случае все равно будет выполнен.

Тут же кроется и подвох со вставкой скриптов с атрибутом src. То же самое с jQuery.getScript и jQuery.ajax с типом script (все это — аналоги). По-умолчанию jQuery считает что такое не нужно кешировать и к урлу при загрузке добавляет параметр с текущим unix-timestamp. В этом случае если браузер захочет закешировать ответ от сервера (все зависит от заголовков), то закеширует его по урлу, где будет timestamp, что в некоторых (скорее даже в большинстве) случаев — не приемлемо.

В этом случае такой код — плохой, не делайте так:

$('<script>', {      'src': 'http://code.jquery.com/jquery-1.8.3.min.js' } ).appendTo(document.body);

А вот так — можно, да здравствует нативный Javascript:

var     scriptElement = document.createElement('script');  scriptElement.setAttribute('src', 'http://code.jquery.com/jquery-1.8.3.min.js');  document.body.appendChild(scriptElement);

jQuery.empty и jQuery.remove

Эти функции работают мимо domManip и занимаются удалением элементов из дерева через обычный removeChild. jQuery.empty удаляет все вложенные элементы жертвы, а jQuery.remove удаляет только те ноды, которые подходят под селектор, указанный в параметре к вызову этой функции. Оба метода вызывают пока неизвестную нам функцию cleanData, работу которого мы затронем в следующей части.

jQuery.html

Эта функция в случае, если при вызове не указано ни одного параметра, возвращает нам содержимое нашего тега, значение его свойства innerHTML, из которого будут предварительно удалены служебные атрибуты атрибуты jQuery.

В случае, если же указан параметр, во все ноды нашего jQuery-объекта библиотека в большинстве случаев попробует задать свойство innerHTML напрямую, иначе — сначала очистит содержимое нашего тега с помощью empty, а затем добавит в него код с помощью append.

Немного алиасов напоследок

appendTo, prependTo, insertBefore, insertAfter, replaceAll. Что общего между ними? Они, по сути, являются алиасами к другим функциям, просто меняют местами то, к чему применяют функцию, с ее параметром. Говоря проще, происходит что-то вроде этого:

$('<span>').appendTo(document.body) => $(document.body).append('<span>') $('span.user').insertAfter('span:first') => $('span:first').after('span.user')

Заключение

Сумбурно получилось в этот раз как-то, да? Я мог что-то упустить. В любом случае пишите, если есть вопросы, если я что-то упустил или даже наврал.

Пишите код и получайте от этого удовольствие!

Содержание цикла статей

1. Введение
2. Парсинг html
3. Манипуляции с DOM