如何使用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看到所有的例子。