Document Object Model

The DOM

The Document Object Model (DOM) is a very important concept in Web Development

When a web page is received from the server by a browser, the browser divides (or 'parses') the elements into a tree of objects

If you're not familiar with the concept of 'objects' in computing, you can think of them as containers that have data stored within them, including properties and methods. Properties are data about the object (e.g., 'width'); methods define how the object behaves, including accessing and/or modifying its properties

This gives us the ability to manipulate each object to suite our needs. CSS is one of the ways in which we can modify an object's appearance. For example,
p {
    color: blue;
}
would tell the browser to make the text in all of the paragraph elements (objects) display blue in color

Below is a representation of a DOM that would be generated by a very simple web page, whose code is to the right (or top, depending on your display). As you can see, the DOM gets real complicated, real quick. But understanding how a browser interprets a page will help in learning CSS and, later, JavaScript

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <title>My Page</title>
</head>
<body>
    <p>
        Lorem ipsum...
    </p>
    <p>
        Lorem ipsum...
    </p>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
</body>
</html>