Web Programming
HTML DOM
HTML DOM
The HTML Document Object Model (DOM) is a programming interface that
represents the structure of a web document (HTML or XML) as a tree of objects. It
allows developers to access and manipulate the content, structure, and styles of web
pages dynamically.
The DOM represents a web page as a hierarchical tree of nodes, where each node
corresponds to part of the document (elements, attributes, text, etc.).
HTML DOM
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a
paragraph.</p>
</body>
</html>
Key Concepts of DOM
● Nodes: Everything in the DOM is a node.
○ Document Node: Represents the entire document.
○ Element Nodes: Represent HTML elements like <div>, <p>, etc.
○ Attribute Nodes: Represent attributes like id="example".
○ Text Nodes: Contain the text within elements.
● Properties:
○ innerHTML: Gets or sets the HTML content inside an element.
○ outerHTML: Gets or sets the HTML content of the element including itself.
○ textContent: Gets or sets the text content of an element.
Key Concepts of DOM
● Methods:
○ getElementById(id): Selects an element by its id.
○ getElementsByTagName(tagName): Selects all elements with the specified
tag name.
○ querySelector(selector): Selects the first element matching a CSS selector.
○ querySelectorAll(selector): Selects all elements matching a CSS selector.
● Events: DOM elements can respond to user interactions through events
○ Examples: onclick, onmouseover, onchange, onkeydown.
DOM Document and Elements
● The document Object: The document object is the root of the HTML DOM tree.
It represents the entire HTML document loaded into the browser and serves as
the entry point to access and manipulate the DOM.
○ [Link] refers to the root <html> element of the
document.
○ [Link] refers to the <body> element of the document.
○ [Link] refers to the <head> element of the document.
○ [Link] and [Link] access the current page's URL and
domain.
DOM Document and Elements
DOM elements are the building blocks of the document. Each HTML tag (e.g., <div>,
<p>) corresponds to an element node in the DOM tree.
● Accessing Elements:
let element = [Link]("myElement");
● Changing Content:
○ innerHTML: Sets or gets the HTML content inside an element.
[Link] = "<b>Bold Text</b>";
○ textContent: Sets or gets the plain text inside an element.
[Link] = "Just text here.";
● Changing Styles:
[Link] = "blue";
[Link] = "20px";
DOM Document and Elements
● Traversing Elements: Accessing parent, child, or sibling elements
let parent = [Link];
let firstChild = [Link];
let nextSibling = [Link];
● Handling Classes:
[Link]("newClass");
[Link]("oldClass");
[Link]("toggleClass");
DOM Methods
DOM methods are functions used to interact with and manipulate the DOM. They
allow developers to add, remove, modify, or traverse elements.
Following are some common DOM methods.
● Finding Elements:
○ getElementById(id): Selects a single element by its ID.
let title = [Link]("mainTitle");
○ getElementsByTagName(tagName): Selects all elements with a specific tag
name.
let paragraphs = [Link]("p");
○ getElementsByClassName(className): Selects all elements with a specific
class name.
let items = [Link]("item");
DOM Methods
● Finding Elements:
○ querySelector(selector): Retrieves the first matching element using a CSS
selector.
let firstButton =
[Link]("[Link]");
○ querySelectorAll(selector): Retrieves all matching elements.
let allButtons = [Link]("button");
● Creating and Adding Elements:
○ createElement(tagName): Creates a new element.
let newDiv = [Link]("div");
[Link] = "Hello!";
○ appendChild(node): Adds a new child to an element.
[Link](newDiv);
DOM Methods
● Removing Elements:
○ removeChild(node): Removes a child element from its parent.
let parent = [Link]("container");
let child = [Link]("child");
[Link](child);
○ remove(): Directly removes an element.
[Link]("child").remove();
● Modifying Elements:
○ setAttribute(attrName, value): Adds or modifies an attribute.
let img = [Link]("img");
[Link]("alt", "New Description");
○ getAttribute(attrName): Retrieves the value of an attribute.
let src = [Link]("src");
DOM Methods
● classList Methods:
○ add(): Adds a class.
○ remove(): Removes a class.
○ toggle(): Toggles a class.
let box = [Link](".box");
[Link]("active");
DOM Manipulation
● Change Background Color:
[Link] [Link]
<body> const body = [Link];
<div> … </div> [Link] = ‘lightblue’;
</body>
DOM Manipulation
● Change Background Image:
[Link] [Link]
<body> const bg =
<div id = ‘container> [Link]('container');
[Link] =
</div>
'url(./[Link])';
</body>
[Link] = '500px';
[Link]= 'no-repeat';
DOM Manipulation
● Change Font Size, Text Color, Alignment etc:
[Link] [Link]
<body> const heading =
<div id = ‘container>
[Link]('heading');
<h3 id=’heading’>Happy
Coding</h3> [Link] = '30px';
<p id=’para’>Keep Practising</p> [Link] = 'lightgray';
</div> [Link] = 'center';
</body>
DOM Manipulation
● Create New Image Element and Set Attributes (src, width, etc):
[Link] [Link]
<body> const newImage =
[Link]('img');
<div id = ‘container>
const parent =
</div> [Link]('container');
</body>
[Link]('src',
'./[Link]');
[Link]('width', '200px');
[Link](newImage);
DOM Manipulation
● Change InnerText and InnerHTML:
[Link] [Link]
<body> const p =
<div id = ‘container> [Link]('para');
<h3 id=’heading’>Happy [Link] = 'new text';
Coding</h3> const h3 =
<p id=’para’>Keep Practising</p> [Link]('heading');
</div> [Link] = '<p>This is the new
HTML </p>'
</body>
DOM Manipulation
● Traverse an Array of Elements:
[Link] [Link]
<div> const divs =
[Link]('borde
<div class="border"></div> r');
<div class="border"></div> for(let i=0; i<[Link]; i++){
<div class="border"></div> divs[i].innerText = `This is div${i}`;
divs[i].[Link] = '2px solid black';
<div class="border"></div> divs[i].[Link] = '20px';
</div> }
DOM Manipulation
● Add an Existing class to all elements:
[Link] [Link]
<head>
<style>
.set-width{ const divs =
width: 500px;
margin: auto; [Link]('bo
}
</style> rder');
</head> for(let i=0; i<[Link]; i++){
<body>
<div> divs[i].[Link]('set-width');
<div class="border"></div>
<div class="border"></div> }
</div>
</body>
Practice Problems
● Add a new row to a table
● Create an unordered list and add new list items
● Apply the same class to all list items
● Create multiple cards using loop and apply the same class to all of them
● Make all the buttons of your website look the same
Thank You.