El problema es que cuando defines una función, todo lo que contiene está contenido en un ámbito separado. Dentro de la función bodyArr no se conoce. Puede usar this en su lugar para referirse al elemento en el que se hizo clic, como se muestra a continuación:

document.body.children solo se referirá a los elementos secundarios directos del elemento del body . Si desea hacer referencia a cada elemento en el DOM, puede usar document.getElementsByTagName("*") en su lugar.

Cuando el código se escribe globalmente, como en el fragmento a continuación, la variable bodyArr está realmente disponible en el ámbito global, al igual que la variable i . Pero tenga en cuenta que el código dentro de la función solo se ejecuta cuando se hace clic en un elemento. En ese momento, el bucle for se ejecutó por completo, dejando i con el valor 3 (ya que en el fragmento debajo de la etiqueta del script también cuenta). bodyArr siempre contendrá exactamente 1 elemento menos, sin importar cuántos elementos haya en el DOM. En este caso, tiene 3 elementos y el último elemento se guarda en la posición 2 (basado en cero) en la matriz, por lo bodyArr[i] es igual a undefined .

 let bodyChildren = document.body.children; let bodyArr = Object.values(bodyChildren); for (i = 0; i < bodyChildren.length; i++) { bodyArr[i].onclick = function () { console.log(this.tagName); } }

 <span>child1</span> <p>child2</p>

Necesita obtener TODOS los elementos del cuerpo del documento y esto es CLAVE: var all = document.getElementsByTagName("*");

 var all = document.getElementsByTagName("*"); let bodyArr = Object.values(all); for (i = 0; i < bodyArr.length; i++) { bodyArr[i].onclick = function () { console.log(this.tagName); }; }

 <span>Hello world</span>