En jQuery simplemente agregando $("div") selecciona todos los elementos con un nombre de etiqueta de <div>.

Supongamos que quisiera hacer esto en JavaScript puro, intentaría ingresar esto: document.getElementsByTagName("div"), pero esto solo devuelve una lista de elementos.

No puede editar todos estos elementos a la vez, debe seleccionarlos en orden de aparición, así: document.getElementsByTagName("div")[*occurrence*].
¿Hay alguna forma de seleccionar todos estos elementos a la vez y almacenarlos en una variable?

Gracias.

-2
gilbert-v 29 ago. 2014 a las 21:17

2 respuestas

La mejor respuesta

¿Hay alguna forma de seleccionar todos estos elementos a la vez y almacenarlos en una variable?

getElementsByTagName (o querySelectorAll) es cómo lo haces.

Pero no, el DOM no define funciones que actúen en listas de elementos como lo hace jQuery. Puedes, por supuesto, escribirlas tú mismo.

function setValue(list, value) {
    var n;
    for (n = 0; n < list.length; ++n) {
         list[n].value = value;
    }
};

El enfoque basado en conjuntos de jQuery es, sospecho, una gran parte de su atractivo. Eso y el hecho de que al encapsular conjuntos de elementos con mutadores y accesores, te permite encadenar cosas. También puedes hacerlo tú mismo, por supuesto:

function MyList(selector) {
    this.elements = document.querySelectorAll(selector);
}
MyList.prototype.setAttr = function(attr, value) {
    var n;
    for (n = 0; n < list.length; ++n) {
         this.elements[n].setAttribute(attr, value);
    }
    return this;
};
MyList.prototype.setHTML = function(html) {
    var n;
    for (n = 0; n < list.length; ++n) {
         this.elements[n].innerHTML = html;
    }
    return this;
};

// Usage
var list = new MyList("div");
list.setHTML("hi there").setAttr("data-foo", "bar");

Naturalmente, esos son bastante primitivos en comparación con las versiones de jQuery ...

3
T.J. Crowder 29 ago. 2014 a las 20:22

Hice un JSFiddle que muestra cómo usar todos los divs encontrados usando un for ... en bucle:

HTML

<div>text1</div>
<div>text2</div>
<div>text4</div>
<div>text3</div>
<span id="orderOfOutput"></span>

JavaScript

var allDivs = document.getElementsByTagName('div');
for (var i in allDivs) {
    if (isNaN(i)) continue;//we only want the numbered indexes
    document.getElementById('orderOfOutput').innerHTML += '<span>Output div:' + allDivs[i].innerText + '</span><br />';
}

Para almacenarlos en una variable, simplemente reemplace la línea innerHTML con divSelection[i] = allDivs[i];

0
Mic1780 29 ago. 2014 a las 17:31