CODEWITHSUNDEEP
javascripthtmlnode.js
Tekky
Tekky

Reputation: 89

Get Href's from the following html

I'm new to javascript, and would appreciate some help. from the website well.ca, I'm using document.querySelector('div[class="panel-body"]').innerHTML

to derive this html:

                <div class="panel-body-content">
                    <ul class="list-unstyled panel-ul">
                        <li class="parent active">
                            <a class="selected"><span>Medicine &amp; Health (3041)</span></a><ul class="list-unstyled" style="display: block;"><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/new-in-medicine-health_4359.html">NEW in Medicine &amp; Health (282)</a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/personal-protective-equipment_5762.html">Personal Protective Equipment (72)</a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/digestion-nausea-probiotics_393.html"><span>Digestion, Nausea &amp; Probiotics (454)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/pain-fever-relief_900.html"><span>Pain &amp; Fever Relief (412)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/homeopathic-remedies_1838.html"><span>Homeopathic Remedies (242)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/home-healthcare_1.html"><span>Home Healthcare (229)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/first-aid_5.html"><span>First Aid (658)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/smoking-cessation_624.html">Smoking Cessation (43)</a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/cough-cold-flu_74.html"><span>Cough, Cold &amp; Flu (551)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/allergy-sinus_16.html"><span>Allergy &amp; Sinus (177)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/sleeping-aids-anti-snoring_105.html">Sleeping Aids &amp; Anti-Snoring (111)</a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/childrens-medicine_369.html"><span>Children's Medicine (223)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/womens-health_1916.html"><span>Women's Health (222)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/mens-health_3625.html"><span>Men's Health (58)</span></a></li></ul>                           </li>
                    </ul>
                </div>
            "

How can I get the href values from this html via documentquerySelector? I also want to get the inner text, and the corresponding href for each class with text.

Any help would be appreciated.

Upvotes: 0

Views: 75

Answers (2)

Mohamed Ali
Mohamed Ali

Reputation: 141

  1. First you need to select all a elements with querySelectorAll()
  2. Loop over the collection you get from the a elements
  3. You can access the href value with getAttribute("href")
  4. You can access the content with innerText or textContent
const links = document.querySelectorAll(".panel-body-content a")

links.forEach(function(link) {
  const hrefValue = link.getAttribute("href")
  const content = link.innerText
  
  // hrefValue is the link inside href
  // content is the text inside the link
 
})

Upvotes: 1

Lain
Lain

Reputation: 3726

You should fetch the actual a element to access its properties and attributes properly. Check the documentation to read up on querySelectorAll().

;window.onload = function(){
  //REM: Get all a with a [href] inside of .panel-body-content
  var tListOfAnchorsWithLinks = document.querySelectorAll('.panel-body-content a[href]');

  //REM: Loops through those
  for(var i=0, j=tListOfAnchorsWithLinks.length; i<j; i++){
    //REM: Now you can access the property of the individual a
    console.log('href', tListOfAnchorsWithLinks[i].href);
    console.log('text', tListOfAnchorsWithLinks[i].textContent);
  }
};
<div class="panel-body-content">
    <ul class="list-unstyled panel-ul">
        <li class="parent active">
            <a class="selected"><span>Medicine &amp; Health (3041)</span></a><ul class="list-unstyled" style="display: block;"><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/new-in-medicine-health_4359.html">NEW in Medicine &amp; Health (282)</a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/personal-protective-equipment_5762.html">Personal Protective Equipment (72)</a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/digestion-nausea-probiotics_393.html"><span>Digestion, Nausea &amp; Probiotics (454)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/pain-fever-relief_900.html"><span>Pain &amp; Fever Relief (412)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/homeopathic-remedies_1838.html"><span>Homeopathic Remedies (242)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/home-healthcare_1.html"><span>Home Healthcare (229)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/first-aid_5.html"><span>First Aid (658)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/smoking-cessation_624.html">Smoking Cessation (43)</a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/cough-cold-flu_74.html"><span>Cough, Cold &amp; Flu (551)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/allergy-sinus_16.html"><span>Allergy &amp; Sinus (177)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/sleeping-aids-anti-snoring_105.html">Sleeping Aids &amp; Anti-Snoring (111)</a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/childrens-medicine_369.html"><span>Children's Medicine (223)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/womens-health_1916.html"><span>Women's Health (222)</span></a></li><li><a class="category_facet_link" style="cursor:pointer;" href="https://well.ca/categories/mens-health_3625.html"><span>Men's Health (58)</span></a></li></ul>                           </li>
    </ul>
</div>

Upvotes: 0

Related Questions