Puedes hacerlo así:
var list = document.getElementById("foo").getElementsByClassName("bar");
if (list && list.length > 0) {
list[0].innerHTML = "Goodbye world!";
}
o, si desea hacerlo con menos verificación de errores y más brevedad, puede hacerlo en una línea como esta:
document.getElementById("foo").getElementsByClassName("bar")[0].innerHTML = "Goodbye world!";
En explicación:
- Obtienes el elemento con
id="foo"
.
- Luego encontrará los objetos que están contenidos dentro de ese objeto que tienen
class="bar"
.
- Eso devuelve una lista de nodos similar a una matriz, por lo que hace referencia al primer elemento en esa lista de nodos
- Luego puede configurar el
innerHTML
elemento de ese elemento para cambiar su contenido.
Advertencias: algunos navegadores antiguos no son compatibles getElementsByClassName
(por ejemplo, versiones anteriores de IE). Esa función puede ajustarse en su lugar si falta.
Aquí es donde recomiendo usar una biblioteca que tenga compatibilidad con el selector CSS3 incorporado en lugar de preocuparse por la compatibilidad del navegador (deje que alguien más haga todo el trabajo). Si desea que solo una biblioteca haga eso, Sizzle funcionará de maravilla. En Sizzle, esto se haría así:
Sizzle("#foo .bar")[0].innerHTML = "Goodbye world!";
jQuery tiene la biblioteca Sizzle incorporada y en jQuery, esto sería:
$("#foo .bar").html("Goodbye world!");
document.getElementsByClassName
funcionaría bien