Я думаю, Тим сказал это очень хорошо , но давайте сделаем шаг назад:
Элемент DOM - это объект, вещь в памяти. Как и большинство объектов в ООП, он имеет свойств . Он также отдельно имеет карту атрибутов, определенных для элемента (обычно исходящих из разметки, которую браузер считал для создания элемента). Некоторые из свойств элемента получают свои начальные значения из атрибутов с такими же или похожими именами (value получает свое начальное значение из атрибута "value"; href получает свое начальное значение из атрибута "href", но это не совсем то же значение; className из атрибута "class"). Другие свойства получают свои начальные значения другими способами: например, свойство parentNode получает свое значение в зависимости от того, что является его родительским элементом; элемент всегда имеет свойство style, независимо от того, имеет он атрибут style или нет.
Давайте рассмотрим этот якорь на странице http://example.com/testing.html:
<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>
Некоторое бесплатное искусство ASCII (и много чего не учитывается):
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
| HTMLAnchorElement |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
| href: "http://example.com/foo.html" |
| name: "fooAnchor" |
| id: "fooAnchor" |
| className: "test one" |
| attributes: |
| href: "foo.html" |
| name: "fooAnchor" |
| id: "fooAnchor" |
| class: "test one" |
+−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+
Обратите внимание, что свойства и атрибуты различны.
Теперь, хотя они отличаются друг от друга, потому что все это эволюционировало, а не разрабатывалось с нуля, ряд свойств записывают обратно в атрибут, из которого они получены, если вы их установите. Но не все это делают, и, как вы можете видеть из href выше, отображение не всегда является прямым «передачей значения», иногда требуется интерпретация.
Когда я говорю о свойствах как о свойствах объекта, я не говорю абстрактно. Вот некоторый код не-JQuery:
var link = document.getElementById('fooAnchor');
alert(link.href); // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"
(Эти значения соответствуют большинству браузеров; есть некоторые различия.)
Объект link - это реальная вещь, и вы можете видеть, что существует реальное различие между доступом к свойству на нем и доступом к атрибуту .
Как сказал Тим, в подавляющем большинстве времени мы хотим работать со свойствами. Частично это связано с тем, что их значения (даже их имена) имеют тенденцию быть более согласованными в разных браузерах. В основном мы хотим работать с атрибутами только в том случае, если с ним нет связанных свойств (пользовательских атрибутов) или когда мы знаем, что для этого конкретного атрибута атрибут и свойство не равны 1: 1 (как в случае href и «href»). "выше).
Стандартные свойства указаны в различных спецификациях DOM:
Эти спецификации имеют отличные индексы, и я рекомендую держать ссылки на них под рукой; Я использую их все время.
Настраиваемые атрибуты будут включать, например, любые атрибуты data-xyz, которые вы можете добавить к элементам для предоставления метаданных в свой код (теперь это действительно с HTML5, если вы придерживаетесь префикса data-) , (Последние версии jQuery предоставляют вам доступ к data-xyz элементам через функцию data, но эта функция , а не просто средство доступа к атрибутам data-xyz [она делает и больше, и меньше, чем это]; если вам не нужны его возможности, я бы использовал функцию attr для взаимодействия с атрибутом data-xyz.)
Функция attr использовала некоторую запутанную логику для получения того, что они думали, что вы хотели, вместо буквального получения атрибута. Это смешало понятия. Переход к prop и attr должен был их де-сплитовать. Вкратце, в v1.6.0 jQuery зашел слишком далеко в этом отношении, но функциональность была быстро добавлена обратно к attr, чтобы справиться с общими ситуациями, когда люди используют attr, когда технически они должны использовать prop.