DOM Selectors for Single Elements

The video tutorial covers DOM selectors in JavaScript, focusing on single and multiple element selectors. It explains the use of getElementById and querySelector, demonstrating how to manipulate styles and content in the DOM. The tutorial also highlights the inefficiency of repeated DOM access and suggests caching elements in variables. The use of CSS pseudo-classes with querySelector is also discussed.

What is the main reason for the shift from jQuery to Vanilla JavaScript for DOM manipulation?

• jQuery offers more features.

• Vanilla JavaScript is now easier to use and less bloated.

• jQuery is faster.

• Vanilla JavaScript is more complex.

Which method is used to select a single element by its ID in Vanilla JavaScript?

• querySelector

• getElementById

• getElementsByClassName

• querySelectorAll

What happens if you use 'getElementById' on a class that appears multiple times in the DOM?

• It selects the last element with that class.

• It selects all elements with that class.

• It throws an error.

• It selects the first element with that class.

How can you change the background color of an element using JavaScript?

• element.setBackground('color');

• element.changeColor('color');

• element.css('background', 'color');

• element.style.backgroundColor = 'color';

Which property would you use to change the text content of a DOM element?

• innerHTML

• textContent

• outerHTML

• innerText

What is a key advantage of using 'querySelector' over 'getElementById'?

• It can only select elements by ID.

• It is only used for styling.

• It allows selection using any CSS selector.

• It is faster than 'getElementById'.

How can you select an element by its class using 'querySelector'?

• document.querySelector('#className')

• document.querySelector('.className')

• document.querySelector('className')

• document.querySelector('class')

What does 'querySelector' return when selecting multiple elements?

• An array of elements

• An HTMLCollection

• A single element

• A NodeList

Which pseudo-class can be used to select the last child of a list?

• :first-child

• :nth-child

• :last-child

• :only-child

Why is it recommended to cache DOM elements in variables?

• To avoid repeated DOM queries and improve efficiency

• To prevent errors

• To make the code shorter

• To make the code more readable