您如何 select 编码通过模板添加的节点？

Question

所以我使用模板方法在页面中动态添加HTML内容，我想通过事件侦听器更改输入的值。

这里有一段完全随机的代码片段作为示例（故意胡说八道）:

favoriteElement +=  `<div class="favorite__page JS-favoritePage">
            <p id="JS-amountOfFavorites">Quantity of saved pages : ${amount}</p>
            <input type="number" class="favoritesQuantity" name="amountOfFavorites" min="1" max="100" value="${value}">
          </div>`

假设我想访问输入的值，我将声明一个变量并通过他们的查询选择器获取它：

let inputFavoritesQuantity = document.querySelector('input [class="favoritesQuantity"]');

现在我将添加一个事件侦听器：

inputFavoritesQuantity.addEventListener("input", function(e){
let valueOfInput = e.target.value;

//Other code
}

虽然问题是我无法访问输入，因为它添加了一个模板，所以它给出了一个错误Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

我可以使用属性 createElement、setAttribute、appendChild...

手动添加所有内容

但这会使代码变得很长而且难以维护！（甚至不考虑我的代码项目中的事实，我必须添加 5 个嵌套元素，每个元素有 5 个属性！）

是否有另一种有效的方法来访问带有模板的元素？

Answer 1

DOMParser 将字符串编译成文档。您需要访问 documentElement 以便添加到现有 dom。这是一个使用示例

let amount = 100
let value = 50
favoriteElement =  `<div class="favorite__page JS-favoritePage">
            <p id="JS-amountOfFavorites">Quantity of saved pages : ${amount}</p>
            <input type="number" name="amountOfFavorites" min="1" max="100" value="${value}" />
          </div>`

// This converts the string and gets the documentElement.
var node = new DOMParser().parseFromString(favoriteElement, "text/html").documentElement

//Now we are working with an actual element and not a string of text.
let inputFavoritesQuantity = node.querySelector('input [class="favoritesQuantity"]');

node.addEventListener("input", function(e){
    let valueOfInput = e.target.value;
    console.log('value changed', valueOfInput);
})

var outputDiv = document.getElementById('content')
outputDiv.appendChild(node);

<div id="content">

</div>

您如何 select 编码通过模板添加的节点？

How can you select code nodes that were added through templates?

javascript

templates

dom

dom-events

addeventlistener