JavaScript'e göre Elementler Sınıfına Nasıl Gidilir?

Bunun için aşağıdaki işlevi kullanıyorum böylece bir html öğesi içindeki içeriği değiştirmek istiyorum:

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

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

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

Yukarıdaki harika çalışıyor ama sorun ben içeriğini değiştirmek istediğiniz bir sayfada birden fazla html öğesi var. Bu yüzden kimlikleri değil sınıfları kullanamıyorum. Javascript sınıf fonksiyonu ile dahili get elementin herhangi bir tür desteklemediği söylendi. Peki yukarıdaki kod ids yerine sınıflarla çalışmasını sağlamak için nasıl revize edilebilir?

PS Bunun için jQuery kullanmak istemiyorum.

Bu kod tüm tarayıcılarda çalışmalıdır.

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

Çalışma şekli, belgedeki tüm öğeleri gözden geçirerek ve sınıf listelerinde arama yapmaktır matchClass. Bir eşleşme bulunursa, içerik değiştirilir.

Vanilla JS kullanarak jsFiddle Örneği (çerçeve yok)

Elbette, tüm modern tarayıcılar artık aşağıdaki daha basit yolu desteklemektedir:

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

ancak IE8 veya öncesi ile çalışmadığı konusunda uyarılmalıdır. Bkz. Http://caniuse.com/getelementsbyclassname

Ayrıca, tüm tarayıcılar NodeListolması gerektiği gibi saf bir geri dönmeyecektir .

Muhtemelen en sevdiğiniz tarayıcılar arası kütüphaneyi kullanmaya devam edersiniz.

document.querySelectorAll(".your_class_name_here");

Bu, bu yöntemi (IE8 +) uygulayan "modern" tarayıcılarda çalışır.

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

Eski tarayıcılar için destek sağlamak isterseniz, Sizzle (4KB mini + gzip) veya Peppy (10K mini) gibi bağımsız bir seçici motor yükleyebilir ve yerel querySelector yöntemi bulunmazsa geri düşebilirsiniz.

Belirli bir sınıfa sahip elemanlar alabilmeniz için seçici bir motor yüklemek aşırı mı? Muhtemelen. Ancak, komut dosyaları o kadar büyük değildir ve seçici motoru komut dosyanızdaki diğer birçok yerde yararlı bulabilirsiniz.

Basit ve kolay bir yol

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';
}

Düzenli İfadeler kullanan cevaplar olmadığına şaşırdım. Bu hemen hemen Andrew cevabı kullanılarak RegExp.testyerine String.indexOfçoklu işlemler için daha iyi performans görünüyor beri göre, jsPerf testler .
Ayrıca IE6 üzerinde desteklenen gibi görünüyor .

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

Aynı sınıf (lar) ı sık sık ararsanız, (önceden derlenmiş) normal ifadeleri başka bir yerde saklayıp bir dize yerine doğrudan işleve ileterek sınıfınızı daha da geliştirebilirsiniz.

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

Bu hemen hemen tüm tarayıcılarda çalışmalıdır ...

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;
}

Bu şekilde kullanabilmelisiniz:

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

Başlangıçta sorulduğunda bunun geçerli bir seçenek olmadığını varsayıyorum, ancak şimdi kullanabilirsiniz document.getElementsByClassName('');. Örneğin:

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

Daha fazla bilgi için MDN belgelerine bakın .

Bence böyle bir şey:

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;
    }
}
}

işe yarar

jQuery bunu kolaylaştırır.

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

Tüm .myclass öğelerini o metne dönüştürür.

Bazı öğeler ID eksik olduğunda, jQuery şöyle kullanın:

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

Bu garip bir çözüm olabilir, ama belki birisi bunu yararlı bulur.