avatar
get text value of element forEach javascript Javascript

• Be assumption that you need get text value of HTML element upon using `forEach` method. For example:

jobCard.forEach((card) => {
   card is HTML template
})

(*) card

<div class="job-container display-none">
   <div class="job-card-container">
      <div class="job-card-text">Java Developer</div>
      <div class="job-card-icon">Apply &gt;</div>
   </div>
   <div style="height: 24px;"></div>
   <span>
      <svg width="12" height="12" viewBox="0 0 20 20">
         <path d="M10" fill="#6D7176"></path>
      </svg>
      <span class="job-card-location">New York City </span>
   </span>
   <span>
      <svg width="12" height="12" viewBox="0 0 20 20">
         <path d="M10" fill="#6D7176"></path>
      </svg>
      <span class="job-card-location">Posted 7 Day Ago</span>
   </span>
   <div class="job-container display-none">
      <div class="job-card-container">
         <div class="job-card-text">React Developer</div>
         <div class="job-card-icon">Apply &gt;</div>
      </div>
      <div style="height: 24px;"></div>
      <span>
         <svg width="12" height="12" viewBox="0 0 20 20">
            <path d="M10" fill="#6D7176"></path>
         </svg>
         <span class="job-card-location">Los Angeles City </span>
      </span>
      <span>
         <svg width="12" height="12" viewBox="0 0 20 20">
            <path d="M10" fill="#6D7176"></path>
         </svg>
         <span class="job-card-location">Posted 7 Day Ago</span>
      </span>
   </div>
</div>

• Utilize `querySelector()` or `querySelectorAll()` methods to select elements within a specified scope, and apply pseudo-classes to extract the values of HTML element attributes.

const elementContainer = card.querySelector(':scope > .job-card-container > .job-card-text');
console.log(elementContainer.textContent);

Note: You can use `(HTML tag):nth-child(x)` or `(HTML tag):nth-of-type(x)`.

You need to login to do this manipulation!