Funciona de maravilla.
Pero ahora tengo un problema a la hora de aplicarlo a la página, porque la estructura indicada es sólo el final de un identificador específico de clase. Así por ejemplo:
Código:
<div class="field-especifico">
<div class="field-b">
<div class="field">
A Coruña, Galicia, España
</div>
</div>
</div>
He utilizado esta modificación:
Código:
var field = document.querySelector("field-especifico .field-b .field").textContent;
var field2 = field.split(",", 1);
document.querySelector(".field").textContent = field2;
El problema es que esa estructura se repite a lo largo del sitio, y el elemento a sustituir no está en la primera instancia.
Inserto el código y me encuentro con que no sustituye nada, y después de un repaso de toda la página veo que "A Coruña" está metido sustituyendo el contenido del primer juego de divs, mucho más arriba en la página, quedando así.
Código:
<div class="field-b">
<div class="field">
A Coruña
</div>
</div>
Por lo que tengo aprendido, querySelector sólo selecciona la primera instancia, así que ese es el problema. En otra parte de la web utilicé un sistema parecido para sustituir palabras con un localización muy precisa para exactamente la misma estructura utilizando querySelectorAll, así:
Código:
querySelectorAll('.field-especifico .field-b .field');
Así puedo localizar el div concreto distintivo (en este caso field-especifico).
Por alguna razón no me funciona esta vez.
¿Me podéis decir dónde falla?