Finding elements: getElementById and querySelectorAll

Which method retrieves an element by its id attribute?

The id attribute of an HTML element must be unique within the entire document.

Which method returns all elements inside a specified element that matches a CSS selector?

The method elem.__________ returns the first element that matches a CSS selector.

Match the DOM searching methods with their descriptions:

Which of the following methods can only be called on the document object?

The matches() method searches the DOM to find elements that match a CSS selector.

Which method is used to find the nearest ancestor (including the element itself) that matches a CSS selector?

The __________ method returns true if one element is a descendant of another.

Which of the following is a live HTMLCollection?

The querySelectorAll() method returns a live collection of elements.

What character can be used as the tag parameter in the getElementsByTagName() method to select all elements, regardless of their tag?

The method document.__________ returns elements with the specified name attribute.

In the context of DOM searching, what is the term for an element's parent, the parent of its parent, and so on, up to the top of the document?

The elem.closest(css) method includes the element itself in the search for the nearest matching ancestor.

What is the primary difference between querySelector() and querySelectorAll()?

Which DOM searching method is considered the most versatile due to its ability to use any CSS selector?

If there are multiple elements with the same id in a document, the behavior of document.getElementById() is __________.

Which of the following methods returns a static collection of elements?

If a JavaScript variable is declared with the same name as an element's id, the variable will always take precedence over the DOM element reference.

What does the following code output?

 First div


 Second div

let divs = document.querySelectorAll('div');
alert(divs.length);
// A new div is added to the DOM here (not shown in code)
alert(divs.length);

What is the return type of document.getElementsByTagName('div')?

The __________ property of an element can be modified to change its visual appearance using CSS.

Which method can be used to determine if an element matches a specific CSS pseudo-class?

The use of id-named global variables to access elements is a recommended practice for modern JavaScript development.

Given the following HTML:

  
A


What does the following JavaScript code output?
```javascript
let list = document.querySelector('ul');
let result = list.closest('div');
console.log(result);

Explain the difference between a live HTMLCollection and a static NodeList and provide an example of a method that returns each.

The __________ method is useful when iterating over a set of elements and needing to filter elements based on whether they match a certain CSS selector.

What is the potential issue with the following code?

document.getElementsByTagName('input').value = 5;

The document.contains() method can be used to check if a specified element is the root element of the document.

Match the following methods with their correct behavior when no matching element is found:

Given the following HTML:

  
    
      Item 1
    
  

What will document.querySelector('div > li') return?

Why is it generally better to use document.querySelector() or document.querySelectorAll() instead of the older document.getElementsBy*() methods?

Assuming the following HTML structure:

  
    Click me
  

The JavaScript code document.querySelector('button').__________('div.container') can be used to find the closest ancestor with the class 'container'

What is a key advantage of using elem.matches(css) within a loop when processing multiple DOM elements?

If elemA.contains(elemB) returns true, then elemB.contains(elemA) will always return false unless elemA and elemB are the same element.

Given the following code, what will be the output?

let outer = document.getElementById('outer');
let inner = document.getElementById('inner');
console.log(outer.contains(inner));
console.log(inner.contains(outer));

To retrieve all elements with the class 'highlight' within a specific element (e.g., with ID 'content'), you can use the following JavaScript code: document.getElementById('content').__________('.highlight');

Consider this code snippet:

  First
  Second

const divs = document.getElementsByTagName('div');
divs[0].append('Third')
console.log(divs.length)

What is the value of divs.length?

Given there are elements with name='my-element', then document.getElementsByName('my-element') excludes elements created dynamically after the initial page load.

How would you retrieve every <a> tag with an href whose value ends in .pdf inside a div with id='container', and then print the href of the 3rd such element?

Given an element elem, the code elem.__________(elem) would return true.