StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<ul> <li><code>this.id</code> (as you know)</li> <li><code>this.value</code> (on most input types. only issues I know are IE when a <code><select></code> doesn't have <code>value</code> properties set on its <code><option></code> elements, or radio inputs in Safari.)</li> <li><code>this.className</code> to get or set an entire "class" property</li> <li><code>this.selectedIndex</code> against a <code><select></code> to get the selected index</li> <li><code>this.options</code> against a <code><select></code> to get a list of <code><option></code> elements</li> <li><code>this.text</code> against an <code><option></code> to get its text content</li> <li><code>this.rows</code> against a <code><table></code> to get a collection of <code><tr></code> elements</li> <li><code>this.cells</code> against a <code><tr></code> to get its cells (td & th)</li> <li><code>this.parentNode</code> to get a direct parent</li> <li><code>this.checked</code> to get the checked state of a <code>checkbox</code> <a href="https://stackoverflow.com/users/96100/tim-down">Thanks @Tim Down</a></li> <li><code>this.selected</code> to get the selected state of an <code>option</code> <a href="https://stackoverflow.com/users/96100/tim-down">Thanks @Tim Down</a></li> <li><code>this.disabled</code> to get the disabled state of an <code>input</code> <a href="https://stackoverflow.com/users/96100/tim-down">Thanks @Tim Down</a></li> <li><code>this.readOnly</code> to get the readOnly state of an <code>input</code> <a href="https://stackoverflow.com/users/96100/tim-down">Thanks @Tim Down</a></li> <li><code>this.href</code> against an <code><a></code> element to get its <code>href</code></li> <li><code>this.hostname</code> against an <code><a></code> element to get the domain of its <code>href</code></li> <li><code>this.pathname</code> against an <code><a></code> element to get the path of its <code>href</code></li> <li><code>this.search</code> against an <code><a></code> element to get the querystring of its <code>href</code></li> <li><code>this.src</code> against an element where it is valid to have a <code>src</code></li> </ul> <p>...I think you get the idea.</p> <p>There will be times when performance is crucial. Like if you're performing something in a loop many times over, you may want to ditch jQuery.</p> <p><s>In general you can replace:</p> <pre><code>$(el).attr('someName'); </code></pre> <p>with:</s></p> <p>Above was poorly worded. <code>getAttribute</code> is not a replacement, but it does retrieve the value of an attribute sent from the server, and its corresponding <code>setAttribute</code> will set it. Necessary in some cases.</p> <p>The sentences below sort of covered it. <a href="https://stackoverflow.com/questions/4456231/retrieving-html-attribute-values-the-dom-0-way/4456805#4456805">See this answer</a> for a better treatment.</p> <pre><code>el.getAttribute('someName'); </code></pre> <p>...in order to access an attribute directly. Note that attributes are not the same as properties (though they mirror each other sometimes). Of course there's <code>setAttribute</code> too.</p> <p>Say you had a situation where received a page where you need to unwrap all tags of a certain type. It is short and easy with jQuery:</p> <pre><code>$('span').unwrap(); // unwrap all span elements </code></pre> <p>But if there are many, you may want to do a little native DOM API:</p> <pre><code>var spans = document.getElementsByTagName('span'); while( spans[0] ) { var parent = spans[0].parentNode; while( spans[0].firstChild ) { parent.insertBefore( spans[0].firstChild, spans[0]); } parent.removeChild( spans[0] ); } </code></pre> <p>This code is pretty short, it performs better than the jQuery version, and can easily be made into a reusable function in your personal library.</p> <p>It may seem like I have an infinite loop with the outer <code>while</code> because of <code>while(spans[0])</code>, but because we're dealing with a "live list" it gets updated when we do the <code>parent.removeChild(span[0]);</code>. This is a pretty nifty feature that we miss out on when working with an Array (or Array-like object) instead.</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