JavaScript DOM Document
Working with the document object and page properties
📄 What is the Document Object?
The document object represents your entire HTML page. It's the main entry point for accessing and modifying everything on your webpage.
// The document object gives you access to the whole page
console.log(document.title); // Page title
console.log(document.URL); // Current URL
document.body.style.backgroundColor = "lightblue";
Document Properties
document.title
Get or set the page title
document.title = "New Title"document.URL
Get the current page URL
console.log(document.URL)document.body
Access the body element
document.body.style.color = "red"document.head
Access the head element
document.head.innerHTML🔹 Changing Page Title
You can change the title that appears in the browser tab:
<!-- Current title shows in browser tab -->
<button onclick="changePageTitle()">Change Page Title</button>
<script>
function changePageTitle() {
// Change the title in the browser tab
document.title = "Title Changed by JavaScript!";
alert("Check the browser tab - the title changed!");
}
</script>Try it:
🔹 Working with document.body
The body contains all visible content on your page:
// Change background color of entire page
document.body.style.backgroundColor = "lightgreen";
// Change text color of entire page
document.body.style.color = "darkblue";
// Add content to the end of the page
document.body.innerHTML += "<p>Added by JavaScript!</p>";🔸 Interactive Example:
<button onclick="changePageBackground()">Change Background</button>
<button onclick="resetBackground()">Reset</button>
<script>
function changePageBackground() {
document.body.style.backgroundColor = "lightyellow";
document.body.style.padding = "20px";
}
function resetBackground() {
document.body.style.backgroundColor = "white";
document.body.style.padding = "0px";
}
</script>Try it:
🔹 Getting Page Information
The document object provides useful information about the current page:
// Get page information
console.log("Page title: " + document.title);
console.log("Page URL: " + document.URL);
console.log("Domain: " + document.domain);
console.log("Last modified: " + document.lastModified);
// Display this information on the page
function showPageInfo() {
let info = "Page Title: " + document.title + "\n";
info += "URL: " + document.URL + "\n";
info += "Domain: " + document.domain;
alert(info);
}🔸 Try it yourself:
<button onclick="displayPageInfo()">Show Page Info</button>
<div id="pageInfo"></div>
<script>
function displayPageInfo() {
let infoDiv = document.getElementById("pageInfo");
infoDiv.innerHTML = "<h4>Page Information:</h4>" +
"<p><strong>Title:</strong> " + document.title + "</p>" +
"<p><strong>URL:</strong> " + document.URL + "</p>" +
"<p><strong>Domain:</strong> " + document.domain + "</p>";
}
</script>Try it:
🔹 Document Ready State
Check if the page has finished loading:
// Check if page is fully loaded
if (document.readyState === "complete") {
console.log("Page is fully loaded!");
} else {
console.log("Page is still loading...");
}
// Wait for page to load completely
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM is ready!");
// Your code here runs after HTML is loaded
});
// Wait for everything including images
window.addEventListener("load", function() {
console.log("Everything is loaded!");
// Your code here runs after everything is loaded
});When to use each:
- DOMContentLoaded: HTML is loaded, good for most DOM manipulation
- window.load: Everything including images is loaded
- document.readyState: Check current loading state