JavaScript DOM 文档函数，用于将'for'属性添加到 html 标记

Question

我在HTML和JS中有以下工作代码：

HTML:

<label class="slider-text" for="masterChannel">

JS:

const masterChannel = document.querySelector('#masterChannel');
//Do more stuff...

现在我的计划是将我的整个html代码转换为JavaScript，到目前为止，我已经有了这个：

var label = document.createElement("label");
label.classList.add("slider-text");
//here I need to add the 'for' attribute to 'label' tag

我在JS中找不到任何方法来为标签添加for属性，我也不确定用不同的方法是否能获得相同的结果。

Answer 1

我在JS中找不到任何方法来为标签添加属性

在谷歌上搜索"；用javascript向标签添加属性"；得出几个正确答案，第一个是setAttribute()。

var label = document.createElement("label");
label.classList.add("slider-text");
label.setAttribute("for", "masterChannel");
console.log(label);

此外，正如@Pointy所提到的，您还可以在对象上使用.htmlForDOM属性：

var label = document.createElement("label");
label.classList.add("slider-text");
label.htmlFor = "masterChannel";
console.log(label);

顺便说一下，你的问题中的代码是：

const masterChannel = document.querySelector('#masterChannel');

不会得到你用这个HTML:显示的标签的引用

<label class="slider-text" for="masterChannel">

因为.querySelector()中的#指的是元素的id，而label元素的代码中没有id。对于您显示的HTML，您可以使用：

const masterChannel = document.querySelector("[for='masterChannel']");

因为CCD_ 8表示CSS中的属性选择器。