What properties can I change on elements selected by querySelectorAll()?

Answers:

When you use querySelectorAll() in JavaScript, it returns a NodeList of elements that match the specified CSS selector(s). You can modify various properties and attributes of the elements in this NodeList. Here are some common properties you can change:

Style Properties: You can change the inline CSS styles of the elements.

const elements = document.querySelectorAll('.my-class');
elements.forEach(element => {
    element.style.color = 'red'; // Change text color
    element.style.backgroundColor = 'blue'; // Change background color
});

Attributes: You can change the attributes of the elements, such as src, href, alt, etc.

const images = document.querySelectorAll('img');
images.forEach(image => {
    image.src = 'new-image.jpg'; // Change the image source
});

Text Content: You can change the text content of the elements.

const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(paragraph => {
    paragraph.textContent = 'New text content';
});

HTML Content: You can change the inner HTML of the elements.

const divs = document.querySelectorAll('div');
divs.forEach(div => {
    div.innerHTML = '<strong>New HTML content</strong>';
});

Classes: You can add, remove, or toggle classes on the elements.

const elements = document.querySelectorAll('.my-class');
elements.forEach(element => {
    element.classList.add('new-class'); // Add a class
    element.classList.remove('old-class'); // Remove a class
    element.classList.toggle('toggle-class'); // Toggle a class
});

Event Listeners: You can add or remove event listeners for user interactions.

const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
    button.addEventListener('click', () => {
        alert('Button clicked!');
    });
});

Data Attributes: You can change custom data attributes.

const items = document.querySelectorAll('[data-item]');
items.forEach(item => {
    item.dataset.value = 'newValue'; // Change data attribute
});

Dimensions: You can manipulate width, height or other layout-related CSS styles.

const divs = document.querySelectorAll('.box');
divs.forEach(div => {
    div.style.width = '200px'; // Set width
    div.style.height = '100px'; // Set height
});

Disabled State: Change whether form elements like inputs or buttons are enabled or disabled.

const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
    input.disabled = true; // Disable the input
});

Visibility: Modify visibility using CSS properties.

const hiddenElements = document.querySelectorAll('.hide');
hiddenElements.forEach(element => {
    element.style.display = 'none'; // Hide elements
});

When modifying properties of elements returned by querySelectorAll(), remember that you typically need to iterate over each element in the NodeList, as it does not return a single element but rather a collection of elements.

What properties can I change on elements selected by querySelectorAll()?

Answers:

Related Questions: