Я думаю, что Тим сказал это хорошо , но давайте сделаем шаг назад:
Элемент DOM - это объект, вещь в памяти. Как и большинство объектов в ООП, у него есть свойства . Он также отдельно имеет карту атрибутов, определенных для элемента (обычно исходящих из разметки, которую браузер считал для создания элемента). Некоторые из свойств элемента получают свои начальные значения из атрибутов с такими же или похожими именами ( valueполучает его начальное значение из атрибута «value»; hrefполучает его начальное значение из атрибута «href», но это не совсем то же самое значение; classNameиз атрибут "класс"). Другие свойства получают свои начальные значения другими способами: например, parentNodeсвойство получает свое значение в зависимости от того, что является его родительским элементом;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" |
| имя: "fooAnchor" |
| id: "fooAnchor" |
| className: "проверить один" |
| атрибуты: |
| href: "foo.html" |
| имя: "fooAnchor" |
| id: "fooAnchor" |
| класс: "проверить один" |
+ ------------------------------------------- +
Обратите внимание, что свойства и атрибуты различны.
Теперь, хотя они отличаются друг от друга, потому что все это эволюционировало, а не разрабатывалось с нуля, ряд свойств записывают обратно в атрибут, из которого они получены, если вы их установите. Но не все это делают, и, как вы можете видеть 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.
атрибут класса показан здесь на теле. Это доступно через следующий код:
