将某些数据设置为firstChild＆＃34; data-id＆＃34; attrbute？

Question

如何获取/设置firstChild的属性＆＃34; data-id＆＃34;？ 我可以设置textarea的名称和内部文本：

el.firstChild.name='txt_'+j;
el.firstChild.innerText = 'Textarea '+j;

我要做的是改变＆＃34; data-id＆＃39;像这样的值（伪代码）：

el.firstChild.data('id')=j; 

只是为了澄清 - 有点HTML：

<div id="5" class="textarea_cloned">
<textarea name="txt_5">Textarea 5</textarea>
<div class="remove" data-id="5"> X </div>
</div>

谢谢

Answer 1

试试这个 -

使用firstElementChild代替firstChild

此属性与firstChild之间的区别在于firstChild将第一个子节点作为元素节点，文本节点或注释节点返回（取决于哪个（第一个），而firstElementChild将第一个子节点作为元素节点（忽略文本和注释节点）返回。

 el.firstElementChild.dataset.id=j

样本

https://jsfiddle.net/vikrant47/frcqb42q/

dataset的{​​p} dom属性包含dom的所有数据属性的地图。

Answer 2

如果您想在HTML代码中反映它，请使用setAttribute方法设置属性。虽然您需要使用firstElementChild来获取元素，否则textNode（开头的空格）可能会变为firstChild。

 el.firstElementChild.setAttribute('data-id', j)

var j = 10,
  el = document.getElementById('5');
el.firstElementChild.setAttribute('data-id', j)

console.log(el.innerHTML)

<div id="5" class="textarea_cloned">
  <textarea name="txt_5">Textarea 5</textarea>
  <div class="remove" data-id="5">X</div>
</div>

如果您只想添加dataset属性，请在dataset中设置该属性。

el.firstElementChild.dataset.id = j