如何使用 DOM 从模板内部获取 id？

Question

所以我有一个模板设置和里面的一个表单，

我如何获取表单的 ID，因为我需要访问表单才能到达事件处理的提交按钮。

<template id ="Request">
    <form id="add">
        <label>Name
           <input type="text" name="name" required/>
        </label>
        <label>Price
           <input type="text" name="price" required/>
        </label>
          <input type="submit" value="Add"/>
    </form>
</template>

这是我使用浏览器命令行尝试的结果

document.querySelector('#request > add');
     returns null
document.getElementById('request').querySelector("#add [name=name]");
     returns null
document.querySelector("#request").getElementById("add")
     function does not exist

我最接近的是这个

document.querySelector("#request").content.getElementById("add")

这 returns 添加部分的内容，但我计划向其添加事件侦听器，但“内容”不想使用它。有没有替代品？

Answer 1

<template> HTML 元素中的内容是 Document Fragment，因此不能像典型 HTML 元素的子元素那样从根文档中查询是。

我们不想将事件侦听器添加到我们的 <template> 的子项中，而是想等到模板的 content 呈现到 DOM 中。

根据您在 https://jsfiddle.net/mhk4z0wL/ 分享的代码示例，我们将在调用后添加事件侦听器以附加克隆的 helpTemplate.content:

data.appendChild(helpTemplate.content.cloneNode(true));
        
data.querySelector('#add').addEventListener('submit', () => {
  alert('I caught your submit!');
  e.preventDefault();
});

这会起作用，但并不理想。每次用户通过单击其他页面按钮之一将呈现的页面更改为帮助以外的页面时，我们的帮助表单将从 DOM 中删除。在这种情况下，最好删除我们的事件侦听器以防止内存泄漏。我们可以通过创建对提交处理程序回调函数的引用并确保在每个页面呈现处理程序中将其删除：

function onSubmitHelpForm(e) {
  alert('I caught your submit!');
  e.preventDefault();
}

function clearOnSubmitListener() {
  const helpForm = document.getElementById('add');

  if (helpForm) {
    helpForm.removeEventListener('submit', onSubmitHelpForm);
  }
}

然后在每个按钮单击处理程序中我们将有：clearOnSubmitListener();

有关其工作原理的示例，请参阅 this fiddle。

如何使用 DOM 从模板内部获取 id？

How to get an id from inside of a template using DOM?

html

javascript

jquery

dom