Javascript select all child elements

Question

A child selector matches all child elements of a specified element. It is composed of two or more selectors that are separated by ">".

Table of Contents Show

Example of selecting all child elements:
Example of selecting all child elements recursively:
How do I get all the elements of my child?
How do you select all child nodes?
How do I select all Div children?
How do you get children in Javascript?

A child selector has the following syntax:

This syntax selects all child elements. If you want to select child elements recursively, use the syntax below.

div.class,
div.class>* {
  // CSS Property
}

First, we’ll explain how to select all child elements.

Place two <span> elements inside a <div>, then add another <span> inside a <p> .
Add two more <span> elements after <div>.

<div>
  <span>Paragraph 1</span>
  <span>Paragraph 2</span>
  <p>
    <span>Paragraph 3</span>
  </p>
</div>
<span>Paragraph 4</span>
<span>Paragraph 5</span>

Add the display property set to "block" for all the <span> elements.
Add a child selector and set the background-color property.

span {
  display: block;
}

div>span {
  background-color: #9ba2a3;
}

Let’s see the full code.

Example of selecting all child elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        display: block;
      }
      div > span {
        background-color: #9ba2a3;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Paragraph 1</span>
      <span>Paragraph 2</span>
      <p>
        <span>Paragraph 3</span>
      </p>
    </div>
    <span>Paragraph 4</span>
    <span>Paragraph 5</span>
  </body>
</html>

Result

Paragraph 1 Paragraph 2

Paragraph 3

Paragraph 4 Paragraph 5

Now, we’ll discuss another example where we select all child elements recursively. In the following example, we use the second syntax mentioned above and add background-color to the div class. The asterisk (*) matches any element.

Example of selecting all child elements recursively:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      span {
        display: block;
      }
      div.example,
      div.example > * {
        background-color: #9ba2a3;
      }
    </style>
  </head>
  <body>
    <div class="example">
      <span>Paragraph 1</span>
      <span>Paragraph 2</span>
      <p>
        <span>Paragraph 3</span>
      </p>
    </div>
    <span>Paragraph 4</span>
    <span>Paragraph 5</span>
  </body>
</html>

How do I get all the elements of my child?

To get all child nodes of an element, you can use the childNodes property. This property returns a collection of a node's child nodes, as a NodeList object. By default, the nodes in the collection are sorted by their appearance in the source code. You can use a numerical index (start from 0) to access individual nodes.

How do you select all child nodes?

Element. children includes only element nodes. To get all child nodes, including non-element nodes like text and comment nodes, use Node. childNodes .