Obtengo solo el color de estilo del primer elemento de encabezado como verde, ¿por qué?

Porque document.querySelector solo selecciona el primer elemento que coincide.

Si desea establecer el color del elemento que acaba de agregar, use la referencia que ya tiene para el elemento: tag . (Nota al margen: tag es un nombre extraño para esa variable, porque no contiene ni se refiere a una etiqueta, se refiere a un elemento ).

 for (let i = 1; i <= 4; i++) { var tag = document.createElement("h1"); var text = document.createTextNode(i + " Tutorix is the best e-learning platform"); tag.appendChild(text); var element = document.getElementById("new"); element.appendChild(tag); tag.setAttribute("style", "color: green;"); }

 <div id="new"> </div>

Nota al margen: en general, es más limpio asignar propiedades en el objeto de estilo en lugar de establecer el atributo de style :

 tag.style.color = "green";

Hacen cosas diferentes (lo anterior solo establece el color en verde sin cambiar nada más; establecer el atributo de style reemplaza por completo todos los estilos en línea para el elemento con lo que proporciona).

El método de documento querySelector() devuelve el primer elemento dentro del documento que coincide con el selector o grupo de selectores especificado. Si no se encuentran coincidencias, se devuelve nulo. Selector de consultas

El método Document querySelectorAll() devuelve una NodeList estática (no activa) que representa una lista de los elementos del documento que coinciden con el grupo de selectores especificado. querySelectorAll