Estoy tratando de raspar un sitio web que tiene una estructura como esta:
var elems = document.getElementsByClassName("breakfast"); elems = [...elems] // Converts HTMLCollection to Array elems = elems.map(elem => elem.children[0]) elems = elems.filter(elem => elem !== undefined) elems = elems.map(elem => elem.getAttribute("title")) document.write(elems) <div class="breakfast"> <p title="1">Bagels</p> </div> <div class="breakfast"> </div> <div class="breakfast"> <p title="2">Bread</p> </div> <div class="breakfast"> <p title="3">Toast</p> </div> <div class="breakfast"> </div> El Javascript anterior funciona bien, pero quiero los valores undefined , en lugar de que no aparezcan, quiero que sean 0.
Mi primer pensamiento fue usar el operador ternario, sin embargo, no sé cómo hacer un nuevo elemento HTML donde elementos como los elementos secundarios o los atributos sean accesibles. Sé de HTMLParagraphElement , lamentablemente la documentación no es suficiente para que descubra cómo hacer esto.
El operador de encadenamiento opcional (
?.) le permite leer el valor de una propiedad ubicada en lo profundo de una cadena de objetos conectados sin tener que verificar que cada referencia en la cadena sea válida.El
?.El operador es como el . operador de encadenamiento, excepto que en lugar de causar un error si una referencia es nula (nula o indefinida), la expresión se cortocircuita con un valor de retorno de indefinido. Cuando se usa con llamadas a funciones, devuelve indefinido si la función dada no existe.
y
El operador coalescente nulo (
??) es un operador lógico que devuelve su operando del lado derecho cuando su operando del lado izquierdo es nulo o indefinido y, de lo contrario, devuelve su operando del lado izquierdo.
var elems = [...document.querySelectorAll(".breakfast")]; elems = elems.map(elem => elem.children[0]) // elems = elems.filter(elem => elem !== undefined) elems = elems.map(elem => elem?.getAttribute("title") ?? 0) document.write(elems) <div class="breakfast"> <p title="1">Bagels</p> </div> <div class="breakfast"> </div> <div class="breakfast"> <p title="2">Bread</p> </div> <div class="breakfast"> <p title="3">Toast</p> </div> <div class="breakfast"> </div>