如何使用innerHTML与类

Question

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

请不要在这里使用任何JavaScript库，比如jquery。

Answer 1

您可以使用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的复制粘贴它：

为了获取文档中的所有元素与“信息通”类。

getElementsByClassName("info-links"); 

获取名为“container”的元素中的所有div元素，并带有“col”类。

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 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.querySelector（如果你只想要第一个元素）或Document.querySelectorAll（如果你想获得所有元素）。

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

Answer 4

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

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

Answer 5

原因ID使用是因为ID是唯一的：类名都没有。在你的问题的文本中，你问如何获得'元素'的innerHTML，但这可能是不正确的。与既可以是单个元素也可以为空的id不同，你可以有15个具有相同类名的元素（并且很可能）。

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