JavaScriptでクラスごとに要素を取得する方法

html要素内のコンテンツを置き換えたいので、次の関数を使用しています。

function ReplaceContentInContainer(id,content) {
   var container = document.getElementById(id);
   container.innerHTML = content;
}

ReplaceContentInContainer('box','This is the replacement text');

<div id='box'></div>

上記はうまく機能しますが、問題は、コンテンツを置き換えるページに複数のhtml要素があることです。だから私はIDではなくクラスを使うことができません。javascriptは、クラス関数による組み込みのget要素のタイプをサポートしないと言われています。では、上記のコードをどのように修正して、IDではなくクラスで機能させることができるでしょうか。

PSこのためにjQueryを使用したくありません。

このコードはすべてのブラウザで機能するはずです。

function replaceContentInContainer(matchClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            elems[i].innerHTML = content;
        }
    }
}

これが機能する方法は、ドキュメント内のすべての要素をループして、クラスリストでを検索することですmatchClass。一致が見つかると、内容が置き換えられます。

jsFiddleの例、Vanilla JSを使用（つまりフレームワークなし）

もちろん、現在のすべてのブラウザは次の簡単な方法をサポートしています。

var elements = document.getElementsByClassName('someClass');

ただし、IE8以前では機能しません。http://caniuse.com/getelementsbyclassnameを参照してください

また、すべてのブラウザがNodeList本来のピュアを返すわけではありません。

おそらく、お気に入りのクロスブラウザーライブラリを使用したほうがよいでしょう。

document.querySelectorAll(".your_class_name_here");

これは、その方法（IE8 +）を実装する「最新の」ブラウザで機能します。

function ReplaceContentInContainer(selector, content) {
  var nodeList = document.querySelectorAll(selector);
  for (var i = 0, length = nodeList.length; i < length; i++) {
     nodeList[i].innerHTML = content;
  }
}

ReplaceContentInContainer(".theclass", "HELLO WORLD");

古いブラウザのサポートを提供したい場合は、Sizzle（4KB mini + gzip）やPeppy（10K mini）などのスタンドアロンセレクタエンジンをロードし、ネイティブのquerySelectorメソッドが見つからない場合はそれに戻すことができます。

特定のクラスの要素を取得できるようにセレクターエンジンをロードするのはやりすぎですか？恐らく。ただし、スクリプトはそれほど大きくないため、スクリプトの他の多くの場所でセレクターエンジンが役立つ場合があります。

シンプルで簡単な方法

var cusid_ele = document.getElementsByClassName('custid');
for (var i = 0; i < cusid_ele.length; ++i) {
    var item = cusid_ele[i];  
    item.innerHTML = 'this is value';
}

正規表現を使った答えがないことに驚いています。jsPerfテストによると、これはの代わりにを使用したAndrewの答えです。 また、IE6でサポートしているようです。RegExp.testString.indexOf

function replaceContentInContainer(matchClass, content) {
    var re = new RegExp("(?:^|\\s)" + matchClass + "(?!\\S)"),
        elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (re.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

replaceContentInContainer("box", "This is the replacement text.");

同じクラスを頻繁に探す場合は、（プリコンパイルされた）正規表現を別の場所に格納し、文字列ではなく関数に直接渡すことで、クラスをさらに改善できます。

function replaceContentInContainer(reClass, content) {
    var elems = document.getElementsByTagName('*'), i;
    for (i in elems) {
        if (reClass.test(elems[i].className)) {
            elems[i].innerHTML = content;
        }
    }
}

var reBox = /(?:^|\s)box(?!\S)/;
replaceContentInContainer(reBox, "This is the replacement text.");

これはほとんどすべてのブラウザで機能するはずです...

function getByClass (className, parent) {
  parent || (parent=document);
  var descendants=parent.getElementsByTagName('*'), i=-1, e, result=[];
  while (e=descendants[++i]) {
    ((' '+(e['class']||e.className)+' ').indexOf(' '+className+' ') > -1) && result.push(e);
  }
  return result;
}

次のように使用できるはずです。

function replaceInClass (className, content) {
  var nodes = getByClass(className), i=-1, node;
  while (node=nodes[++i]) node.innerHTML = content;
}

これは最初に要求されたときは有効なオプションではなかったと思いますが、今は使用できますdocument.getElementsByClassName('');。例えば：

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

詳細については、MDNのドキュメントを参照してください。

私は次のようなものだと思います：

function ReplaceContentInContainer(klass,content) {
var elems = document.getElementsByTagName('*');
for (i in elems){
    if(elems[i].getAttribute('class') == klass || elems[i].getAttribute('className') == klass){
        elems[i].innerHTML = content;
    }
}
}

働くだろう

jQueryはこれを簡単に処理します。

let element = $(.myclass);
element.html("Some string");

すべての.myclass要素をそのテキストに変更します。

一部の要素にIDがない場合は、次のようにjQueryを使用します。

$(document).ready(function()
{
    $('.myclass').attr('id', 'myid');
});

これは奇妙な解決策かもしれませんが、多分誰かがそれを役に立つと思います。