从文档片段中获取属性？答案

【问题标题】：get attributes from document fragment?从文档片段中获取属性？
【发布时间】：2020-03-29 21:08:44
【问题描述】：

我想在 javascript 中访问 data-index 属性，但是当我输入 taskElement.dataset.index 时出现错误

如何访问模板元素中的属性？

const tasksContainer = document.querySelector('[data-tasks]')
const taskTemplate = document.getElementById('task-template')
const taskElement = document.importNode(taskTemplate.content, true)
tasksContainer.appendChild(taskElement)

<div class="tasks draggables-container" data-tasks>Tasks:</div>

<template id="task-template">
  <div class="task draggable" draggable="true" data-index>
    <input type="checkbox" />
    <label>
      <span class="custom-checkbox">Text</span>
    </label>
  </div>
</template>

【问题讨论】：

我给你做了一个sn-p来拥有minimal reproducible example

标签： javascript html dataset templatetags documentfragment

【解决方案1】：

你是说这个吗？

const tasksContainer = document.querySelector('[data-tasks]')
const taskTemplate = document.getElementById('task-template')
const taskElement = document.importNode(taskTemplate.content, true)
console.log(taskElement.querySelector("div[data-index]").dataset.index)
tasksContainer.appendChild(taskElement)

<div class="tasks draggables-container" data-tasks>Tasks:</div>

<template id="task-template">
  <div class="task draggable" draggable="true" data-index="idx">
    <input type="checkbox" />
    <label>
      <span class="custom-checkbox">Text</span>
    </label>
  </div>
</template>

【讨论】：

【解决方案2】：

您需要为数据集标签分配值才能访问它。

像这样：

<div class="task draggable" draggable="true" data-index="1">

【讨论】：