Get child element values using javascript

Question

How do I get all the href values which lie under id="categoryName" using javascript?

<div class="makeStyles-categoryBreadscrumb-83" id="categoryName">
    <a href="/">Home </a><a href="/category/shoes.html">Shoes</a><a>Boots &amp; Booties</a>
</div>

Here is what I have tried:

document.getElementById("categoryName").innerHTML

using document.getElementById('categoryName').innerHTML this you can get html only. what you get ?? — Ravi Ashara
– Ravi Ashara, Commented Jan 28, 2021 at 10:12

Aalexander · Accepted Answer · 2021-01-28 10:27:42Z

1

You can use .querySelectorAll("parent > child");

let elements =document.querySelectorAll("#categoryName > a");

elements.forEach((x) => {
console.log(x);
})

<div class="makeStyles-categoryBreadscrumb-83" id="categoryName">
  <a href="/">Home </a><a href="/category/shoes.html">Shoes</a><a>Boots &amp; Booties</a>
  <a href="/">Bla </a><a href="/category/shoes.html">Shoes</a><a>Boots &amp; Booties</a>
</div>

edited Jan 28, 2021 at 10:27

answered Jan 28, 2021 at 10:14

Aalexander

4,9843 gold badges14 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user15097921 Over a year ago

document.querySelectorAll("categoryName > a"); can i use this ?

Aalexander Over a year ago

yes but categoryName is an id so you have to select it by using a # before. #categoryName

user15097921 Over a year ago

document.getElementById("categoryName > a ") Is this ok ?

Aalexander Over a year ago

No it isn't getElementById is looking for an element by an id. Use querySelectorAll here

Aalexander Over a year ago

document.querySelectorAll("#categoryName > a");this is how you can use it

Amit Saini · Accepted Answer · 2021-01-28 10:26:53Z

0

You can your result with the help of querySelectorAll.

var x = document.querySelectorAll("#categoryName > a");

x.forEach((x) => {
  if(x.href) {
    console.log(x.href);
  }
})

<div class="makeStyles-categoryBreadscrumb-83" id="categoryName">
    <a href="/">Home </a><a href="/category/shoes.html">Shoes</a><a>Boots &amp; Booties</a>
</div>

answered Jan 28, 2021 at 10:26

Amit Saini

5955 silver badges13 bronze badges

Comments

muhammad mashaly · Accepted Answer · 2021-01-28 10:55:04Z

0

You can use this:

let x =document.getElementById('parent').children
for (i = 0; i < x.length; i++) {
  console.log(x.item(i).href)
}

answered Jan 28, 2021 at 10:55

muhammad mashaly

1

1 Comment

Axel Köhler Over a year ago

Hey muhammad, welcome to Stack Overflow! Good work providing a possible solution, but try to elaborate on why this solution works, what it does. You can do this by editing your answer.

Collectives™ on Stack Overflow

Get child element values using javascript

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related