Modern JavaScript from the Beginning - Second Edition - DOM Selectors - Single Elements

The video tutorial covers methods for selecting single elements in the DOM using JavaScript. It begins with an introduction to the getElementById method, explaining how to retrieve elements by their ID and manipulate their attributes. The tutorial then introduces the querySelector method, highlighting its flexibility in selecting elements using CSS selectors. The video emphasizes the importance of these methods in dynamic web development, allowing for manipulation of content and styles directly through JavaScript.

Which method is used to select a single element by its ID in the DOM?

• document.getElementByClassName

• document.getElementById

• document.getElementsByTagName

• document.querySelectorAll

What method would you use to retrieve an attribute value from a DOM element?

• querySelector

• getAttribute

• setAttribute

• getElementById

How can you change the text content of a DOM element?

• Using innerHTML

• Using textContent

• Using setAttribute

• Using getElementById

Which property would you use to include HTML tags within the content of a DOM element?

• innerText

• textContent

• innerHTML

• outerHTML

What is the correct way to change the background color of an element using JavaScript?

• element.style.backgroundColor = 'red';

• element.setAttribute('background-color', 'red');

• element.backgroundColor = 'red';

• element.style.background-color = 'red';

What is the purpose of using camel case in JavaScript for CSS properties?

• To ensure compatibility with all browsers

• To avoid syntax errors

• To make the code more readable

• To match the CSS syntax

What is the main advantage of using document.querySelector over getElementById?

• It allows selection by any CSS selector.

• It can select multiple elements at once.

• It is faster than getElementById.

• It only works with elements that have IDs.

Which of the following can be used as a selector in document.querySelector?

• Only tag names

• Any valid CSS selector

• Only classes

• Only IDs

How can you select the second list item using document.querySelector?

• document.querySelector('li:nth-child(2)')

• document.querySelector('li:nth-of-type(2)')

• document.querySelector('li:nth(2)')

• document.querySelector('li:second-child')

Can document.querySelector be used on elements other than the document?

• Only on elements with IDs.

• Only on elements with classes.

• Yes, it can be used on any element.

• No, it can only be used on the document.