Week 9: Document Object Model (DOM) in JavaScript
Introduction to DOM
The Document Object Model (DOM) is a programming interface for web documents. It
represents the structure of an HTML or XML document as a tree of objects, where each node
is an object representing a part of the document. This structure allows JavaScript to interact
with the web page dynamically, enabling you to access, modify, and manipulate the content,
structure, and style of a web page.
The DOM is crucial for web development as it bridges the static content in an HTML page
with dynamic JavaScript functionality, providing a way for JavaScript to modify the page
content in real time.
Key features of the DOM:
• Hierarchical Structure: The DOM represents the HTML document as a tree, where
each element (e.g., div, p, img, etc.) is a node in the tree.
• Interactive: It allows JavaScript to change the page without reloading the entire page.
• Language-Independent: Although it is most commonly used with JavaScript, the
DOM is language-agnostic, meaning it can be manipulated by other programming
languages as well.
How JavaScript Interacts with HTML Elements
JavaScript interacts with HTML elements through the DOM by selecting and manipulating
nodes, attributes, and content. It provides various methods to interact with and modify HTML
elements, making websites dynamic and interactive.
1. Accessing DOM Elements:
JavaScript provides several methods to select HTML elements based on different criteria.
These methods allow you to interact with elements on the page.
• getElementById(): Selects an element by its unique id attribute.
• let header = [Link]("header");
• [Link](header); // Outputs the element with id "header"
• getElementsByClassName(): Selects all elements that share a given class name.
• let items = [Link]("item");
• [Link](items); // Outputs a collection of elements with class "item"
• getElementsByTagName(): Selects all elements of a given tag name.
• let paragraphs = [Link]("p");
• [Link](paragraphs); // Outputs all <p> elements on the page
• querySelector(): Selects the first element that matches a specified CSS selector.
• let firstItem = [Link](".item");
• [Link](firstItem); // Outputs the first element with class "item"
• querySelectorAll(): Selects all elements that match a given CSS selector.
• let allItems = [Link](".item");
• [Link](allItems); // Outputs a NodeList of all elements with class "item"
2. Modifying HTML Content:
Once you have selected an HTML element, you can modify its content and attributes.
• innerHTML: Gets or sets the HTML content of an element.
• let header = [Link]("header");
• [Link] = "New Header Text"; // Changes the content inside the header
element
• textContent: Gets or sets the textual content of an element (without HTML tags).
• let paragraph = [Link]("intro");
• [Link] = "This is a new paragraph text."; // Changes the text content
• innerText: Similar to textContent but respects styling (e.g., CSS display: none).
• let heading = [Link]("title");
• [Link] = "Updated Title"; // Updates the displayed text
3. Modifying Attributes:
You can manipulate the attributes of HTML elements using the DOM, such as href, src, id,
class, and more.
• getAttribute(): Retrieves the value of a specific attribute.
• let link = [Link]("myLink");
• let url = [Link]("href");
• [Link](url); // Outputs the href value of the link
• setAttribute(): Sets a new value for a specific attribute.
• let image = [Link]("myImage");
• [Link]("src", "[Link]"); // Changes the image source
• removeAttribute(): Removes an attribute from an element.
• let link = [Link]("myLink");
• [Link]("href"); // Removes the href attribute from the link
Manipulating DOM Elements Dynamically
JavaScript allows for real-time updates and dynamic changes to web pages by manipulating
the DOM elements. This capability is especially important in creating interactive user
interfaces and single-page applications (SPAs).
1. Creating New Elements:
You can create new HTML elements and add them to the document using JavaScript.
• createElement(): Creates a new element.
• let newDiv = [Link]("div");
• [Link] = "This is a new div element!";
• appendChild(): Adds a new child element to an existing element.
• let parentDiv = [Link]("parent");
• [Link](newDiv); // Adds the new div to the parent element
2. Removing Elements:
You can remove elements from the DOM using JavaScript.
• removeChild(): Removes a specific child element from its parent.
• let parentDiv = [Link]("parent");
• let childDiv = [Link]("child");
• [Link](childDiv); // Removes the child div from the parent div
• remove(): Removes an element from the DOM entirely.
• let element = [Link]("toRemove");
• [Link](); // Removes the element from the document
3. Modifying CSS Styles Dynamically:
You can also dynamically change the CSS properties of elements to create interactive visual
effects.
• style Property: Directly modifies the inline CSS of an element.
• let box = [Link]("box");
• [Link] = "blue"; // Changes the background color of the box
• [Link] = "20px"; // Changes the font size
4. Handling Events:
JavaScript allows you to interact with DOM elements by responding to user actions such as
clicks, key presses, and mouse movements. This is achieved through event listeners.
• addEventListener(): Registers an event listener for an element.
• let button = [Link]("myButton");
• [Link]("click", function() {
• alert("Button was clicked!");
• });
In this example, when the user clicks the button, an alert box appears. The addEventListener()
method can be used to handle any event type, such as click, mouseover, keydown, etc.
DOM Traversing
You can navigate the DOM tree to access elements relative to others. For example, you can
move from a parent node to its children, or from a child node to its parent.
• parentNode: Access the parent element of a node.
• let child = [Link]("child");
• let parent = [Link]; // Gets the parent of the child element
• childNodes: Access all child nodes of an element (including text nodes).
• let parent = [Link]("parent");
• let children = [Link]; // Returns a collection of child nodes
• firstChild: Access the first child node of an element.
• let firstChild = [Link];
• lastChild: Access the last child node of an element.
• let lastChild = [Link];
• nextSibling: Access the next sibling node.
• let nextSibling = [Link];
• previousSibling: Access the previous sibling node.
• let previousSibling = [Link];
Conclusion
In Week 9, you learned the following essential aspects of the Document Object Model
(DOM):
1. Introduction to DOM: The DOM is a tree-like structure that represents an HTML
document, allowing JavaScript to interact with, modify, and manipulate elements in
real-time.
2. Interacting with HTML Elements:
o JavaScript can access HTML elements through methods like getElementById(),
getElementsByClassName(), and querySelector().
o You can modify element content using innerHTML, textContent, and innerText.
o JavaScript also allows for modifying attributes with getAttribute(),
setAttribute(), and removeAttribute().
3. Manipulating DOM Elements Dynamically:
o JavaScript can create new elements with createElement(), add them with
appendChild(), and remove them with removeChild() or remove().
o You can modify the CSS styles of elements dynamically through the style
property.
o Event handling through addEventListener() allows JavaScript to respond to user
interactions like clicks, key presses, etc.
4. DOM Traversing: JavaScript provides ways to navigate the DOM tree using methods
like parentNode, childNodes, and sibling properties.
Understanding the DOM is critical for building interactive, dynamic websites, as it enables you
to create rich user experiences and allows for real-time content updates without refreshing the
page. This week’s knowledge will serve as a foundation for building interactive web
applications.
