Question

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

请注意，我不想在这里使用像jquery这样的JavaScript库。

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 project使用此方法，我在此处复制粘贴

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

Usage：

使用“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是唯一的：类名不是。在你的问题的文本中，你问如何获得＆＃39;元素＆＃39;的内部HTML，但这可能是不正确的。与将要为单个元素或null的ids不同，您可以拥有15个具有相同类名的元素（并且可能会这样做）。

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

Answer 5

您可以使用getElementsByClassName，它现在被大多数浏览器本机支持。

请参阅http://www.quirksmode.org/blog/archives/2008/05/getelementsbycl.html

如何在类中使用innerHTML

5 个答案: