DOM Element

How does Javascript allow us to alter the HTML in a web-browser? We need to use what is called a “DOM” element. DOM stands for “Domain Object Model”.

Every HTML element which is visible on a page has a corresponding DOM element. We can use various APIs in the browser to assign a Javascript variable to point at a DOM element. For instance with this code fragment:

var Body = document.querySelector("body");
Body.innerHTML = "<h1>Hello world!</h1>";

If you use this little fragment of code in the Javascript console of any website it will clear all the HTML you see and replace it with the heading “Hello World”.

Read about how document.querySelector works and innerHTML.