The DOM and events

The DOM is the live tree of objects the browser builds from your HTML. JavaScript changes the page by changing that tree. Learn to find elements with querySelector and to create new ones.

Set text with textContent. Never use innerHTML with anything a user typed, because it lets attackers run their own scripts (cross-site scripting). Listen for clicks and key presses with addEventListener.

Events bubble: they travel up from the clicked element through its parents. That allows event delegation, where one listener on a list handles clicks on every item, even ones added later. In a form's submit handler, call event.preventDefault() to stop the full page reload.

Doing this by hand once makes React feel like a relief rather than magic in the next stage.