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
   178   179   180   181   182   183   184   185   186   187   188