将“复杂”的 HTML 结构分配给 JavaScript 变量答案

【问题标题】：Assign a "complicated" HTML structure to a JavaScript variable将“复杂”的 HTML 结构分配给 JavaScript 变量
【发布时间】：2021-11-19 14:21:27
【问题描述】：

我正在尝试抓取一个结构如下的网站：

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>

上面的 Javascript 工作得很好，但我想要 undefined 值，而不是它们不显示，我希望它们为 0。

我的第一个想法是使用三元运算符，但是我不知道如何创建一个新的 HTML 元素，其中可以访问子元素或属性等元素。我知道HTMLParagraphElement，遗憾的是文档不足以让我弄清楚如何做到这一点。

【问题讨论】：

首先删除elems = elems.filter(elem => elem !== undefined) 然后
@mplungjan 到目前为止，在这种情况下删除它会产生错误。

标签： javascript html web-scraping

【解决方案1】：

使用optional chaining

可选的链接运算符 (?.) 使您能够读取位于连接对象链深处的属性值，而无需检查链中的每个引用是否有效。

?. 运算符类似于 .链接运算符，除了如果引用为空（null 或未定义）而不是导致错误，表达式短路并返回未定义的值。与函数调用一起使用时，如果给定函数不存在，则返回 undefined。

和

nullish coalescing operator

nullish 合并运算符 (??) 是一个逻辑运算符，当其左侧操作数为 null 或未定义时返回其右侧操作数，否则返回其左侧操作数。

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>

【讨论】：