Question

I have the following HTML :

<a class="static selected menu-item" href="/SitePages/Inbox.aspx"><span class="additional-background"><span class="menu-item-text">MyText</span><span class="ms-hidden">Currently selected</span></span></a>

I want to find special text (MyText) in this tag and then change the text.

I use this code but it doesn’t work for me:

var divArray = document.getElementsByTagName("span");
for (var i = 0; i<divArray.length; i++){
if (divArray[i].class="menu-item-text")
 return divArray[i].innerHTML;
}

How do I find this with JavaScript and change it?

Answer 1

You can use the querySelectorAll method, which is more widely supported than getElementsByClassName and can be more accurately targeted:

var els = document.querySelectorAll('.menu-item-text');
for (var i=0, iLen=els.length; i<iLen; i++) {
  if ( (els[i].textContent || els[i].innerText) == 'Inbox') {
    alert('Found inbox');
  }
}

If you know you are looking for a span, then the selector can be span.menu-item-text. Note that qSA is only supported in IE 8 and 9 in standards mode, so make sure you have a DOCTYPE.

Here’s a more robust solution that should work in any browser back to IE 6 or earlier:

function getEl(className, text) {
  var els, t, re;
  var result = [];

  // Get elements matching the class
  // Try qSA
  if (document.querySelectorAll) {
    els = document.querySelectorAll('.' + className);

  // Try gEBCN
  } else if (document.getElementsByClassName) {
    els = document.getElementsByClassName(className);

  // Try gEBTN
  } else if (document.getElementsByTagName) {
    t = document.getElementsByTagName('*');
    re = new RegExp('(^|\\s)' + className + '(\\s|$)'); 
    els = [];

    for (var i=0, iLen=t.length; i<iLen; i++) {
      if (re.test(t[i].className)) {
        els.push(t[i]);
      }
    }

  // Stop here if everything failed.
  } else {
    return;
  }

  // Go looking for element with matching text
  for (var j=0, jLen=els.length; j<jLen; j++) {

    if ( (els[j].textContent || els[j].innerText) == 'Inbox') {
      result.push(els[j]);
    }
  }
  return result;
}