JavaScript Document Object

In this chapter, we will learn about the JavaScript document object. The document object represents the HTML document loaded in the browser window. It provides methods and properties to manipulate the content, structure, and style of the document. We will cover:

• What is the Document Object?
• Accessing Elements
• Creating and Inserting Elements
• Modifying Elements
• Removing Elements
• Event Handling
• Simple Programs using the Document Object

What is the Document Object?

The document object is part of the Browser Object Model (BOM) and represents the web page loaded in the browser. It is the entry point for accessing and manipulating the content of the web page.

Accessing Elements

You can access elements in the document using various methods provided by the document object.

getElementById()

Returns the element with the specified ID.

let element = document.getElementById("myElement"); console.log(element); 

getElementsByClassName()

Returns a collection of elements with the specified class name.

let elements = document.getElementsByClassName("myClass"); console.log(elements); 

getElementsByTagName()

Returns a collection of elements with the specified tag name.

let elements = document.getElementsByTagName("div"); console.log(elements); 

querySelector()

Returns the first element that matches a specified CSS selector.

let element = document.querySelector(".myClass"); console.log(element); 

querySelectorAll()

Returns a collection of elements that match a specified CSS selector.

let elements = document.querySelectorAll(".myClass"); console.log(elements); 

Creating and Inserting Elements

You can create and insert new elements into the document using various methods.

createElement()

Creates a new element.

let newElement = document.createElement("div"); 

appendChild()

Appends a child element to a parent element.

let parent = document.getElementById("parentElement"); let child = document.createElement("div"); parent.appendChild(child); 

insertBefore()

Inserts a new element before a specified element.

let parent = document.getElementById("parentElement"); let newElement = document.createElement("div"); let referenceElement = document.getElementById("referenceElement"); parent.insertBefore(newElement, referenceElement); 

Modifying Elements

You can modify the attributes, content, and style of elements using various properties and methods.

Modifying Attributes

let element = document.getElementById("myElement"); element.setAttribute("class", "newClass"); element.removeAttribute("class"); 

Modifying Content

let element = document.getElementById("myElement"); element.innerHTML = "New Content"; element.textContent = "New Text Content"; 

Modifying Style

let element = document.getElementById("myElement"); element.style.color = "red"; element.style.fontSize = "20px"; 

Removing Elements

You can remove elements from the document using the removeChild() method.

Example

let parent = document.getElementById("parentElement"); let child = document.getElementById("childElement"); parent.removeChild(child); 

Event Handling

You can handle events on elements using the addEventListener() method.

Example

let button = document.getElementById("myButton"); button.addEventListener("click", () => { alert("Button clicked!"); }); 

Simple Programs using the Document Object

Program 1: Creating and Appending Elements

function addElement() { let newElement = document.createElement("p"); newElement.textContent = "This is a new paragraph."; document.body.appendChild(newElement); } addElement(); 

Output:

A new paragraph is added to the body of the document. 

Program 2: Modifying Content and Style

function modifyElement() { let element = document.getElementById("myElement"); element.textContent = "Content has been changed!"; element.style.color = "blue"; } modifyElement(); 

Output:

The content and style of the element with ID "myElement" are changed. 

Program 3: Removing an Element

function removeElement() { let parent = document.getElementById("parentElement"); let child = document.getElementById("childElement"); parent.removeChild(child); } removeElement(); 

Output:

The element with ID "childElement" is removed from its parent element. 

Conclusion

In this chapter, you learned about the JavaScript document object, including how to access, create, insert, modify, and remove elements. You also learned about event handling. Various use cases with simple programs were provided to demonstrate the usage of the document object. Understanding how to effectively use the document object is essential for manipulating the content and structure of web pages in JavaScript.