Javascript select child of this

Last updated: Jan 11, 2023
Reading time · 6 min

banner

# Table of Contents

# Get Child Element by Class using JavaScript

To get a child element by class:

Use the document.querySelector() method to get the parent element.
Call the querySelector method on the parent element passing it the class name as a parameter.
For example, parent.querySelector(‘.first’) gets the child with class first .

Here is the HTML for the examples in the article.

Copied!
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> div id="parent"> div class="first">Child 1div> div class="second">Child 2div> div> script src="index.js"> script> body> html>

And here is the related JavaScript code.

Copied!
const parent = document.querySelector('#parent'); console.log(parent); // 👉️ div#parent const child1 = parent.querySelector('.first'); console.log(child1); // div.first const children = parent.querySelectorAll('.first'); console.log(children); // 👉️ [div.first]

If you need to get a Child element by Tag or ID, click on the corresponding subheading:

We used the document.querySelector method to get the parent element by its id .

In this scenario, we could have used the document.getElementById method to achieve the same result.

Copied!
const parent = document.getElementById('parent');

The next step is to call the querySelector method on the parent element.

When the querySelector method is scoped to a specific element, it only selects the children of the element the method was called on.

The Element.querySelector method returns the first child element that matches the provided selector.

If you need a collection of the children that have the specific class, use the Element.querySelectorAll method.

Copied!
const parent = document.querySelector('#parent'); console.log(parent); // 👉️ div#parent const children = parent.querySelectorAll('.first'); console.log(children); // 👉️ [div.first]

Note that with the approach of passing the class name to the querySelector and querySelectorAll methods, we are selecting all of the children of the element.

This includes nested children that have the supplied class.

# Only get the Direct children of a DOM element

If you only want to target direct children of the DOM element, use the :scope pseudo-class selector.

Here is the HTML for the example.

Copied!
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> div id="parent"> div class="first"> Child 1 div class="first">Nested Child 1div> div> div class="second"> Child 2 div> div> script src="index.js"> script> body> html>

And here is the related JavaScript code.

Copied!
const parent = document.querySelector('#parent'); console.log(parent); // 👉️ div#parent // ✅ get the first direct child with specific class const child1 = parent.querySelector(':scope > .first'); console.log(child1); // div.first // ✅ get all direct children with specific class const children = parent.querySelectorAll(':scope > .first'); console.log(children); // 👉️ [div.first]

We used the :scope pseudo-class to select the direct children of the DOM element that has a class of first .

When used with methods like querySelector and querySelectorAll , :scope matches the element on which the method was called (the parent).

You can use the querySelectorAll method to get all direct child elements with the specified class or the querySelector method to get only the first child element with the given class.

If you don’t need access to the parent element, you can turn this into a one step process.

Copied!
const children = document.querySelectorAll('#parent > .first'); console.log(children); // 👉️ [div.first] const child = document.querySelector('#parent > .first'); console.log(child); // 👉️ div#first

This selector works in the same way as using :scope, but doesn’t require us to call the document.querySelectorAll method scoped to a particular element.

When used with the querySelector or querySelectorAll methods, :scope matches the element on which the method was called (the parent).

The example shows how to get all div elements that are direct children of an element with an id set to parent .

# Get Child Element by ID using JavaScript

To get a child element by id:

