How to get the span value through javascript. I got the below through

document.getElementsByClassName("breadcrumb-item")[1]

I want to get the span value. How to get it using javascript.

<li class="breadcrumb-item">
       <a href="@crumbUrl">
         <span>
           @Html.Raw(breadcrumb.Name)
         </span>
       </a>
    </li>

CodePudding user response：

You can use querySelector like:

console.log(document.querySelector('.breadcrumb-item > a > span').innerHTML);

<ul>
  <li class="breadcrumb-item">
    <a href="@crumbUrl">
      <span>
        value   <[email protected](breadcrumb.Name)-->
      </span>
    </a>
  </li>
</ul>

Reference:

• Document.querySelector()

If is more than 1

document.querySelectorAll('.breadcrumb-item > a > span').forEach(el =>{
  console.log(el.innerHTML);
});

<ul>
  <li class="breadcrumb-item">
    <a href="@crumbUrl">
      <span>
        value   <[email protected](breadcrumb.Name)-->
      </span>
    </a>
  </li>
   <li class="breadcrumb-item">
    <a href="@crumbUrl">
      <span>
        value2   <[email protected](breadcrumb.Name)-->
      </span>
    </a>
  </li>
</ul>

Reference:

• Document.querySelectorAll()
• Array.prototype.forEach()

CodePudding user response：

You can create a variable to get element:

var list = document.getElementsByClassName("breadcrumb-item")[0];

var spanVal = list.getElementsByTagName("span")[0].innerHTML;

console.log(spanVal);