Page 331 - Webapplication11_C11_Flipbook
P. 331

JavaScript easily interprets the DOM, using it as a bridge to access and manipulate elements on the page. Through the
                 DOM, JavaScript can interact with various objects (like h1, p, etc.) by utilising 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('myClassName');

                 Ð ÐgetElementsByTagName: Accesses elements by their tag name (returns a live HTMLCollection).
                   const elements = document.getElementsByTagName('p');
                 Ð ÐquerySelector: Accesses the first element that matches a specified CSS selector.
                   const element = document.querySelector('.myClassName');

                 Ð ÐquerySelectorAll: Accesses all elements that match a specified CSS selector (returns a NodeList).
                   const elements = document.querySelectorAll('div.myClassName');
                 Modifying Elements

                 Once you have access to an element, you can modify its properties. Some tasks are as follows:

                 Ð ÐChanging Text Content: Updates the text inside an HTML element using JavaScript.
                   const element = document.getElementById('myElementId');
                   element.textContent = 'New Text Content';

                 Ð ÐChanging HTML Content: Replaces the inner HTML of an element with new HTML markup.
                   const element = document.getElementById('myElementId');
                   element.innerHTML = '<strong>Bold Text</strong>';

                 Ð ÐChanging Styles: Modifies the CSS properties of an element to change its appearance.
                   const element = document.getElementById('myElementId');
                   element.style.color = 'blue';

                   element.style.fontSize = '20px';
                 Adding and Removing Elements
                 You can also add or remove elements from the DOM. Some tasks are as follows:

                 Ð ÐCreating  and  Appending  New  Elements:  Generates  new  HTML  elements  dynamically  and  adds  them  to  the
                   document.

                   const newElement = document.createElement('div');
                   newElement.textContent = 'I am a new div';
                   document.body.appendChild(newElement);
                 Ð ÐRemoving an Element: Deletes an existing HTML element from the DOM.

                   const element = document.getElementById('myElementId');
                   element.parentNode.removeChild(element);
                 Example: To interact with HTML Web page using DOM functions


                                                                                                  JavaScript Part 1  329
   326   327   328   329   330   331   332   333   334   335   336