What is DOM?
When we look at a website, we see content. If we look at the source HTML of the same web page, we see tags like `<p>` or `<img src>` that format the content. Whichever one we view, the document itself is the same.
What if we applied object-oriented thinking to this document? It's not like one header is different from another, except in the content it contains. The header is just a container for data. That is what the DOM, or Document Object Model, does. It represents a document as a tree of objects and nodes, which allows the document to be manipulated with any programming language. Without the DOM, programs wouldn't understand the document structure, and couldn't act upon them.
DOM grew out of Dynamic HTML in the early 2000s, and sought to solve problems with standardization while providing more dynamic web sites.
The DOM is an API for CSS, HTML, and XML documents that allows programs to manipulate valid and well-formed XML and HTML documents, because they are represented as objects and nodes.
What's the DOM do?
The DOM identifies:
- The interfaces and objects used to represent and manipulate a document.
- The semantics of these interfaces and objects - including both behavior and attributes.
- The relationships and collaborations among these interfaces and objects.
DOM Data Types
The DOM represents a website as a tree of objects and nodes, and there is some specialized nomenclature to learn before interacting with a DOM. Here are some of the DOM data types.
- Document - This object is the root document object itself.
- Node - Every object located within a document is a node.
- Element - A node of a specific type.
- NodeList - A nodeList is an array of elements.
- NamedNodeMap - An an array where items are accessed by name or index.
How do I use DOM?
There are a group of DOM interfaces for interacting with HTML elements and XML documents. Here are a few DOM methods to try, with examples in JavaScript.
- `querySelectorAll()` - access elements from the DOM. `var paragraphs = document.querySelectorAll( 'p' );`
- `createElement()` - create a specified element and insert it into the DOM. `var thirdParagraph = document.createElement('p');`
- `getElementById()` - get an element from the document by its unique ID attribute. `var firstDiv = getElementById("first")`
Conclusion
Despite the specialized data types and interfaces, the DOM is just an API that allows programs to manipulate HTML and XML text by representing a web page as a tree of objects and nodes. It is how JavaScript sees a website, which allows it to interact with its nodes, elements, and content.
