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

