Получение значений атрибута HTML "DOM 0 way"

Question

В jQuery есть метод attr(), который извлекает значение заданного атрибута HTML.Например:

var foo = document.getElementById("foo");
$(foo).attr("id");

Но с точки зрения производительности это не является оптимальным, поскольку объект jQuery должен создаваться только для вызова метода attr().Это работает лучше: foo.id.

Итак, в идеале мы бы хотели избежать использования attr().Но можем ли мы сделать это (для любого атрибута)?Я считаю, что foo.id и foo.value "безопасны" (кросс-браузер), но я помню, что у меня были проблемы с foo.href.

Вот список различных атрибутов, которые я хотел бы иметь возможностьполучить "напрямую":

Для любого элемента: foo.id, foo.name
Для якорей: foo.href, foo.target, foo.rel
Для изображений, объекты, iframes: foo.src, foo.width, foo.height
Для элементов формы: foo.checked, foo.selected, foo.disabled, foo.readonly, foo.type, foo.value, foo.action

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

Было бы неплохо получить ссылку на статью, в которой рассматривается эта проблема.

Редактировать (основываясь на ответах): Выделенные жирным шрифтом выражения небезопасны!

Answer 1

Метод jQuery attr() назван неверно, плохо документирован и скрывает очень важное различие: разница между атрибутами и свойствами , что плохо понимают многие веб-разработчики, особенно те, чье введение в JavaScript пришел из jQuery.

Если вы не читаете дальше, просто уберите это: вам почти никогда не понадобится использовать атрибуты . Почти всегда лучше использовать соответствующее свойство. На самом деле, это то, что jQuery attr() метод обычно делает до версии 1.6.

Причины использовать свойство и избегать getAttribute() и setAttribute() при работе с HTML DOM:

• Реализация IE не работает. В более старых версиях и режимах причуд более поздних версий атрибуты отображаются непосредственно на свойства, что противоречит стандарту DOM. Одним из следствий этого является то, что атрибуты обработчика событий (onclick и т. Д.) Полностью нарушены в IE. Всегда используйте свойство для обработчика событий . Другим следствием этого является то, что IE в этих режимах и версиях требует, чтобы вы использовали getAttribute("className") вместо getAttribute("class") для получения атрибута class.
• Свойства (в основном) последовательно реализованы кросс-браузерными
• Связь между некоторыми свойствами и атрибутами не такая, как вы думаете. Некоторые атрибуты, в частности атрибут value элемента <input>, не привязаны к свойству с тем же именем: после изменения значения ввода (пользователем или сценарием), получение или установка * Атрибут 1030 * не имеет никакого эффекта. Вместо этого атрибут value синхронизируется со свойством defaultValue.
• Свойства обычно более удобны. Подумайте, например, о логических атрибутах, таких как checked: это представлено в DOM как логическое свойство checked, в то время как царит путаница в том, как установить флажок для проверки с помощью атрибута. Это removeAttribute("checked")? setAttribute("checked", "")? setAttribute("checked", false)? Все не так, потому что атрибут checked фактически сопоставлен со свойством defaultChecked.

В некоторых ситуациях использование атрибута может быть желательным. Например, свойство href элемента <a> всегда сообщает о полном URL-адресе, в то время как getAttribute("href") возвращает строку, указанную в дословном атрибуте HTML href. За исключением, конечно, в IE. attr() в jQuery пытается нормализовать такого рода противоречия.

Еще немного информации на эту тему: http://reference.sitepoint.com/javascript/Element/setAttribute,, а также из MSDN: http://msdn.microsoft.com/en-us/library/dd347148%28v=vs.85%29.aspx

Наконец, я настоятельно рекомендую использовать свойства DOM напрямую, где это возможно, а не использовать метод attr() jQuery, но есть особые случаи (например, href), которые он должен учитывать. Из свойств, которые вы упомянули, все они полностью безопасны для использования кросс-браузер, со следующими исключениями:

• foo.href и foo.src (что страдает от аналогичной проблемы), как указано выше.
• foo.type можно установить только для элемента <input> до его добавления в DOM.
• foo.selected (где foo - элемент <option>), очевидно, имеет ошибку в более старых версиях Safari, как отмечено в другом ответе.

Answer 2

Посмотрим, как jQuery справляется с этим:

• атрибуты href, src и style требуют специальной обработки.
• Safari имеет ошибку при доступе к атрибуту «selected» в элементе select. При доступе к атрибуту selected, Safari требует особой обработки.

Проверьте источник jQuery и найдите эту строку, чтобы понять, что я подразумеваю под "специальной обработкой":
attr: function( elem, name, value, pass ) {

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


Для простоты вы можете сделать это:

$foo = $("#foo");
console.log( $foo.attr("id"), $foo.attr("style"), $foo.attr("href") );

Создан только 1 объект jQuery, и вам не нужно беспокоиться о ручной обработке чего-либо.

Answer 3

1) Я не думаю, что производительность - это проблема.Я предполагаю, что 'foo' это просто указатель, а не объект, который занимает место в памяти.Хотя не уверен насчет этого.

2) Вам вообще не нужно создавать переменную foo.$ ("# foo"). attr ("id") подойдет.

3) У DOM есть несколько методов для доступа к атрибутам.Попробуйте .getAttribute («имя»), .setAttribute («имя») и .removeAttribute («имя»)