Esta pregunta es sobre HTML con JavaScript puro (sin jQuery ni tecnología adicional).
Intento escribir a mano un archivo con una lista de URL que deberían aparecer como enlaces. Para reducir la escritura y evitar inconsistencias, quiero usar JavaScript para tomar una lista de elementos li y traducirla a elementos li que contengan elementos a apropiados con las URL como href y como texto.
Trabajando en esta dirección, he llegado al siguiente código, un poco condensado (sin a ) para mostrar el problema en cuestión:
<?xml version="1.0" encoding="UTF-8"?> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> </head> <body onload="linkify()"> <ul> <li href="https://stackoverflow.com/questions/5844732/getelementsbytagname-length-returns-zero" /> <li href="https://stackoverflow.com/questions/26932862/why-does-document-getelementsbyname-have-a-length-of-0-despite-having-elements" /> <li href="https://stackoverflow.com/questions/4057440/is-chrome-s-javascript-console-lazy-about-evaluating-objects" /> </ul> <script> function linkify () { let items = document.getElementsByName( "li" ); for ( let i = 0; i < items.length; ++i ) { item = items.item( i ); item.innerHTML = item.getAttribute( "href" ); } } </script> </body> </html> Espero que la página muestre una lista de URL. Sin embargo, la lista sigue siendo tres elementos de lista vacíos, sin direcciones URL. El depurador me dice que let items = document.getElementsByName( "li" ); obtiene un objeto 0 items.length para que el bucle for no haga nada.
Espero que linkify() solo se llame cuando se haya cargado todo el DOM, por lo que se deben encontrar los tres elementos li . ¿Dónde está mi error?
Simplemente, el método getElementsByName() no es el correcto.
devuelve una colección de elementos NodeList con un atributo de nombre dado en el documento. ( https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName )
Aquí no tiene atributos de nombre en sus etiquetas (las etiquetas li ni siquiera aceptan atributos de nombre)
Lo que realmente necesita es el método getElementsByTagName('li') ( https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName )
o el querySelectorAll('li') ( https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll )
El primero le brinda una colección de nodos activos , el segundo una colección de nodos no activos.
Como alternativa, puede probar el nombre de la etiqueta:
let items = document.getElementsByTagName("li");