/
DOM Element

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.

Related content

How do I change the content of a DOM element?
How do I change the content of a DOM element?
More like this
DOM Elements versus HTML markup
DOM Elements versus HTML markup
More like this
The Javascript console and Developer Tools in Chrome
The Javascript console and Developer Tools in Chrome
More like this
How can I reset the browser through Javascript?
How can I reset the browser through Javascript?
More like this
Javascript Object
Javascript Object
Read with this
HTML Structure
HTML Structure
More like this