Solo necesita apuntar a la ID de "barra".

document.getElementById("barra").innerHTML = "texto nuevo";

Si desea acceder a un elemento con una identificación en HTML, no tiene que usar:

 var targetDiv = document.getElementByClassName("foo")[0].getElementsById("bar");

Simplemente puede hacer esto:

 var targetDiv = document.getElementsById("bar");

Además, necesitas algo para ejecutar el código. Por ejemplo, si hace clic en un botón, el texto cambia o si desea que el texto cambie tan pronto como se cargue el contenido DOM, puede agregar el detector de eventos DOMContentLoaded.

Prueba este código:

 <div class="foo"> <div id="bar"> Hello world! </div> <button onClick = "changeText()">Change Text!</button>

 changeText = () => { const targetVar = document.getElementById("bar"); targetVar.innerHTML = "Something else!"; }

Para proporcionar algo de contexto sobre por qué sucede esto, getElementById y getElementsByClassName devuelven un elemento y una matriz de elementos respectivamente. El objeto Element tiene una serie de funciones disponibles para llamar, que incluyen (pero no se limitan a) getElementsByClassName. Sin embargo, la función getElementById no está disponible en Elementos, solo en el propio objeto Documento , lo que significa que no puede llamarlo de la forma en que intentaba hacerlo en su primer ejemplo.

Para evitar esto, puede encontrar el elemento por ID de inmediato y trabajar desde allí.

 var targetDiv = document.getElementById("foo")

o puede usar querySelector y querySelectorAll

 const targetDiv = document.querySelector(".foo.active #bar") 

 // The result you want const targetDiv = document.querySelector(".foo.active #bar") console.log(targetDiv) // An example of a result not filtered by the active class const exampleDiv = document.querySelectorAll(".foo #bar") console.log(exampleDiv)

 <div class="foo active"> <div id="bar"> Hello world! </div> </div> <div class="foo inactive"> <div id="bar"> Hello world! </div> </div>

Tenga en cuenta que, idealmente, solo hay un elemento con una ID dada en una página, ya que las ID están destinadas a ser únicas. Dicho esto, mi ejemplo no es la mejor práctica, pero parece que en su ejemplo puede haber varios elementos con la misma ID.