What are the different methods to find HTML elements in DOM

If you want to access any element in an HTML page, you need to start with accessing the document object. Later you can use any of the below methods to find the HTML element,

1. document.getElementById(id): It finds an element by Id
2. document.getElementsByTagName(name): It finds an element by tag name (returns an node list)
3. document.getElementsByClassName(name): It finds an element by class name (returns an node list)
4. document.querySelector(cssSelector): It finds an element by css selector
5. document.querySelectorAll(cssSelector): It finds all elements by css selector (returns a node list)

Practical Code Example

// Methods to find HTML elements in the DOM:
document.getElementById('header');          // Single element by ID
document.getElementsByClassName('nav-item'); // Live HTMLCollection
document.getElementsByTagName('p');          // Live HTMLCollection
document.querySelector('.card > p:first-child'); // First matching CSS selector
document.querySelectorAll('.active-tab');        // Static NodeList of all matches