+91 88606 33966            edu_sales@siriam.in                   Job Opening : On-site Functional Trainer/Instructor | Supply Chain Management (SCM)
Accessing and modifying HTML document elements in JavaScript

To access and modify HTML document elements in JavaScript, you can use the Document Object Model (DOM). The DOM is a programming interface for web documents, providing a structured representation that can be manipulated using JavaScript.

Accessing Elements:

By ID:

// Access an element by its ID
var elementById = document.getElementById('yourElementId');

By Class Name:

// Access elements by their class name (returns a NodeList)
var elementsByClass = document.getElementsByClassName('yourClassName');

By Tag Name:

// Access elements by their tag name (returns a NodeList)
var elementsByTag = document.getElementsByTagName('yourTagName');

By CSS Selector:

// Access elements using a CSS selector (returns the first matching element)
var elementBySelector = document.querySelector('yourSelector');

// Access elements using a CSS selector (returns a NodeList of all matching elements)
var elementsBySelectorAll = document.querySelectorAll('yourSelector');

Modifying Elements:

// Change the text content of an element
elementById.textContent = 'New Text Content';

// Change the HTML content of an element
elementById.innerHTML = '<p>New HTML Content</p>';

// Change the value of an attribute
elementById.setAttribute('src', 'new-source.jpg');

// Add a class to an element

// Remove a class from an element

// Append a new element to an existing element
var newElement = document.createElement('div');
newElement.textContent = 'New Element';

// Remove an element

These are basic examples, and the DOM provides a rich set of methods and properties for more advanced manipulation of HTML documents. Always be mindful of browser compatibility and consider using libraries like jQuery for simplifying complex DOM manipulations.

Accessing and modifying HTML document elements in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top