Estoy tratando de ejecutar este código y extraer todos los encabezados con la opción de mostrar "no existe" cuando ciertos encabezados... no existen, pero no está leyendo la declaración else de alguna manera y sería genial si pudiera señalarme la dirección correcta.
function headingsEx() { let h = ["h1", "h2", "h3", "h4", "h5", "h6"]; for (let i of h) { if (document.getElementsByTagName(i)) { let foundHs = document.querySelectorAll(i) for (let c of foundHs) { console.log({ [i]: c.textContent }) }; } else { console.log([i] + " doesn't exist"); } } } headingsEx();Una matriz vacía es verdadera (generalmente de todos modos), por lo que incluso cuando getElementsByTagName(i) no encuentra nada y devuelve una matriz vacía, el bloque "entonces" sigue siendo el que se ejecuta.
console.log('is [] true?'); if ([]) { console.log('yes'); } else { console.log('no'); } console.log('---'); console.log('is [99] true?'); if ([99]) { console.log('yes'); } else { console.log('no'); }Si se pregunta por qué dije "generalmente", consulte https://xavierchow.github.io/2015/12/15/js-coercion/ pero no se preocupe si no puede seguirlo. También fue una novedad para mí.
De acuerdo con los documentos , document.getElementsByTagName(i) devuelve una HTMLCollection en vivo. En ninguna parte de los documentos dice que devuelve algo más que eso. Por lo tanto, es seguro decir que document.getElementsByTagName(i) siempre será veraz (es decir, no null ni false ). En su lugar, puede verificar el miembro de length . Será mayor que 0 si al menos uno de los elementos existe.
function headingsEx() { let h = ["h1", "h2", "h3", "h4", "h5", "h6"]; for (let i of h) { if (document.getElementsByTagName(i).length) { let foundHs = document.querySelectorAll(i) for (let c of foundHs) { console.log({ [i]: c.textContent }) }; } else { console.log([i] + " doesn't exist"); } } } headingsEx();Ya que preguntaste sobre enfoques alternativos:
Este ejemplo toma todos los elementos de encabezado usando querySelectorAll y luego usa map para crear una nueva matriz de nombres de nodos. Luego puede iterar sobre la matriz de encabezados y verificar si cada elemento está incluido en la matriz nodeNames , y luego registrar el resultado en consecuencia.
const arr = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']; const headings = document.querySelectorAll(arr.join(',')); const nodeNames = [...headings].map(heading => { return heading.nodeName.toLowerCase(); }); arr.forEach(el => { if (nodeNames.includes(el)) { console.log(`${el}: exists.`) } else { console.log(`${el}: does not exist.`) } }); <h1>Hi</h1> <h3>Hi</h3> <h4>Hi</h4> <h6>Hi</h6>