StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This change has been a long time coming for jQuery. For years, they've been content with a function named <code>attr()</code> that mostly retrieved DOM properties, not the result you'd expect from the name. The segregation of <a href="http://api.jquery.com/attr" rel="noreferrer"><code>attr()</code></a> and <a href="http://api.jquery.com/prop" rel="noreferrer"><code>prop()</code></a> should help alleviate some of the confusion between HTML attributes and DOM properties. <code>$.fn.prop()</code> grabs the specified DOM property, while <code>$.fn.attr()</code> grabs the specified HTML attribute.</p> <p>To fully understand how they work, here's an extended explanation on the difference between HTML attributes and DOM properties.:</p> <h2>HTML Attributes</h2> <h3>Syntax:</h3> <p><code><body onload="foo()"></code></p> <p><strong>Purpose:</strong> Allows markup to have data associated with it for events, rendering, and other purposes.</p> <p><strong>Visualization:</strong> <img src="https://i.stack.imgur.com/NGBd6.png" alt="HTML Attributes"> The class attribute is shown here on the body. It's accessible through the following code:</p> <pre><code>var attr; attr = document.body.getAttribute("class"); //IE 8 Quirks and below attr = document.body.getAttribute("className"); </code></pre> <p>Attributes are returned in string form and can be inconsistent from browser to browser. However, they can be vital in some situations. As exemplified above, IE 8 Quirks Mode (and below) expects the name of a DOM property in get/set/removeAttribute instead of the attribute name. This is one of many reasons why it's important to know the difference.</p> <h2>DOM Properties</h2> <h3>Syntax:</h3> <p><code>document.body.onload = foo;</code></p> <p><strong>Purpose:</strong> Gives access to properties that belong to element nodes. These properties are similar to attributes, but are only accessible through JavaScript. This is an important difference that helps clarify the role of DOM properties. <strong>Please note that attributes are completely different from properties</strong>, as this event handler assignment is useless and won't receive the event (body doesn't have an onload event, only an onload attribute).</p> <p><strong>Visualization:</strong> <img src="https://i.stack.imgur.com/genBY.png" alt="DOM Properties"></p> <p>Here, you'll notice a list of properties under the "DOM" tab in Firebug. These are DOM properties. You'll immediately notice quite a few of them, as you'll have used them before without knowing it. Their values are what you'll be receiving through JavaScript.</p> <h2>Documentation</h2> <ul> <li><a href="http://books.google.ca/books?id=2weL0iAfrEMC&lpg=PT334&ots=_9VAqAT03C&dq=html%20attributes%20vs%20dom%20properties&pg=PT332#v=onepage&q&f=false" rel="noreferrer">JavaScript: The Definitive Guide by David Flanagan</a></li> <li><a href="https://developer.mozilla.org/en/HTML/Attributes" rel="noreferrer">HTML Attributes, Mozilla Dev Center</a></li> <li><a href="https://developer.mozilla.org/en/DOM/element#Properties" rel="noreferrer">DOM Element Properties, Mozilla Dev Center</a></li> </ul> <h2>Example</h2> <p>HTML: <code><textarea id="test" value="foo"></textarea></code></p> <p>JavaScript: <code>alert($('#test').attr('value'));</code></p> <p>In earlier versions of jQuery, this returns an empty string. In 1.6, it returns the proper value, <code>foo</code>.</p> <p>Without having glanced at the new code for either function, I can say with confidence that the confusion has more to do with the difference between HTML attributes and DOM properties, than with the code itself. Hopefully, this cleared some things up for you.</p> <p>-Matt</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload