如何构建一个大于 nodeList 的数组，将空字符串作为缺失类的占位符？

问题描述

HTML

<div class="1"><div class="2">element1class2</div><div class="3">element1class3</div></div>
<div class="1"><div class="2">element2class2</div></div>

Javascript：

var class2List= document.querySelectorAll('div.class1 div.class2')
var class3List= document.querySelectorAll('div.class1 div.class3')
    
for (let i = 0; i < class2List.length; i++) {
            nodes[i] = {
              class2: class2List[i].innerText,class3: class3list[i].innerText,} 
          }

嗨，我想知道是否可以使用 querySelectors 以下列方式制作 HTML 元素数组：

我想要一个innerText的输出数组，但是当没有类时，放一个空字符串。

[{class2: 'element1class2',class3: 'element1class3'},{class2: 'element2class2',class3: ''} ]

现在，如果节点中没有 div class="3"，那么对于每个不携带 class="3" div 的元素，NodeList 长度减 1。

class3List 的当前输出为 innerText is not defined for class3list，因为 class3list 的长度比 class2List 短。

解决方法

使用可选链，如果元素不存在，则值为 undefined，然后在这种情况下使用 ?? 替换空字符串：

class3: class3list[i]?.innerText ?? '',

如果不能使用可选链，可以使用条件运算符：

class3: class3list[i] ? class3list[i].innerText : '',

如果您需要处理中间的“漏洞”，则使用不同的方法：将 <div class="2" 元素映射到它们的下一个兄弟元素：

const nodes = [...document.querySelectorAll('[class="2"]')]
  .map(class2 => ({
    class2: class2.textContent,class3: class2.nextElementSibling?.textContent ?? ''
  }));
console.log(nodes);

<div class="1">
  <div class="2">element1class2</div>
  <div class="3">element1class3</div>
</div>
<div class="1">
  <div class="2">element2class2</div>
</div>

请注意，您需要使用 [class="2"] 选择器字符串，而不是 .class2，因为您的元素不是 class="class2"，而是 class="2"。

您还需要修正 HTML 的语法。最后

</div>/div>

应该

</div></div>

,

感谢@certainperformance，我通过使用分组选择器（class1），然后将每个数组元素与我正在寻找的类（class2 或 class3）的另一个 querySelector 映射，找到了解决我的问题的方法 例如：

const nodes = [...document.querySelectorAll('[class="2"]')] 

感谢有关 class=2 的 css 选择器的提示

nodes.map(node => ({
    class2: node.querySelector('[class="2"]') ? node.querySelector('[class="2"]').textContent: '',class3: node.querySelector('[class="3"]') ? node.querySelector('[class="3"]').textContent: ''
}))

这样我们就可以检查nodeList中每个父节点的父节点下是否存在一个类。