Ms. Amna Altaf Unit:3 Programming Fundamentals Computer Sc
Unit: 3 Programming Fundamentals
Q1. What is document object model? Explain with the help of an example?
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a web
page in a hierarchical tree format, where each element, attribute, and piece of text is a node in this tree. The DOM
allows programming languages like JavaScript to interact with and manipulate the content and structure of web pages
dynamically.
Basic Structure of the DOM:
i. Document: The root node representing the entire document.
ii. Elements: Nodes representing HTML tags, such as <div>, <p>, <a>, etc.
iii. Attributes: Nodes representing attributes of HTML elements, such as class, id, and href.
iv. Text: Nodes representing the text content inside elements.
Example: Consider the following HTML snippet:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">Click here</a>
</body>
</html>
In this example, the DOM structure would look like this:
Document
โโโ html
โโโ head
โ โโโ title
โ โโโ "My Web Page"
โโโ body
โโโ h1
โ โโโ "Welcome to My Web Page"
โโโ p
โ โโโ "This is a paragraph."
โโโ a
โโโ "Click here"
โโโ href="https://www.example.com"
Q2. Write the code to differentiate between different types of headings in HTML.
The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the
least important heading. Note: Only use one <h1> per page - this should represent the main heading/subject for the
whole page.
