javascript - 如何在类中使用 innerHTML

Question

我想使用带有类的 innerHTML 作为参考。我发现了很多以 id 作为参考的例子。有没有人知道如何在不使用 id 名称的情况下获取元素的 innerHTML。

请注意，我不想在这里使用任何 JavaScript 库，例如 jquery。

Answer 1

您可以尝试Document.querySelector（如果您只想要第一个元素）或Document.querySelectorAll（如果您想获取所有元素）。

var el = document.querySelector(".myclass"); 
var html = el.innerHtml;

Answer 2

这一切都与您如何获取元素引用有关。这是您可以如何处理课程的方法。

var items = document.getElementsByClassName("my-class"),
    i, len;

// loop through all elements having class name ".my-class"
for (i = 0, len = items.length; i < len; i++) {
    items[i].innerHTML = "...";
}

当然，较旧的浏览器不支持 document.getElementsByClassName()，因此您可以使用 jQuery/YUI 或某些库，因为它可以处理较旧的浏览器。

Answer 3

您可以使用 document.getElementsByClassName，但这在 IE9 之前不起作用。从谷歌代码项目中使用这个方法，我在这里复制粘贴

/*
  Developed by Robert Nyman, http://www.robertnyman.com
  Code/licensing: http://code.google.com/p/getelementsbyclassname/
*/  
var getElementsByClassName = function (className, tag, elm){
  if (document.getElementsByClassName) {
    getElementsByClassName = function (className, tag, elm) {
      elm = elm || document;
      var elements = elm.getElementsByClassName(className),
        nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
        returnElements = [],
        current;
      for(var i=0, il=elements.length; i<il; i+=1){
        current = elements[i];
        if(!nodeName || nodeName.test(current.nodeName)) {
          returnElements.push(current);
        }
      }
      return returnElements;
    };
  }
  else if (document.evaluate) {
    getElementsByClassName = function (className, tag, elm) {
      tag = tag || "*";
      elm = elm || document;
      var classes = className.split(" "),
        classesToCheck = "",
        xhtmlNamespace = "http://www.w3.org/1999/xhtml",
        namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
        returnElements = [],
        elements,
        node;
      for(var j=0, jl=classes.length; j<jl; j+=1){
        classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
      }
      try  {
        elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
      }
      catch (e) {
        elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
      }
      while ((node = elements.iterateNext())) {
        returnElements.push(node);
      }
      return returnElements;
    };
  }
  else {
    getElementsByClassName = function (className, tag, elm) {
      tag = tag || "*";
      elm = elm || document;
      var classes = className.split(" "),
        classesToCheck = [],
        elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
        current,
        returnElements = [],
        match;
      for(var k=0, kl=classes.length; k<kl; k+=1){
        classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
      }
      for(var l=0, ll=elements.length; l<ll; l+=1){
        current = elements[l];
        match = false;
        for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
          match = classesToCheck[m].test(current.className);
          if (!match) {
            break;
          }
        }
        if (match) {
          returnElements.push(current);
        }
      }
      return returnElements;
    };
  }
  return getElementsByClassName(className, tag, elm);
};

用法：

使用“信息链接”类获取文档中的所有元素。

getElementsByClassName("info-links");

使用“col”类获取名为“container”的元素中的所有 div 元素。

getElementsByClassName("col", "div", document.getElementById("container"));

使用“click-me”和“sure-thang”类获取文档中的所有元素。

getElementsByClassName("click-me sure-thang");

编辑：这是一个例子

首先，您的 Javascript 函数：

   function ProcessThese()
{
    nodes = getElementsByClassName('hello');
    alert(nodes[0].innerHTML);
    alert(nodes[0].value);  // <-- This gets you what the user typed in
}

一些示例 HTML：

<br />

<textarea class="hello">222</textarea>

<br />

<input type="button" onclick="ProcessThese();" value="Click me" />

单击页面上的按钮，它应该获取值。

Answer 4

使用 id 的原因是因为 ID 是唯一的：类名不是。在您的问题文本中，您询问如何获取“元素”的 innerHTML，但这可能是不正确的。与可能是单个元素或 null 的 id 不同，您可以有 15 个具有相同类名的元素（并且可能这样做）。

即使您通过 document.getElementsByClassName 或 jQuery 按类名获取元素，您也必须知道您想要哪个（第一个、第 15 个等）来挑选单个元素。这就是为什么您会通过 id 看到所有示例。

Answer 5

您可以使用现在大多数浏览器原生支持的 getElementsByClassName。

见http://www.quirksmode.org/blog/archives/2008/05/getelementsbycl.html