Soy nuevo en JavaScript. En el siguiente código, getElementsByName("li").length siempre devuelve 0, aunque hay muchas etiquetas <li> en mi HTML, ¿por qué?

document.addEventListener('DOMContentLoaded', function() {
    var len = document.getElementsByName('li').length;
    alert(len);
})

art of my HTML:

<body>
    <ul>
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
    </ul>
</body>
2
yadaxian 29 may. 2020 a las 16:25

3 respuestas

La mejor respuesta

Reemplazar

document.getElementsByName('li')

Con

document.getElementsByTagName('li')

¡Esto sucede porque está seleccionando por tag name y no por name! ¡Estás usando una función incorrecta!

0
Sankalp Bhamare 29 may. 2020 a las 13:33

Puede hacer algo como esto porque getElementsByTagName() devuelve NodeList para que pueda iterar sobre él como una matriz u obtener la longitud.

document.addEventListener('DOMContentLoaded', function() {
    var listElements = document.getElementById('list').getElementsByTagName("li");
    alert(listElements.length);
})
<body>
    <ul id="list">
        <li >aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
    </ul>
</body>

getElementsByName() aunque también devuelve NodeList, pero devuelve la lista de todos los elementos de nombre same en el documento whole , por lo que para que esto funcione, debe dar el mismo nombre a toda la lista artículos.

document.addEventListener('DOMContentLoaded', function() {
    var len = document.getElementsByName('name').length;
    alert(len);
});
<body>
    <ul>
        <li name="name">aaaaaa</li>
        <li name="name">bbbbbb</li>
        <li name="name">cccccc</li>
    </ul>
</body>
0
Zain Ul Abideen 29 may. 2020 a las 13:59

El método que está intentando usar es tratar de encontrar un elemento específico por su nombre.

Ninguno de los elementos de su lista tiene un nombre, para ello debe actualizar su código para que sus elementos tengan nombres.

document.addEventListener('DOMContentLoaded', function() {
    var len = document.getElementsByName('list_item_1').length;
    alert(len);
})    

<li name="list_item1">aaaaaa</li>
0
John S 29 may. 2020 a las 13:34