Page 183 - Web_Application_v2.0_C12_Fb
P. 183
Output:
Do you know?
The writeln() method works within
<PRE> tag.
Lab Assignment ‘n Activity 21 st Century #Creativity
Skills
#Technology Literacy
Create a JavaScript program to display the following in different lines and tick on the
circle.
Your favourite movie, favourite subject, and favourite hobby.
The current day of the week and time.
Your favourite leisure activity.
2.3 INTERACTING WITH HTML
The Document Object Model (DOM) lets JavaScript access, change, and control parts of a web page. It
represents the HTML document as a tree, where each part — like paragraphs, buttons, or images — is a
branch or leaf that JavaScript can modify.
HTML structures the web page, while JavaScript adds interactivity and behaviour. When a browser loads an
HTML file, JavaScript doesn’t directly understand the HTML. Instead, the browser creates the DOM from the
HTML, and JavaScript interacts with this model.
The DOM is like a tree made of objects, representing the HTML content. JavaScript doesn’t recognise HTML
tags (like <h1>), but it understands the related objects (such as h1) in the DOM.
Using the DOM, JavaScript can easily find, change, or remove elements on the page through different
functions.
Accessing Elements
You can access HTML elements using various DOM methods, which are as follows:
getElementById: Accesses an element by its ID.
const element = document.getElementById('myElementId');
getElementsByClassName: Accesses elements by their class name (returns a live HTMLCollection).
const elements = document.getElementsByClassName('ClassName');
getElementsByTagName: Accesses elements by their tag name (returns a live HTMLCollection).
const elements = document.getElementsByTagName('h1');
JavaScript Part 2 181

