Javascript 通过从DOM读取值来添加数据属性

我有下面的html结构，我正在尝试获取h标记的文本，并将其作为数据属性添加到相应的标记中：

<div class="content">
<div class="body">
    <h1>foo</h1>
    <p>para-test1</p>
    <p>para-test2</p>
    <div class="link"> 
        <a href="#">anchor1</a>
        <a href="#"">anchor2</a>
        <a href="#">anchor3</a>
    </div>
</div>
</div>
<div class="content">
<div class="body">
    <h1>bar</h1>
    <p>para-test3</p>
    <div class="link"> 
        <a href="#"">anchor4</a>
    </div>
</div>
</div>

---

在HTML中有两次额外的双引号。但是，要解决这个问题和前面提到的JQuery（对于这样一个琐碎的任务来说，这太过分了），请参见下面的内联注释：

//在链接上循环
document.queryselectoral（“div.link>a”）.forEach（函数（项）{
//将当前链接数据自定义属性设置为最接近的值
//.正文和该文本中的第一个标题元素
item.dataset.custom=item.closest（“.body”）.querySelector（“：first child”）.textContent；
控制台日志（项目）；
});

福
第1段

第2段

酒吧
第3段

Anchor 2由于额外的引号使用了无效的HTML…感谢您的回复。是否可以更通用的w.r.t获取标题文本。我尝试了类似于：querySelector（“：header”）@stdio.h的方法。我已经更新了答案，以针对
.body
元素中的第一个子元素，不管它是什么类型的元素。
<a data-custom="foo" href="#">anchor1</a>
<a data-custom="foo" href="#"">anchor2</a>
<a data-custom="foo" href="#">anchor3</a>

<a data-custom="bar" href="#">anchor4</a>

$(".content .body").each(function() {
$(this).find(".link").attr("data-hN", $(this).next(":header").text());
});