将ID添加到子级JAVASCRIPT并将它们作为数组存储到列表-no jQuery

Question

我有没有id的不同按钮，比方说：

   <div id="buttons">
      <button data-note="n1">One</button>
      <button data-note="n2">Two</button>
    </div>

等

我无法通过“ .button”进行访问，因为我有20多个左右。我可以通过它们的数据注释属性访问它们吗？ QuerySelector选择它们的第一个，第二个或全部-我可以专门选择它们吗，也许给它们添加一个ID？

我真正想要的是将数据注释作为数组存储到列表中，因此必须将该数据转换为数组作为列表添加到HTML。我以为没有ID也可以吗？我可能必须为每个按钮创建一个函数，通过单击它们可以将信息作为数组存储到列表中，如果调用该列表，以后可以访问。但是我不知道如何选择这些子级，如果可能的话，不是通过节点列表号而是通过数据；还是按节点列表排序，确定...但是可能取决于浏览器，因为它们的计数分别为0,1,2或1,3,5 ...是否可以使用getElementById并选择特定数目的子级？

要添加EventListener，我需要选择每个按钮...

Answer 1

样本输出：

步骤：

1）使用getElementsByTagName将所有按钮存储到数组中

2）使用for循环遍历数组

3）使用setAttribute设置所有按钮的ID

4）根据需要使用allButtons数组，因为它已经包含所有设置了ID的按钮。

代码：

  var allButtons = document.getElementsByTagName("button");
  for (var i = 0; i < allButtons.length; i++) {
    allButtons[i].setAttribute("id", "button-" + [i])
  }

  console.log(allButtons);

<div id="buttons">
  <button data-note="n1">One</button>
  <button data-note="n2">Two</button>
</div>

Answer 2

如果只希望将便笺数据放在无序列表中，则可以执行以下操作：

// Get all the buttons
let buttons = document.getElementsByTagName("button");

// Create an unordered list
let ul = document.createElement("ul");

// Iterate through the buttons
for (let button of buttons) {

  // For each button create a list item
  let li = document.createElement("li");
  
  // Set it's innerText attribute to be the data-note
  li.innerText = button.dataset.note;
  
  // Append it to the unordered list
  ul.append(li);
}

// Append the list to the body
document.body.append(ul);

<div id="buttons">
  <button data-note="n1">Item 1</button>
  <button data-note="n2">Item 2</button>
  <button data-note="n3">Item 3</button>
  <button data-note="n4">Item 4</button>
  <button data-note="n5">Item 5</button>
</div>

如果您只想选择具有特定data-note属性的按钮，则可以为此使用querySelector，例如：

let button = document.querySelector('button[data-note="n2"]')
console.log(button);;

<div id="buttons">
  <button data-note="n1">One</button>
  <button data-note="n2">Two</button>
  <button data-note="n3">Three</button>
</div>