Document Object Model - The DOM
The DOM is a cross-platform browser interface that treats an HTML or XML document as a tree structure, with each node is treated as an object that is part of a document. So, for example, in an HTML document that looks like this:
Hello, World!
How are you doing today?
The tag is treated as its own element, that contains two other elements, an
element and a
element. Those elements have text inside of them, but the texts themselves are not elements, they are merely what the
and
elements contain.
You can use the DOM to hook onto these separate elements and manipulate the data inside of them. So, for example, if I want to change the text inside the
element, I can do so by hooking onto that particular node via its id, like so:
var element = document.getElementById(header);
element.innerHTML = "Goodbye!"
Notice that I used JavaScript to dynamically update the contents of the HTML node. The reason I can do that is the DOM has traversed my HTML document and made object nodes for each object in my HTML file. Pretty neat!
Top comments (0)