Element

Common Element APIs

The learn-once page for APIs shared by almost every HTML element. These are the properties and methods beginners reach for constantly.

<div> Any normal element </div>
Learn first
textContentPut text on the page classListToggle CSS states styleSmall inline style changes addEventListener()React to user actions append()Add content at the end remove()Delete an element
Content
APITypeDescription
textContentstring Plain text inside the element. ▾

Use this for user-facing text. It does not parse HTML.

JS
element.textContent = 'Saved';
innerHTMLstring HTML markup inside the element. ▾

Only use with trusted HTML. For user data, use textContent.

JS
element.innerHTML = '<strong>Saved</strong>';
innerTextstring Visible rendered text, affected by CSS layout. ▾

Most of the time, beginners should prefer textContent.

JS
console.log(element.innerText);
CSS
APITypeDescription
styleCSSStyleDeclaration Inline styles for one element. ▾
JS
element.style.display = 'none';
element.style.backgroundColor = 'gold';
classListDOMTokenList Add, remove, toggle, and check CSS classes. ▾
JS
element.classList.add('active');
element.classList.toggle('open');
element.classList.remove('hidden');
Tree
APITypeDescription
childrenHTMLCollection Child elements, not text nodes. ▾
JS
console.log(element.children.length);
parentElementElement The element that contains this element. ▾
JS
element.parentElement.classList.add('has-child');
append()void Add nodes or text to the end. ▾
JS
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item);
prepend()void Add nodes or text to the beginning. ▾
JS
list.prepend(item);
remove()void Remove this element from the page. ▾
JS
element.remove();
Attributes
APITypeDescription
idstring The element's id attribute. ▾
JS
element.id = 'result';
getAttribute()string Read an HTML attribute. ▾
JS
const label = element.getAttribute('aria-label');
setAttribute()void Write an HTML attribute. ▾
JS
element.setAttribute('aria-expanded', 'true');
removeAttribute()void Remove an HTML attribute. ▾
JS
element.removeAttribute('hidden');
Events
APITypeDescription
addEventListener()void Run code when an event happens. ▾
JS
button.addEventListener('click', () => {
  console.log('Clicked');
});
removeEventListener()void Stop a previously added listener. ▾
JS
button.removeEventListener('click', handleClick);
Geometry
APITypeDescription
clientWidth / clientHeightnumber Inner visible size in pixels. ▾
JS
console.log(element.clientWidth, element.clientHeight);
getBoundingClientRect()DOMRect Position and size relative to the viewport. ▾
JS
const rect = element.getBoundingClientRect();
console.log(rect.left, rect.top, rect.width, rect.height);
Related Elements
<input> <img> <canvas> <video>
Related Properties
textContent innerHTML classList style
Related Methods
addEventListener() append() prepend() remove()