this.id
(as you know)this.value
(on most input types. only issues I know are IE when a<select>
doesn’t havevalue
properties set on its<option>
elements, or radio inputs in Safari.)this.className
to get or set an entire “class” propertythis.selectedIndex
against a<select>
to get the selected indexthis.options
against a<select>
to get a list of<option>
elementsthis.text
against an<option>
to get its text contentthis.rows
against a<table>
to get a collection of<tr>
elementsthis.cells
against a<tr>
to get its cells (td & th)this.parentNode
to get a direct parentthis.checked
to get the checked state of acheckbox
Thanks @Tim Downthis.selected
to get the selected state of anoption
Thanks @Tim Downthis.disabled
to get the disabled state of aninput
Thanks @Tim Downthis.readOnly
to get the readOnly state of aninput
Thanks @Tim Downthis.href
against an<a>
element to get itshref
this.hostname
against an<a>
element to get the domain of itshref
this.pathname
against an<a>
element to get the path of itshref
this.search
against an<a>
element to get the querystring of itshref
this.src
against an element where it is valid to have asrc
…I think you get the idea.
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.
In general you can replace:
$(el).attr('someName');
with:
Above was poorly worded. getAttribute
is not a replacement, but it does retrieve the value of an attribute sent from the server, and its corresponding setAttribute
will set it. Necessary in some cases.
The sentences below sort of covered it. See this answer for a better treatment.
el.getAttribute('someName');
…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 setAttribute
too.
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:
$('span').unwrap(); // unwrap all span elements
But if there are many, you may want to do a little native DOM API:
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] );
}
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.
It may seem like I have an infinite loop with the outer while
because of while(spans[0])
, but because we’re dealing with a “live list” it gets updated when we do the parent.removeChild(span[0]);
. This is a pretty nifty feature that we miss out on when working with an Array (or Array-like object) instead.