Use the document.querySelector() method to get the parent element.
Call the querySelector method on the parent element passing it the id as a parameter.
For example, parent.querySelector(‘#first’) gets the child with id first .

Here is the HTML for the examples in the article.

Copied!
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> div id="parent"> div id="first">Child 1div> div>Child 2div> div> script src="index.js"> script> body> html>

And here is the related JavaScript code.

Copied!
const parent = document.querySelector('#parent'); console.log(parent); // 👉️ div#parent const child = parent.querySelector('#first'); console.log(child); // div#first

We used the document.querySelector method to get the parent element by its id .

In this scenario, we could have used the document.getElementById method to achieve the same result, e.g.:

Copied!
const parent = document.getElementById('parent');

Notice that when using the querySelector method we prefix the id with a hash # and when using getElementById — we don’t.

The next step is to call the querySelector method on the parent element.

When the querySelector method is scoped to a specific element, it only selects the children of the element the method was called on.

The Element.querySelector method returns the first element that matches the provided selector.

In the example, we select a child element that has an id value set to first .

Copied!
const parent = document.querySelector('#parent'); console.log(parent); // 👉️ div#parent const child = parent.querySelector('#first'); console.log(child); // div#first

When passing the id to the querySelector method, we are selecting any of the children of the element.

This includes nested children that have the supplied id.

However, it shouldn’t matter because the IDs on your page should be unique.

Having multiple elements with the same id on a single page can lead to confusing behavior and difficult-to-track bugs.

# Get Child Elements by Tag name using JavaScript

Use the querySelectorAll method to get all child elements by tag name.

For example, document.querySelectorAll(‘#parent div’) selects all of the div elements that are descendants of an element with an id of parent .

Here is the HTML for the examples.

Copied!
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> div id="parent"> div>Child 1div> div>Child 2div> span>Child 3span> div> script src="index.js"> script> body> html>

And here is the related JavaScript code.

Copied!
const children = document.querySelectorAll('#parent div'); console.log(children); // 👉️ [div, div]

If you need to access elements of multiple types, separate them by a comma.

Copied!
const children = document.querySelectorAll('#parent div, span'); console.log(children); // 👉️ [div, div, span]

We used the document.querySelectorAll method to select all div elements that are children of an element with an id of parent .

You could also achieve the same result in two simple steps.

Copied!
const parent = document.querySelector('#parent'); console.log(parent); // 👉️ div#parent const children = parent.querySelectorAll('div'); console.log(children); // 👉️ [div, div]

The call to the document.querySelector() method selected the parent element by its id .

In this scenario, you could have used the document.getElementById method to achieve the same result, e.g.:

Copied!
const parent = document.getElementById('parent');

The next step is to call the querySelectorAll method on the parent element.

When the querySelectorAll method is scoped to a specific element, it only selects the children of the element the method was called on.

The querySelectorAll method returns a NodeList containing the elements that match the provided selector.

With the approach of passing the tag name to the querySelectorAll method, we select any of the children of the element.

This includes nested children that are div elements.

# Target direct children of the element

If you only want to target direct children of the DOM element, use the :scope pseudo-class selector.

Here is the HTML for the example.

Copied!
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> div id="parent"> div> Child 1 div>Nested Child 1div> div> div>Child 2div> span>Child 3span> div> script src="index.js"> script> body> html>

And here is the related JavaScript code.

Copied!
const parent = document.querySelector('#parent'); console.log(parent); // 👉️ div#parent const children = parent.querySelectorAll(':scope > div'); console.log(children); // 👉️ [div, div]

We used the :scope pseudo-class to select the direct children of the parent that are div elements.

When used with methods like querySelector and querySelectorAll , :scope matches the element on which the method was called (the parent).

You could also achieve this in a single step:

Copied!
const children = document.querySelectorAll('#parent > div'); console.log(children); // 👉️ [div, div]

If you don’t need access to the parent element, you can use a single call of the querySelectorAll method to get the direct children of the element by a specific tag name.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

get the children of the $(this) selector

In this post we will show you How to get the children of the $(this) selector?, hear for How to get the children of the $(this) selector? we will give you demo and example for implement.

Html layout ::

You would like to use a jQuery selector to select the child img inside the div on click.

Solution 1 : get the children of the $(this) selector

The jQuery constructor accepts a 2nd parameter called context which can be used to override the context of the selection.

Which is the same as using .find() like this:

If the imgs you desire are only direct descendants of the clicked element, you can also use .children():

Solution 2 : get the children of the $(this) selector

If you need to get the first img that’s down exactly one level, you can do this follwoing jquery code

Solution 3 : get the children of the $(this) selector

If your div tag is immediately followed by the img tag, you can do this follwoing jquery code

Solution 4 : get the children of the $(this) selector

If you want direct children is of img tag, you can do this follwoing jquery code

Solution 5 : get the children of the $(this) selector

jQuery’s each is one option for get the children of the $(this) selector :

  
 $('#DivId img').each(function()< console.log($(this).attr('src')); >);

Hope this code and post will helped you for implement How to get the children of the $(this) selector. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org

Источник

Javascript select child of this

Element: children property

Value

Examples

Specifications

Browser compatibility

See also

Found a content problem with this page?

MDN

Support

Our communities

Developers