Доступ к объекту dom изначально или через jQuery?

Question

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

Пример

function(element){
   $(element).attr('anyattribute');
   //Or
   element.anyattribute;
}

Что предпочтительнее и почему?

Answer 1

Чтобы определить «лучший», вы должны сначала указать некоторые критерии, по которым он может быть оценен.Если вы просто хотите получить доступ к элементам DOM и выполнить небольшую обработку, то нет смысла использовать какую-либо библиотеку.Если ваши потребности более сложны, вы должны опубликовать их, чтобы можно было дать рекомендации, которые соответствуют тому, что вы пытаетесь сделать.

Например, я видел библиотеку из 4000 строк, включенную встраница просто для проверки одного элемента управления формы.В любом случае доступ к элементу управления занимает только одну строку кода, так какой смысл включать + 90 КБ дополнительного сценария?

Многое сделано из "кросс-браузерной совместимости", предоставляемой библиотеками, но их становится все меньше и меньшепроблемы и подавляющее большинство из тех, которые существуют, существуют уже довольно давно.Они хорошо известны и имеют обходные пути.

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

Answer 2

Если вы используете jQuery, никогда не используйте прямой доступ DOM, если что-то не поддерживается jQuery, что крайне маловероятно - и в этом случае лучшим решением будет отправка патча ребятам jQuery или, по крайней мере, написание собственного плагина jQuery. .

Обратите внимание, что примеры, которые вы имеете в своих вопросах, не делают то же самое: эквивалент elem.something равен $(elem).prop('something'[, newValue]), а эквивалент DOM $(elem).attr('something'[, newValue]) равен elem.getAttribute('something') / elem.setAttribute('something', newValue).

Однако jQuery .attr() достаточно умен (за исключением 1.6. 0 ), чтобы обрабатывать как реквизиты, так и атрибуты - но он более производительный, если вы используете .prop() при работе с такими свойствами, как checked или disabled.

Answer 3

Если вы уже используете jQuery, делайте то же самое, что и jQuery. То есть $(element).attr('name'). Кросс-браузерная совместимость на самом деле не проблема с этим; все браузеры понимают DOM и в основном соответствуют его спецификациям. Реальная вещь здесь - последовательность . Вам действительно не нужно привыкать делать что-то вроде jQuery здесь, DOM там, и какой-то недоделанный хакерский путь вон там.

Если вы еще не включили jQuery, я бы не стал делать это сейчас, просто чтобы получить атрибут элемента. element.getAttribute('name') всегда должно работать. element.name, вероятно, будет работать для важных атрибутов, но обратите внимание, что "важные атрибуты" не включают в себя все! Он почти никогда не включает второстепенные вещи, такие как атрибуты rel и тому подобное, или что-либо, что не является стандартным HTML ... и значение свойства может отличаться от атрибута, чтобы быть более полезным для сценариев. Например, свойство style на самом деле является объектом, содержащим проанализированные CSS-стили, а не необработанную строку ... а свойство selected для <option> на самом деле является логическим значением, а не "selected" или "". Иногда свойство и атрибут даже имеют разные имена! (Атрибут class соответствует свойству с именем className, и любой атрибут с - в нем, если он вообще соответствует свойству, будет изменять имя свойства так, чтобы оно было совместимо с правилами именования идентификаторов JS . http-equiv, например, становится httpEquiv.) Есть еще куча подобных ошибок. Просто используйте getAttribute, если вы на самом деле заботитесь об атрибуте , и вы еще не поглощены спором jQuery.

Если вы на самом деле заботитесь, например, о том, установлен ли флажок (то есть свойства элемента, в отличие от строки, которая находится в его атрибуте "checked"), используйте element.checked или $(element).prop('checked') (и те же аргументы применимы и к jQuery против vanilla JS).

Answer 4

Через JQuery.

Единственная ситуация, когда мне приходится выбирать между манипулированием DOM и JQuery, это когда я ограничен использованием только DOM.В противном случае, из соображений кросс-браузерной совместимости, я предлагаю взглянуть на библиотеку абстракций, такую ​​как JQuery.