En esta parte del código, ¿por qué nextSibling devuelve nulo?
const formIt = () => { const titles = document.querySelectorAll('h1'); document.getElementById('content').innerHTML = ''; titles.forEach(title => { console.log(title.nextSibling); let p = title.nextSibling; //Returns null let pWrapper = document.createElement('div'); pWrapper.appendChild(p); document.getElementById('content').appendChild(pWrapper); }); }; formIt(); <div id='content'> <h1>...</h1> <p>...</p> <h1>...</h1> <p>...</p> <h1>...</h1> <p>...</p> </div>En la línea 3, establece el innerHTML del content en una cadena vacía.
Eso elimina todos los elementos h1 y p del DOM.
No son hermanos después de eso.
——
Juega con innerHTML después de haber terminado el bucle.
Simplemente porque, en el momento en que se ejecuta forEach(), ha eliminado todos esos objetos del DOM:
document.getElementById('content').innerHTML = '';...así que ya no tienen hermanos.
Hay dos propiedades para iterar en los Node o elementos:
Consulte la nota en la documentación de nextSibling :
Nota: los navegadores insertan nodos de texto en un documento para representar espacios en blanco en el marcado de origen. Por lo tanto, un nodo obtenido, por ejemplo, mediante
Node.firstChildoNode.previousSiblingpuede hacer referencia a un nodo de texto de espacio en blanco en lugar del elemento real que el autor pretendía obtener .[..]
Puede usar
Element.nextElementSiblingpara obtener el siguiente elemento omitiendo cualquier nodo de espacio en blanco , otro texto entre elementos o comentarios. (énfasis mío)
Ver pregunta similar:
const headings = document.querySelectorAll('h1'); console.log("headings (count):", headings.length); let firstHeading = headings[0]; console.log("first h1 nextSibling (data):", firstHeading.nextSibling.data); console.log("first h1 nextElementSibling (data):", firstHeading.nextElementSibling.data); let secondHeading = headings[1]; console.log("second h1 nextSibling (data):", secondHeading.nextSibling.data); console.log("second h1 nextElementSibling (data):", secondHeading.nextElementSibling.data); <div id='content'> <h1>heading_1</h1>text_1 <p>paragraph_1</p> <h1>heading_2</h1> <p>paragraph_2</p> </div>