如何在类中使用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之前不起作用。 在Google Code项目中使用此方法，我将其复制粘贴到此处

/*
  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);
};

用法 ：

使用“ info-links”类获取文档中的所有元素。

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