Mastery Assessment: Advanced DOM Selectors

Complete this assessment with 100% score to master this chapter.

01What is the primary difference between a collection returned by `querySelectorAll` and one returned by `getElementsByClassName`?

02Which method is best suited for event delegation to find the nearest ancestor matching a selector?

03What does the `element.matches(selector)` method return?

04To avoid XSS vulnerabilities when inserting user-provided text, which property should you prefer over `innerHTML`?

05What is 'Layout Thrashing' in the context of DOM manipulation?

06Which advanced CSS pseudo-class, supported in modern browsers, allows you to select a parent element based on its descendants?

07When using `querySelectorAll('[data-id^="user-"]')`, what does the `^=` operator signify?

08Which high-performance DOM API allows for efficient, low-level filtering and iteration of the DOM tree without creating intermediate arrays?

09What is the primary benefit of using a `DocumentFragment` when performing batch DOM updates?

10How does the browser's CSS engine typically process complex selectors like `div.container > ul li.active`?