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

可以使用querySelectorAll方法，它比getElementsByClassName支持更广泛，可以更准确地定位：

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