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

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

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

Ссылка на статью, в которой рассматривается эта проблема, также будет приятной.

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

Ответы

Ответ 1

Взгляд на то, как jQuery обрабатывает его:

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

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

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


Чтобы все было в порядке, вы можете сделать это: 

$foo = $("#foo");
console.log( $foo.attr("id"), $foo.attr("style"), $foo.attr("href") );
Выполняется только 1 объект jQuery, и вам не нужно беспокоиться о том, чтобы что-то делать вручную.

Ответ 2

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

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

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

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

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

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

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

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

Ответ 3

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

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

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