Set, get, and remove properties of DOM elements

Get the value of an input field or the href of an anchor. Learn how to work with element properties.

While jQuery provides an extra method for setting and getting element property values, there's no such thing in plain JavaScript. Element properties, such as href, title, alt, and value, are directly accessible as JavaScript object properties:

Here are some examples:

var el = document.querySelector('a');
console.log(el.href);
if (el.title != 'foo') el.title = 'foo';

var inp = document.querySelector('input[type="text"]');
console.log(inp.value);
inp.value = 'Hello World!';

HTML attributes, such as class or href are directly bound to their element's properties. Meaning if you change the property, the attribute gets changes, as well - and vice versa.

It's also allowed to create custom properties:

var el = document.querySelector('div');
el.foo = { bar: true };
console.log(el.foo);

To remove such a property at a later time, use the delete statement:

delete el.foo;

Feedback