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

Question

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 的输出数组，但是当没有 class 时，要放一个空字符串。

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

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

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

Answer 1

如果元素不存在，则使用可选链接使值为 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>

Answer 2

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

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

感谢 css 选择器 class=2

的提示

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

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

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

How to build an array larger than the nodeList, putting empty strings as placeholders for missing classes?

javascript

document

selectors-api

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

How to build an array larger than the nodeList, putting empty strings as placeholders for missing classes?

javascript

document

selectors-api

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