从文档片段获取属性？

Question

我想访问 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>

Answer 1

您可以通过查询选择来访问 DocumentFragment 中元素的属性，然后以正常方式访问它们。taskElement.querySelector("div[data-index]").dataset.index

Answer 2

你是这个意思？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">&nbsp; <div class="task draggable" draggable="true" data-index="idx">&nbsp; &nbsp; <input type="checkbox" />&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; <span class="custom-checkbox">Text</span>&nbsp; &nbsp; </label>&nbsp; </div></template>

Answer 3

您需要为数据集标签分配值才能访问它。像这样：<div&nbsp;class="task&nbsp;draggable"&nbsp;draggable="true"&nbsp;data-index="1">