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>

DEMO

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

如何更改特殊标签的内容？

2 个答案: