如何在JavaScript中将数据提取到对象中？

我有一个具有以下结构的HTML代码：

<div class="betting-table">
    <div class="header">
        <div class="header-col">
            <div class="header-title">SOME TITLE</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME</div>
           <div class="name bottom">SOME NAME</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME</div>
           <div class="name bottom">SOME NAME</div>
        </div>
    </div>
</div>

<div class="betting-table">
    <div class="header">
        <div class="header-col">
            <div class="header-title">SOME TITLE</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME</div>
           <div class="name bottom">SOME NAME</div>
        </div>
    </div>

    <div class="item">
        <div class="name">
            <div class="name top">SOME NAME</div>
           <div class="name bottom">SOME NAME</div>
        </div>
    </div>
</div>

我目前可以通过以下方式获取姓名：

function getMatches(){
    var divs = document.getElementsByClassName('name');
    var arr = Array.from(divs).map(m => {
      let name = m.querySelector('.name.top').innerText;
      return {name : name}
    });
    console.log(arr);
}

但是，我不知道如何映射每个项目的标题，因此前两个项目将具有第一个标题，第三个和第四个项目将具有第二个标题

---

在我描述的数据模型中，获取数据的最佳方法是什么

您可以迭代所有项目，然后使用

parentElement

访问

标题

const数组=[…document.getElementsByClassName（'item'）].map（i=>{
const title=i.parentElement.querySelector（'.header title'）.innerHTML；
const name=i.querySelector（'.name.top'）.innerHTML；
返回{title，name}；
});
console.log（数组）

一些标题1
一些名字1
一些名字1
一些名字2
一些名字2
一些标题2
一些名字3
一些名字3
一些名字4
一些名字4
如果您抓取投注表元素并覆盖它们，并且对于表中的每个项目，您可以生成一个数组，其中前四个项目和后两个项目共享相同的标题


//抓取表格
const tables=document.queryselectoral（'.betting table'）；
//“地图”在桌子上
常量arr=[…表].map（表=>{
//夺冠
const title=table.querySelector（'.header title'）.textContent；
//抓住桌子上的每一项
const items=table.querySelectorAll（'.item'）；
//“映射”在项目上
返回[…项].map（项=>{
//抓住名字
const name=item.querySelector（'.name.top'）.textContent；
//返回一个包含表名和项名的对象
返回{title，name}；
});
//最后，将阵列展平
}).flat（）；
控制台日志（arr）
。投注表{
显示：无；
}
onetwofreefourfivesixseveneightnineten
您还做了什么，还是只调用了
.getElementsByClassName（）
呢？有关于如何使用其返回值的示例。欢迎使用堆栈溢出。请向我们提供您的其余代码。嘿，我已经编辑了答案，并提供了我的代码@ternalhourits运行良好，除了我在name:uncaughttypeerror:cannotreadproperty'innerHTML'的null@Kirill上遇到这个错误Simonov@Tom也许是因为在你的例子中，
@TomášNosek附近没有结束语，在我更新我的答案之前，你可能也有这个问题。起初我以为你有不同的html结构。现在试试看
function getMatches(){
    var divs = document.getElementsByClassName('name');
    var arr = Array.from(divs).map(m => {
      let name = m.querySelector('.name.top').innerText;
      return {name : name}
    });
    console.log(arr);
}