Intentando cambiar la etiqueta h3 a una etiqueta <button> dirigida a través de la .container y .button-1 usando JavaScript. Desafortunadamente, solo apunta al primer h3 .
var allWindow = document.querySelector('.container .button-1 h3'); allWindow.outerHTML = '<button>submit</button>'; <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div>Su problema es que está utilizando querySelector que siempre se refiere al primer elemento encontrado. Sugeriría que debería cambiarlo a querySelectorAll (obtener todos los elementos) y usar un bucle para actualizar todos sus elementos
var allWindows = document.querySelectorAll('.container .button-1 h3'); for(let element of allWindows) { element.outerHTML = '<button>submit</button>'; } <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> const replaceAll = () => { const elems = document.querySelectorAll('.container > .button-1 > h3'); [...elems].forEach((elem) => { const button = document.createElement('button'); button.textContent = 'submit'; elem.replaceWith(button); }); }; document.querySelector('#replace').addEventListener('click', replaceAll); <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <div class="container"> <div class="button-1"> <h3>submit</h3> </div> </div> <button id="replace">Replace</button>