HTML DOM selectAllChildren() Method

0 1 1 minute read

The selectAllChildren() method adds all the children of the specified node to the current selection.

Syntax:

selection.selectAllChildren( parentNode )

Parameters:

parentNode: The node whose children are to be selected.

Example: In this example, all the child elements of the parent div will get selected on the button click using this method.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>zambiatek</title>
</head>
 
<body>
    <main>
        <h1>zambiatek</h1>
    </main>
    <div>
        <p>child 1</p>
        <p>child 2</p>
        <p>child 3</p>
    </div>
    <button onclick="select()">
        click
    </button>
 
    <script>
        const pNode = document
            .querySelector('div');
        function select() {
            window.getSelection()
                .selectAllChildren(pNode);
        };
    </script>
</body>
 
</html>

Output: Click the button to select the child node of the parent div:

Supported Browsers: The browsers supported by the selectAllChildren() method are listed below:

Google Chrome
Edge
Firefox
Opera
Safari
Internet Explorer.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!