What is the DOM?
DOM stands for Document Object Model, and it’s a programming interface for web documents. When a web page is loaded, the browser creates a structured, tree-like representation of the HTML, called the DOM. Each element in your HTML (like headings, paragraphs, and images) becomes a node in this tree.
For example, take this HTML:
htmlCopyEdit<!DOCTYPE html>
<html>
<head><title>My Page</title></head>
<body>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</body>
</html>
The DOM version of this page looks like a tree, where <html> is the root, and inside it are <head> and <body>, which each contain further elements.
JavaScript can be used to manipulate this DOM—adding, removing, or changing elements dynamically.
What is CSS?
CSS stands for Cascading Style Sheets, and it’s used to control how elements on the page look. CSS can change fonts, colors, spacing, positioning, and more. When applied to the DOM, CSS makes web pages visually appealing.
You can apply CSS in three ways:
- Inline – directly inside an HTML element using the
styleattribute. - Internal – inside a
<style>tag in the HTML document’s<head>. - External – in a separate
.cssfile linked using<link>.
Example of internal CSS:
htmlCopyEdit<style>
h1 {
color: blue;
font-size: 36px;
}
p {
font-family: Arial, sans-serif;
}
</style>
How CSS Interacts with the DOM
When a web page is rendered, the browser applies CSS rules to the DOM. It uses selectors to find which elements to style. Common selectors include:
- Type selector: targets all elements of a type.
Example:p { color: green; } - Class selector: targets elements with a specific class.
Example:.highlight { background-color: yellow; } - ID selector: targets a single element with a specific ID.
Example:#header { text-align: center; }
Example
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">This text is highlighted!</p>
</body>
</html>
Here, the CSS rule targets the paragraph with class highlight and applies a yellow background.
Using JavaScript to Change CSS with the DOM
JavaScript allows dynamic manipulation of the DOM and styles. For instance:
htmlCopyEdit<p id="text">Click the button to change my color!</p>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.getElementById("text").style.color = "red";
}
</script>
This example shows how JavaScript accesses the DOM using getElementById, then changes the style of that element by setting the .style.color property.
Why the DOM and CSS Matter Together
Understanding how CSS applies styles through the DOM helps in:
- Debugging layout issues
- Creating responsive designs
- Enhancing user interaction with JavaScript
You can also manipulate CSS classes dynamically:
javascriptCopyEditdocument.getElementById("text").classList.add("highlight");
Or remove them:
javascriptCopyEditdocument.getElementById("text").classList.remove("highlight");
Conclusion
The DOM is the structure of your webpage, and CSS is how it looks. When combined with JavaScript, you gain full control over how content appears and behaves. Learning to use CSS selectors effectively, understanding the DOM tree, and knowing how to modify it with JavaScript are essential skills in web development. Once you master these basics, you can build beautiful, interactive, and dynamic web applications.