How do I select a specific child in JavaScript?

Question

Description: Get the children of each element in the set of matched elements, optionally filtered by a selector.

Table of Contents Show

How to select specific child element in JavaScript?
How to check child element in JavaScript?
How to select nth child in JavaScript?
How do I select a specific element in JavaScript?

version added: 1.0
- selector
  Type:
  A string containing a selector expression to match elements against.

Given a jQuery object that represents a set of DOM elements, the .children() method allows us to search through the children of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well. Note also that like most jQuery methods, .children() does not return text nodes; to get all children including text and comment nodes, use


$( "ul.level-2" ).children().css( "background-color", "red" );

1.

The .children() method optionally accepts a selector expression of the same type that we can pass to the


$( "ul.level-2" ).children().css( "background-color", "red" );

3 function. If the selector is supplied, the elements will be filtered by testing whether they match it.

Consider a page with a basic nested list on it:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17


<ul class="level-1">



  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>



</ul>

If we begin at the level-2 list, we can find its children:

1


$( "ul.level-2" ).children().css( "background-color", "red" );

The result of this call is a red background behind items A, B, and C. Since we do not supply a selector expression, all of the children are part of the returned jQuery object. If we had supplied one, only the matching items among these three would be included.

The read-only children property returns a live HTMLCollection which contains all of the child elements of the element upon which it was called.

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

An HTMLCollection which is a live, ordered collection of the DOM elements which are children of node. You can access the individual child nodes in the collection by using either the item() method on the collection, or by using JavaScript array-style notation.

If the element has no element children, then children is an empty list with a children0 of children1.

How to select specific child element in JavaScript?

To get the first child element of a specified element, you use the firstChild property of the element:.

let firstChild = parentElement.firstChild; ... .

let content = document.getElementById('menu'); let firstChild = content.firstChild.nodeName; console.log(firstChild); ... .

#text..

How to check child element in JavaScript?

Approach:.

Select the Parent Element..

Use one of the firstChild, childNodes. length, children. length property to find whether an element has a child or not..

hasChildNodes() method can also be used to find the child of the parent node..

How to select nth child in JavaScript?

jQuery :nth-child() Selector The :nth-child(n) selector selects all elements that are the nth child, regardless of type, of their parent. Tip: Use the :nth-of-type() selector to select all elements that are the nth child, of a particular type, of their parent.