Por ejemplo, si tengo
<div> <h2>Name</h2> <h3>age</h3> <span class='fa fa-trash'></span> </div>y al hacer clic en el lapso (icono) digo
this.parentNode.childNodes[1].innerTextapuntaría al Nombre, pero si digo
this.parentNode.childNodes[2].innerTextno apuntaría a Age. ¿Por qué es esto? ¿Hay algún recurso que lo explique bien? Sé que la indexación no comienza en 0, pero no entiendo cómo funciona la indexación.
DOM no son solo los elementos que ves en tu código HTML. Entre cada elemento hay un "nodo de texto" donde se puede mostrar el texto. Un ejemplo de esto sería tener texto en un div debajo de un encabezado. Asi que...
<div> <!-- Index 0: Text node --> <h1>Header Text</h1> <!-- Index 1: Element --> Description Text <!-- Index 2: Text node --> </div> Como puede ver, puede insertar texto en el div sin envolverlo en un elemento. Estos se denominan nodos de texto que ves cuando colocas el texto en elementos de texto normales (como span o p ) o botones ( <button>TEXT</button> ). Entonces, para evitar esto en su código JavaScript, puede hacerlo de manera perezosa;
document.getElementById("ELEMENT_ID").childNodes[INDEX*2 + 1] o usando la propiedad de los children ;
document.getElementById("ELEMENT_ID").children[INDEX] El problema con este método es que solo devuelve elementos secundarios dentro del div, por lo que no se podrá acceder al texto de descripción en el ejemplo HTML anterior. ( [H1] en lugar de [Text, H1, Text] ), pero supongo que eso es lo que estás buscando de todos modos. :)