查询选择交替元素答案

【问题标题】：query selecting alternating elements查询选择交替元素
【发布时间】：2021-09-17 13:52:47
【问题描述】：

我有以下 HTML。我需要将文本内容提取到地图数组中，例如：

[{key: 'keyone', value: 'valone'}, {key: 'keytwo', value: 'valtwo'}, ... ]

我能想到的唯一方法是两个使用document.querySelectorAll('ol *');提取所有元素然后循环遍历每个元素并有一些规则，比如如果它是一个奇数，将它作为键添加，下面的元素作为值，然后跳过下一个元素。但这似乎真的hacky一个脆弱。有一个更好的方法吗？也许使用像:nth-last-of-type(2)这样的css选择器？

<ol>
  <dt>keyone</dt>
  <dd>valone</dd>
  <dt>keytwo</dt>
  <dd>valtwo</dd>
  ...
</ol>

【问题讨论】：

标签： javascript arrays dom selectors-api

【解决方案1】：

你可以选择所有元素，然后使用reduce得到想要的结果

const allNestedElements = [...document.querySelectorAll( "ol > *" )]
const result = allNestedElements.reduce( ( acc, curr, i ) => {
    if(i % 2) acc[acc.length - 1].value = curr.textContent;
    else acc.push({ key: curr.textContent })
    return acc;
}, [] );
console.log( result );

<ol>
  <dt>keyone</dt>
  <dd>valone</dd>
  <dt>keytwo</dt>
  <dd>valtwo</dd>
</ol>

【讨论】：

【解决方案2】：

假设dt-dd 的对是一致的，您可以映射dt 并使用nextElementSibling 来获取关联的dd

const dt = document.querySelectorAll( "ol dt" )

const res = [...dt].map(el => {
  return {key: el.textContent, value: el.nextElementSibling.textContent}
});

console.log( res );

<ol>
  <dt>keyone</dt>
  <dd>valone</dd>
  <dt>keytwo</dt>
  <dd>valtwo</dd>
</ol>

【讨论】：