javascript - 特別なタグの内容を変更するにはどうすればよいですか？

Question

私は次の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>

このタグで特別なテキスト（ MyText ）を見つけて、テキストを変更したいと思います。

私はこのコードを使用していますが、機能しません：

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

JavaScriptでこれを見つけて変更するにはどうすればよいですか？

Answer 1

それはあなたが探しているものですか？

JS:

var inbox = document.getElementsByClassName("menu-item-text");
if(inbox.length > 0){
    inbox[0].innerText = "New Text";
}

HTML:

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

</p>

デモ

Answer 2

getElementsByClassNameよりも広くサポートされており、より正確に対象を絞ることができるquerySelectorAllメソッドを使用できます。

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');
  }
}

スパンを探していることがわかっている場合は、セレクターを にすることができますspan.menu-item-text。qSA は標準モードの IE 8 および 9 でのみサポートされるため、DOCTYPE があることを確認してください。

これは、IE 6 以前までのどのブラウザーでも機能する、より堅牢なソリューションです。

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;
}