Acho que o Tim falou muito bem , mas vamos voltar atrás:
Um elemento DOM é um objeto, uma coisa na memória. Como a maioria dos objetos no OOP, ele possui propriedades . Além disso, também possui um mapa dos atributos definidos no elemento (geralmente provenientes da marcação que o navegador leu para criar o elemento). Algumas das propriedades do elemento obtêm sua inicial valores de atributos com os mesmos nomes ou nomes semelhantes ( valueobtém seu valor inicial do atributo "value"; hrefobtém seu valor inicial do atributo "href", mas não é exatamente o mesmo valor; classNamedo atributo "class"). Outras propriedades obtêm seus valores iniciais de outras maneiras: Por exemplo, a parentNodepropriedade obtém seu valor com base no que é seu elemento pai;style propriedade, tenha ou não um atributo "estilo".
Vamos considerar essa âncora em uma página em http://example.com/testing.html:
<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>
Alguma arte ASCII gratuita (e deixando de fora muitas coisas):
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
| HTMLAnchorElement |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
| href: "http://example.com/foo.html" |
| nome: "fooAnchor" |
| id: "fooAnchor" |
| className: "test one" |
| atributos: |
| href: "foo.html" |
| nome: "fooAnchor" |
| id: "fooAnchor" |
| classe: "teste um" |
+ −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
Observe que as propriedades e atributos são distintos.
Agora, embora sejam distintos, porque tudo isso evoluiu ao invés de ser projetado desde o início, várias propriedades retornam ao atributo do qual derivaram se você as definir. Mas nem todos o fazem, e como você pode ver de hrefcima, o mapeamento nem sempre é um "repasse de valor" direto, às vezes há interpretação envolvida.
Quando falo sobre propriedades como propriedades de um objeto, não estou falando em abstrato. Aqui está um código não-jQuery:
var link = document.getElementById('fooAnchor');
alert(link.href); // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"
(Esses valores são como na maioria dos navegadores; há algumas variações.)
O linkobjeto é real e você pode ver que há uma distinção real entre acessar uma propriedade e acessar um atributo .
Como Tim disse, na grande maioria das vezes, queremos trabalhar com propriedades. Parcialmente, isso ocorre porque seus valores (até mesmo seus nomes) tendem a ser mais consistentes entre os navegadores. Na maioria das vezes, queremos trabalhar com atributos quando não há propriedade relacionada a ele (atributos personalizados) ou quando sabemos que, para esse atributo específico, o atributo e a propriedade não são 1: 1 (como emhref e "href" acima) .
As propriedades padrão estão dispostas nas várias especificações do DOM:
Essas especificações têm excelentes índices e eu recomendo manter os links à mão; Eu os uso o tempo todo.
Os atributos personalizados incluiriam, por exemplo, quaisquer data-xyzatributos que você possa colocar em elementos para fornecer metadados ao seu código (agora que é válido a partir do HTML5, desde que você mantenha o data-prefixo). (As versões recentes do jQuery dão acesso a data-xyzelementos por meio da datafunção, mas essa função não é apenas um acessador de data-xyzatributos [ele faz mais e menos que isso]; a menos que você realmente precise de seus recursos, eu usaria a attrfunção para interagir com data-xyzatributo.)
A attrfunção costumava ter uma lógica complicada em torno de obter o que eles pensavam que você queria, em vez de literalmente obter o atributo. Confundiu os conceitos. Mover-se para prope attrpretendia desconstruí-los. Resumidamente em v1.6.0 jQuery foi longe demais a esse respeito, mas a funcionalidade foi rapidamente adicionado de volta para attrlidar com as situações comuns onde as pessoas usam attrquando tecnicamente eles devem usar prop.
O atributo de classe é mostrado aqui no corpo. É acessível através do seguinte código:
