为什么element.attribute在Edge中不起作用？

Question

我正在用javascript创建一个小的测验类型的应用程序。我的html结构看起来像这样。<div class="btn-group-toggle" data-toggle="buttons">  <label class="btn btn-secondary btn-insight" data-target="#myCarousel" data-responseID="1">  <input type="radio" name="options" id="option1" autocomplete="off">   <h5>1</h5>   <p class="mb-0">label for 1</p>  <div class="line-bottom gradient-purple"></div></label>...</div>我正在尝试使用自定义数据属性data-responseID来确定用户提供的答案。程序启动时，使用querySelectorAll单击侦听器并在每个侦听器上附加标签来遍历标签。const responseLables = document.querySelectorAll('div.btn-group-toggle > label');responseLables.forEach(element => {    element.addEventListener('click', function(e){        const clickedResponse = element.attributes[2].value;        determineWhereToSlide(clickedResponse);    });});这在Firefox和Chrome中效果很好，但在Edge中则不行。（我不关心IE 11）defineWhereToSlide只是一个提供警报的函数。最终，它将被用来推动旋转木马前进。我已经制作了一个有效的示例，如果您在其他浏览器中打开它，则可以看到该问题。https://codepen.io/anon/pen/dLmQKZ?editors=1010我不知道为什么会这样。

Answer 1

不要按索引引用属性（即使看起来应该起作用，但至少在DOM3之前，属性是无序的）。使用以下任何一种：

• element.getAttributeNode("data-responseID").value

• element.attributes["data-responseID"].value

• element.getAttribute("data-responseID")

• element.dataset.responseID

Answer 2

您可以使用该getAttribute()方法。

取代这个

const clickedResponse = element.attributes[2].value;

对此

const clickedResponse = element.getAttribute('data-responseID')