The Document Object Model (DOM) is an application interface (API) for HTML documents, XML, SVG and so on. It defines and provides the logical structure of the document as well the way that can be accessed and manipulated. Understand the term document as a structured group of nodes and objects, that have properties and methods. The document also have a content and style.
The DOM is interoperable and scripting-language neutral interface. What does exactly mean?.
This HTML documents:
<!DOCTYPE html> <html> <head><title>Sample title</title></head> <body> <p>Sample content</p> </body> </html>
Is represented in the DOM as follows:
Note: a good tool Live Dom viewer
|DOCTYPE: html |HTML | HEAD | TITLE | test: Sample title | #text: | BODY | #text: | P | #text: Sample content | #text:
Note: realise, there is a
#text:empty node between HEAD and BODY and two more around P node inside the BODY. That is because each whitespace in the document is reprensented as an empty node text in the DOM. There is a pretty good explanation about it Whitespace in the DOM
DOM important dataTypes
There are a number of different data types that you will be use to deal with the DOM API and of course, you should know about these. I will try to briefly describes the most importants:
|window||The window object represents a window containing a DOM document. We can say, that is the root object, which it contains the document.|
|document||The document interface serve an entry point into the DOM tree and provides global(to the whole document) functionality.|
|element||Element refers to node of type element returned by the API DOM. If we select through DOM API method a node in the DOM, rather than say that method returns an object reference to a node, we just say returns an element.|
|nodeList||As element refers to the node, the nodeList refers to an array of elements (array of nodes).|
|attribute||Represents an element attribute as an object.|
The first interface you should know about it is HTMLElement, this interface represents any HTML element. Some elements implement directly, other via an interface that inherits it.
To understand this, I will explain an example using the
Document interface and
<button> element. Let’s take that
HTML code for the example:
<!DOCTYPE html> <html> <head> <title>Prueba</title> </head> <body> <button type="button" id="sampleButton">Click me!</button> </body> </html>
HTML code above, will generate a simple DOM tree. First, in order to get the
<button> element reference, we should to use an interface, as we say earlier,
document is the entry point of the DOM tree.
//Get the reference to <button> element. var element = document.getElementById('sampleButton'); //Now, We are able to acces/change the attributes of the element. console.log(element.type); //Change the background color of the element. element.style.backgroundColor = "red"; //Change the content of the elemnt. element.innerHTML = "Now, I'm a sample button";
If you want to see these in action, there is a codepen
I think, this topic merit an entire blog post because is so extensive and important to explain entirely. In the near future I will write that post, when finished I will update this post. The code above is a simple example about it.