Lesson 12: JavaScript Document Object
Master the Document Object Model (DOM) with interactive examples and practical applications.
12.1 Introduction to the Document Object
The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the structure of a document as a tree of objects, allowing JavaScript to interact with the page content.
Key features: The document object is the entry point to the DOM. It provides properties and methods to access and manipulate the document's structure, style, and content.
Example 12.1: Accessing Document Properties
// Accessing document properties
document.write("Document Title: " + document.title);
document.write("<br>Document URL: " + document.URL);
document.write("<br>Last Modified: " + document.lastModified);
document.write("<br>Background Color: " + document.bgColor);
document.write("<br>Number of Links: " + document.links.length);
Document properties will appear here
12.2 Document Properties
The document object has numerous properties that provide information about the document and its elements.
| Property | Description | Example |
|---|---|---|
| title | Title of the document | document.title |
| URL | Complete URL of the document | document.URL |
| lastModified | Date the document was last modified | document.lastModified |
| bgColor | Background color of the document | document.bgColor |
| fgColor | Foreground (text) color of the document | document.fgColor |
| linkColor | Color of unvisited links | document.linkColor |
| vlinkColor | Color of visited links | document.vlinkColor |
| images | Collection of all images in the document | document.images.length |
| links | Collection of all links in the document | document.links.length |
12.2.1: Modify Document Properties
This is a preview of how your page might look.
12.3 Document Methods
The document object provides methods to create, access, and modify elements in the document.
Writing to the Document
Results will appear here
Element Selection
This is a demo element. Try selecting it!
Creating Elements
New elements will appear here
| Method | Description | Example |
|---|---|---|
| write() | Writes HTML expressions to the document | document.write("Hello") |
| writeln() | Same as write() but adds a newline character | document.writeln("Hello") |
| getElementById() | Returns element with specified ID | document.getElementById("myId") |
| getElementsByTagName() | Returns collection of elements with specified tag name | document.getElementsByTagName("p") |
| getElementsByClassName() | Returns collection of elements with specified class | document.getElementsByClassName("myClass") |
| querySelector() | Returns first element matching CSS selector | document.querySelector("#myId") |
| querySelectorAll() | Returns all elements matching CSS selector | document.querySelectorAll("p") |
| createElement() | Creates an element node | document.createElement("div") |
| createTextNode() | Creates a text node | document.createTextNode("Hello") |
12.4 Real-World Applications
Document object methods are essential for many real-world applications:
12.4.1: Dynamic Content Generator
Generated content will appear here
12.4.2: Element Inspector
This is paragraph 1
This is paragraph 2
This is a div with class "example"
This is paragraph 3
Example 12.2: Creating a Simple Banner
// Create banner element
const banner = document.createElement("div");
banner.style.backgroundColor = "#f0db4f";
banner.style.padding = "20px";
banner.style.textAlign = "center";
banner.style.border = "2px solid #333";
// Create banner content
const bannerText = document.createTextNode("Welcome to our website!");
banner.appendChild(bannerText);
// Add banner to document
document.body.insertBefore(banner, document.body.firstChild);
// Remove banner after 5 seconds
setTimeout(() => {
document.body.removeChild(banner);
}, 5000);
Banner will appear at the top of the page