3

クラスを参照としてinnerHTMLを使用したいと思います。idを参考にした例をたくさん見つけました。ID名を使用せずに要素のinnerHTMLを取得する方法を知っている人はいますか？

ここではjqueryのようなJavaScriptライブラリを使用したくないことに注意してください。

4

5 に答える 5

4

Document.querySelector (最初の要素のみが必要な場合) またはDocument.querySelectorAll (すべての要素を取得する場合) を試すことができます。

var el = document.querySelector(".myclass"); 
var html = el.innerHtml;
于 2012-07-15T05:47:15.810 に答える
3

そのすべては、要素参照を取得する方法に関するものです。クラスでできることは次のとおりです。

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または一部のライブラリのいずれかを使用できます。

于 2012-07-15T05:44:06.463 に答える
2

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");

「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" />

ページのボタンをクリックすると、値が取得されます。

于 2012-07-15T05:46:53.953 に答える
1

id が使用される理由は、ID が一意であるためです。クラス名は一意ではありません。質問のテキストでは、「要素」の innerHTML を取得する方法を尋ねていますが、これは正しくない可能性があります。単一の要素または null のいずれかになる id とは異なり、同じクラス名を持つ 15 の要素を持つことができます (おそらくそうなります)。

document.getElementsByClassName または jQuery を介してクラス名で要素を取得した場合でも、単一の要素を選択するには、必要な要素 (最初の要素、15 番目の要素など) を知る必要があります。これが、ID ごとにすべての例を表示する理由です。

于 2012-07-15T05:50:23.370 に答える
0

現在、ほとんどのブラウザーでネイティブにサポートされている getElementsByClassName を使用できます。

http://www.quirksmode.org/blog/archives/2008/05/getelementsbycl.htmlを参照してください。

于 2012-07-15T05:48:49.690 に答える