javascript - get_search_form - searchform php wordpress example

¿Cómo obtener Element By Class en JavaScript?

Question

Quiero reemplazar el contenido dentro de un elemento html, entonces estoy usando la siguiente función para eso:

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

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

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

Lo anterior funciona muy bien, pero el problema es que tengo más de un elemento html en una página a la que quiero reemplazar el contenido. Así que no puedo usar ids sino clases en su lugar. Me han dicho que javascript no admite ningún tipo de función incorporada de obtención de elementos por clase. Entonces, ¿cómo puede revisarse el código anterior para que funcione con clases en lugar de identificadores?

PD: no quiero usar jQuery para esto.

Answer 1

Cuando algunos elementos carecen de ID, uso jQuery así:

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

Esta podría ser una solución extraña, pero tal vez alguien la encuentre útil.

Answer 2

Este código debería funcionar en todos los navegadores.

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

La forma en que funciona es haciendo un bucle a través de todos los elementos del documento, y buscando en su lista de clases para matchClass . Si se encuentra una coincidencia, se reemplaza el contenido.

Ejemplo de jsFiddle, utilizando Vanilla JS (es decir, sin marco)

Answer 3

Esto debería funcionar en casi cualquier navegador ...

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

Deberías poder usarlo así:

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

Answer 4

Me sorprende que no haya respuestas usando expresiones regulares. Esta es prácticamente la respuesta de Andrew , utilizando RegExp.test lugar de String.indexOf , ya que parece funcionar mejor para múltiples operaciones, según las pruebas de jsPerf .
También parece estar soportado en IE6 .

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

Si busca las mismas clases con frecuencia, puede mejorarlas aún más almacenando las expresiones regulares (precompiladas) en otro lugar y pasándolas directamente a la función, en lugar de una cadena.

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

Answer 5

Pienso algo como:

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

trabajaría

Answer 6

Por supuesto, todos los navegadores modernos ahora admiten la siguiente forma más simple:

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

pero ten en cuenta que no funciona con IE8 o antes. Ver http://caniuse.com/getelementsbyclassname

Además, no todos los navegadores devolverán un NodeList puro como se supone que deben.

Probablemente todavía estés mejor usando tu biblioteca de navegador cruzada favorita.

Answer 7

Supongo que esta no era una opción válida cuando se solicitó originalmente, pero ahora puede usar document.getElementsByClassName(''''); . Por ejemplo:

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

Consulte la documentación de MDN para más información.

Answer 8

Una forma sencilla y fácil.

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

Answer 9

var elems = document.querySelectorAll(''.one'');

for (var i = 0; i < elems.length; i++) {
    elems[i].innerHTML = ''content'';
};

Answer 10

document.querySelectorAll(".your_class_name_here");

Eso funcionará en los navegadores "modernos" que implementan ese método (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");

Si desea proporcionar soporte para navegadores más antiguos, puede cargar un motor de selección independiente como Sizzle (4KB mini + gzip) o Peppy (10K mini) y recurrir a él si no se encuentra el método querySelector nativo.

¿Es excesivo cargar un motor de selección solo para que puedas obtener elementos con cierta clase? Probablemente. Sin embargo, los scripts no son tan grandes y es posible que encuentre útil el motor de selección en muchos otros lugares de su script.