JavaScript Document Object and DOM Methods

The JavaScript document object represents the web page loaded in the current browser tab. It is the main entry point to the Document Object Model (DOM), so JavaScript can find elements, read or change their content and attributes, create new elements, and respond to what happens on the page.

const heading = document.querySelector("h1");
heading.textContent = "Updated with JavaScript";

In this example, document.querySelector() finds the first <h1> element and textContent replaces its text. Changes made through the DOM affect the current page in memory; they do not rewrite the original server file.

Common pattern: find an element, read or change it, then attach behavior when needed.

const message = document.getElementById("message");
message.textContent = "Welcome to plus2net";

Table of Contents

Document object and DOM
Finding elements
Creating and inserting elements
Useful document properties
Document events and focus
Document tutorial reference
Common mistakes

Document Object and DOM Top ↑

The DOM is a tree representation of the HTML document. Elements such as headings, paragraphs, links, forms, and images become nodes that JavaScript can work with. The global document object exposes the methods and properties used to access that tree.

const title = document.title;
const url = document.URL;
const links = document.links.length;

console.log(title, url, links);

The window object represents the browser window or tab. The document object is a property of that window and represents the page inside it. In normal browser JavaScript, document and window.document refer to the same document.

Finding Elements in the Document Top ↑

JavaScript provides several ways to locate elements. Use the method that best matches the structure of the page.

Method	What it returns	Typical use
`getElementById()`	One element or `null`	Find a unique element by its `id`.
`getElementsByName()`	A `NodeList`	Find elements sharing the same `name`, especially form controls.
`getElementsByTagName()`	A live `HTMLCollection`	Find all elements with a tag such as `p` or `img`.
`querySelector()`	First matching element or `null`	Use a CSS selector to find one element.
`querySelectorAll()`	A static `NodeList`	Use a CSS selector to find multiple elements.

const firstCard = document.querySelector(".card");
const allCards = document.querySelectorAll(".card");

allCards.forEach((card) => {
  card.classList.add("border");
});

Working with an element by ID is covered separately in the forms section.

Creating and Inserting Elements Top ↑

document.createElement() creates an element object, but the new element is not visible until it is inserted into the DOM.

const note = document.createElement("p");
note.textContent = "This paragraph was created with JavaScript.";
document.body.append(note);

For plain text, prefer textContent. Use innerHTML only when you intentionally need to insert HTML and the content is trusted or safely sanitized.

Useful Document Properties Top ↑

Property / method	Purpose
`document.title`	Read or change the page title.
`document.URL`	Read the complete URL of the current document.
`document.links`	Access links in the document.
`document.anchors`	Legacy collection of anchors that have a `name` attribute.
`document.domain`	Read the current document domain; changing it is deprecated and should not be used in new code.
`document.lastModified`	Browser-provided string describing the document's last modification time.
`document.referrer`	Read the referring document URL when the browser makes it available.
`document.cookie`	Read or write cookies that are available to JavaScript.

Document Events and Focus Top ↑

The document can also receive events. For example, DOMContentLoaded runs after the HTML has been parsed, and document.hasFocus() reports whether the document currently has focus.

document.addEventListener("DOMContentLoaded", () => {
  console.log("The DOM is ready.");
});

Document Tutorial Reference Top ↑

Topic	What it covers
createElement()	Create and insert elements dynamically.
getElementsByName()	Work with multiple elements that share a `name`.
getElementsByTagName()	Find elements by HTML tag name.
Document title	Read and update the page title.
Document URL	Read the current page URL.
lastModified	Read the browser-reported last modified value.
domain	Current document domain and legacy behavior.
document.write()	Legacy document-writing method and safer modern alternatives.
links	Access link elements in the document.
anchors	Access named anchors.
hasFocus()	Check whether the document has focus.

Common Mistakes Top ↑

Running code before the element exists: place the script after the HTML it uses or wait for DOMContentLoaded.
Assuming a lookup always succeeds: methods such as getElementById() and querySelector() can return null.
Using innerHTML for plain text: use textContent when no HTML is needed.
Using old document collections for new code: modern selectors are usually clearer, although older methods remain useful and widely supported.

JavaScript

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Subscribe to our YouTube Channel here

JavaScript Document Object and the DOM