← Back to Roadmap

HTML DOM

Easy

In plain terms

The DOM is the tree structure of the document. JavaScript can read and modify it. document is the entry point. Elements, attributes, and text are nodes. Query and update with APIs.

What you need to know

  • •Tree of nodes
  • •document object
  • •Query, create, modify

Try it yourself

Copy the code below and run it in your browser console or a code editor:

document.getElementById('app');
document.querySelector('.btn');
document.querySelectorAll('li');

const el = document.createElement('div');
el.textContent = 'Hello';
document.body.appendChild(el);

el.setAttribute('id', 'myId');
el.classList.add('active');

Learn more

Dive deeper with these trusted resources:

MDNjavascript.infoTutorialsPointW3Schools