Javascript 扩展DOM元素添加自定义变量（如在输入节点中）

我所拥有的：

基本上由主要数据点组成的组列表：链接、名称和封面图像。每个组的代码如下所示：

<a href="/group/ololo" class="group-item">
    <h1>Group Name</h1>
    <img src="path/to/the/image.png" />
</a>

因此a.href是链接，h1是名称，img.src是图像

我需要什么：

我需要为每个组创建一个模型表示，以便只需使用group.link、group.name和group.image即可访问它

我考虑用构造函数创建一个类，并手动设置所有字段，并且实际上是有效的。如果我试图访问.group-item，我要做的是扩展节点类，以便将这些字段添加到对象中。我想要的一个例子是特殊的节点，比如具有.value变量的input[type=text]，或者具有.checked变量的input[type=checkbox]

---

如何以这种方式扩展节点类？此外，我不想为此使用任何框架，只想使用纯js。谢谢大家!

您想要扩展DOM的具体原因是什么？如果不是，则可以定义一个函数，返回所需的嵌套属性：

var group = document.getElementsByClassName('group-item');

var items = Array.prototype.map.call(group, item);

function item(element) {
    return {
        link: element.href,
        name: element.getElementsByTagName('h1')[0].innerText,
        image: element.getElementsByTagName('img')[0].src
    };
}

否则，下面是一篇文章，回答您关于扩展DOM的问题：

编辑：下面是一个使用以下方法的解决方案：

以下是我如何应用和使用这些属性：

var group = document.getElementsByClassName('group-item');

Array.prototype.map.call(group, configureGroupItem);

for (var i = 0; i < group.length; ++i) {
  var item = group[i]

  // set item name
  item.name = 'Group' + i

  // set item image
  item.image = 'http://placehold.it/' + (i+4) + '0x' + (i+2) + '0'

  // print the data
  console.log(item.name + ' ' + item.image + ' ' + item.link)
}

var group=document.getElementsByClassName（'group-item'）；
Array.prototype.map.call（组，configureGroupItem）；
对于（变量i=0；i

---

当然，这将与旧浏览器不兼容。不鼓励这样做的另一个原因是，其他库/javascript插件可能定义/操作相同的属性，因此可能会与其他代码发生冲突。

根本没有具体原因，这只是知识和好奇心的问题。因为我已经有了一个可以做任何事情的工人阶级。我唯一想实现的是：

document.querySelector（'a.group-item'）.name；//'组名“

我找到了一种方法来完成您使用的描述：我还修改了我的答案

var group = document.getElementsByClassName('group-item');

Array.prototype.map.call(group, configureGroupItem);

for (var i = 0; i < group.length; ++i) {
  var item = group[i]

  // set item name
  item.name = 'Group' + i

  // set item image
  item.image = 'http://placehold.it/' + (i+4) + '0x' + (i+2) + '0'

  // print the data
  console.log(item.name + ' ' + item.image + ' ' + item.link)
}