How to Use the JavaScript Child Selector in the DOM?

The child selector in the DOM is used to select elements that are immediate children of a specified parent element. In JavaScript, you can use the querySelector or querySelectorAll method to select elements based on their CSS selector.

Here’s an example of how you can use the child selector to select all the p elements that are children of a div element:

let div = document.querySelector("div");
let pElements = div.querySelectorAll("p");

console.log(pElements);

In this example, the querySelector method is first used to select the div element. Then, the querySelectorAll method is called on the div element to select all the p elements that are children of the div. The resulting elements are stored in the pElements variable.

Note that querySelector and querySelectorAll return the first and all elements respectively that match the specified selector. If there are no matching elements, they return null.

If you want to select only the first child of a parent element, you can use the firstChild property:

let div = document.querySelector("div");
let firstChild = div.firstChild;

console.log(firstChild);

In this example, the firstChild property is used to select the first child of the div element. The resulting element is stored in the firstChild variable.