Hackforge Academy

Explanation

getElementById() selects an HTML element using its unique id attribute.

Code:

const title = document.getElementById('title');

console.log(title);

Explanation

querySelector() selects the first element matching a CSS selector.

Code:

const title = document.querySelector('#title');
const firstBox = document.querySelector('.box');

Explanation

querySelector() can select elements using tags, classes, IDs, and complex CSS selectors.

Code:

document.querySelector('p');
document.querySelector('.card');
document.querySelector('#login');
document.querySelector('.menu li');

Explanation

querySelector() returns null when no matching element is found.

Code:

const element = document.querySelector('#missing');

if (element) {
  console.log(element);
}

Explanation

getElementById() is specialized for IDs, while querySelector() provides more flexible CSS selector-based searching.

Code:

document.getElementById('title');

document.querySelector('#title');
document.querySelector('.title');
document.querySelector('h1');