matches, closest and contains | JavaScript Tutorial in Hindi #37

Summary

This video tutorial delves into the JavaScript methods matches, closest, and contains for efficient DOM manipulation. It illustrates how matches() determines if an element fits a CSS selector, with examples using getElementById and class checks. closest() is explained as a method to find the nearest ancestor matching a selector, demonstrated with a nested element scenario. Lastly, contains() is showcased to check if one element is within another, including self-containment. The presenter emphasizes the practicality of these methods for developers, ensuring broader browser compatibility and efficient DOM traversal.

Takeaways

• 🔍 The video discusses JavaScript methods for DOM manipulation, specifically `matches`, `closest`, and `contains`.
• 🎯 The `matches` method checks if an element matches a given CSS selector, returning `true` or `false`.
• 📚 It's demonstrated that using `getElementById` directly in the console can return an element by its ID in modern browsers, but it's not recommended due to cross-browser compatibility concerns.
• 📝 The script shows a practical example where `matches` is used to check if an element has a specific class, like `box`.
• 🌐 The `closest` method is explained as a way to find the nearest ancestor element that matches a given CSS selector.
• 🔗 An example is provided where `closest` is used to find an ancestor with the class `box` from a `span` element nested within it.
• 🏢 The `contains` method is introduced to determine if one element is a descendant of another, or if they are the same element.
• 🔎 A demonstration is given where `contains` is used to check if an element with `id1` contains a `span` element with `id sp1`.
• 📈 The video emphasizes the utility of these methods for developers working with DOM manipulation in JavaScript.
• 💡 The presenter encourages viewers to watch the next video for practice questions, hinting at an interactive learning approach.

Q & A

What are the three important methods for searching DOM mentioned in the script?

The three important methods for searching DOM mentioned are `matches`, `closest`, and `contains`.

What does the `matches` method in JavaScript do?

The `matches` method checks if an element matches a specific CSS selector, returning true if it does, and false otherwise.

How can you get an element by its ID without using `getElementById` in JavaScript?

In modern browsers, you can directly access an element by its ID using the ID name, like `console.log(id1)`, but this is not recommended as it's not a standard practice and may not work in all browsers.

What is the purpose of the `closest` method in JavaScript?

The `closest` method is used to find the nearest ancestor of the current element that matches a given CSS selector.

How does the `contains` method work in JavaScript?

The `contains` method checks if one element is a descendant of another element, returning true if it is, and false otherwise. It also returns true if the elements are the same.

What is the difference between `document.querySelector` and `elem.matches(CSS)`?

While `document.querySelector` returns the first element that matches a CSS selector, `elem.matches(CSS)` checks if a specific element matches the CSS selector and returns a boolean value.

Why is it important to use `document.getElementById` instead of directly accessing an element by its ID?

Using `document.getElementById` is important for cross-browser compatibility and adherence to standard practices, ensuring that your code works in all browsers, not just modern ones.

What does the script suggest when using IDs for accessing elements in JavaScript?

The script suggests that while modern browsers may allow direct access to elements by their ID, it is not a good practice and recommends using `document.getElementById` for consistency and compatibility.

How can you determine if an element is inside another element using JavaScript?

You can use the `contains` method to determine if one element is inside another. For example, `elemA.contains(elemB)` will return true if `elemB` is inside `elemA`.

What should you do if you face issues with video visibility in the playlist mentioned in the script?

If you face issues with video visibility, you should comment on the video or playlist detailing the exact problem, such as not being able to see the last videos or the middle ones.

What is the significance of the `.box` class in the examples provided in the script?

The `.box` class is used in the script to demonstrate how the `matches` method works, by checking if an element with this class matches a given CSS selector.