• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript DOM Document

← Previous Next →

The DOM Document is the root object of the DOM tree in JavaScript. When you use document in your code, you are accessing the Document object. It represents the entire HTML page and provides methods and properties to interact with the webpage.

Think of the Document object as the main gateway to your webpage. Every element, attribute, or text node in the DOM tree is a child of this object.

Why the Document Object is Important

The Document object lets you:

  • Access page metadata like title, URL, and doctype.

  • Select and manipulate elements on the page.

  • Control forms, links, and scripts dynamically.

  • Create, remove, or replace nodes in the DOM.

Without the Document object, you wouldn’t be able to interact with your webpage dynamically using JavaScript.

Key Properties of the Document Object

  1. document.title – Returns or sets the page title.

console.log(document.title); // Original Title
document.title = "Updated Page Title";

  1. document.URL – Returns the complete URL of the page.

console.log(document.URL);

  1. document.domain – Returns the domain name of the page.

console.log(document.domain);

  1. document.body – Returns the <body> element of the document.

console.log(document.body);
document.body.style.backgroundColor = "#f0f0f0";

  1. document.head – Returns the <head> element of the document.

console.log(document.head);

  1. document.doctype – Returns the document type declaration.

console.log(document.doctype);

  1. document.forms – Returns a collection of all <form> elements in the document.

let forms = document.forms;
console.log(forms.length); // Number of forms

  1. document.links – Returns a collection of all <a> elements with href attributes.

let allLinks = document.links;
console.log(allLinks[0].href);

  1. document.images – Returns a collection of all <img> elements.

let images = document.images;
console.log(images.length);

  1. document.scripts – Returns a collection of all <script> elements.

let scripts = document.scripts;
console.log(scripts[0].src);

Selecting Elements via the Document Object

The Document object provides methods to select elements anywhere on the page:

  • document.getElementById() – Select by ID.

  • document.getElementsByClassName() – Select by class.

  • document.getElementsByTagName() – Select by tag name.

  • document.querySelector() – Select first element via CSS selector.

  • document.querySelectorAll() – Select all matching elements.

Example:

let mainHeading = document.getElementById("main-heading");
mainHeading.textContent = "DOM Document Example";

let paragraphs = document.getElementsByTagName("p");
paragraphs[0].style.color = "blue";

Creating Elements Using the Document Object

You can use the Document object to create new elements and text nodes:

let newDiv = document.createElement("div");
newDiv.id = "newDiv";
newDiv.textContent = "This is a new div created using document.";

document.body.appendChild(newDiv);

let newText = document.createTextNode("Hello World!");
newDiv.appendChild(newText);

Manipulating Forms with Document Object

The Document object provides access to all forms on a page:

<form id="myForm">
    <input type="text" name="username">
    <input type="submit" value="Submit">
</form>

let myForm = document.forms["myForm"];
myForm.username.value = "John Doe";
console.log(myForm.username.value);

This allows you to read and update form values dynamically.

Working With Links and Images

Links

let firstLink = document.links[0];
firstLink.style.color = "red";
firstLink.target = "_blank"; // Opens in new tab

Images

let firstImage = document.images[0];
firstImage.setAttribute("alt", "Updated Image");
firstImage.src = "new-image.jpg";

Useful Document Methods

  1. document.write() – Writes directly to the HTML page (mostly used for testing).

document.write("<h2>Hello from document.write()</h2>");

  1. document.createElement() – Creates a new element.

  2. document.createTextNode() – Creates a new text node.

  3. document.getElementById() / querySelector() – Selects elements.

  4. document.appendChild() – Adds an element to the DOM.

Practical Example

<div id="container">
    <h2>Old Heading</h2>
    <p>Old paragraph</p>
</div>

// Accessing document properties
console.log(document.title);
document.title = "Updated DOM Document Title";

// Creating and adding a new paragraph
let newPara = document.createElement("p");
newPara.textContent = "This paragraph is created using the document object.";
document.getElementById("container").appendChild(newPara);

// Modifying existing heading
document.querySelector("#container h2").textContent = "New Heading Text";

// Accessing form elements
let myForm = document.forms[0];
console.log(myForm[0].name);

Summary of the Tutorial

The Document object is the root of the DOM tree and the main gateway for JavaScript to access, modify, and manipulate web pages. Using the Document object, you can:

  • Access page metadata like title, URL, domain, and doctype

  • Work with body, head, forms, links, images, and scripts

  • Select elements anywhere on the page

  • Create new elements and text nodes

  • Dynamically update content, attributes, and styles

Mastering the Document object is essential before diving into DOM elements, events, and navigation, as it gives you full control of your webpage structure.

Practice Questions

  1. Write JavaScript to log the current page title and URL using the Document object.

  2. How would you dynamically change the page title to "My DOM Document Practice"?

  3. Using the Document object, change the background color of the <body> element to light gray.

  4. How can you log the domain of the current webpage using JavaScript?

  5. Using document.head, add a new <meta> element with name="author" and content="Your Name".

  6. Write code to count all <form> elements on the page and display the total number in the console.

  7. Access the first form on the page and set the value of the input field named "username" to "John Doe".

  8. How would you change the target attribute of the first link (<a>) on the page to _blank?

  9. Write JavaScript to update the alt attribute of the first image on the page to "Updated Image".

  10. Using document.createElement and document.createTextNode, create a new paragraph and append it to the <body>.

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top